Ajax与jQuery异步加载数据

亦凉 2023-07-13 03:57 11阅读 0赞

本文共1096个字，预计阅读时间需要4分钟。

## 简介 ##

一次性从服务器数据库中读取数据并传送到前端页面上是不现实的，一方面会加重服务器的压力，另一方面客户的带宽资源也会被占用。Ajax刚好可以解决数据异步加载的问题。Ajax 即“**A**synchronous **J**avascript **A**nd **X**ML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

由于用 jQuery 实现 ajax 比较简单，因此接下来的代码引用jQuery库实现Ajax，另外使用Django作为框架。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5aXN2_size_16_color_FFFFFF_t_70]

其中jQuery可以手动下载放到本地文件夹中，也可以引用下面的语句。

## HTML语句 ##

类别为demo的div将展示Ajax数据

( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 指 页 面 其 他 元 素 加 载 完 成 后 开 始 加 载 A j a x 数 据 ， 此 时 ， 浏 览 器 不 会 有 加 载 条 和 转 圈 的 情 况 出 现 。 当 然 也 可 以 改 为 点 击 某 个 元 素 加 载 例 如 (document).ready(function()\{\})指页面其他元素加载完成后开始加载Ajax数据，此时，浏览器不会有加载条和转圈的情况出现。当然也可以改为点击某个元素加载例如 (document).ready(function())指页面其他元素加载完成后开始加载Ajax数据，此时，浏览器不会有加载条和转圈的情况出现。当然也可以改为点击某个元素加载例如(‘\#demo’).click(function()\{\})。

. g e t J S O N ( ‘ / a j a x s e r v e r / ’ , f u n c t i o n ( r e t ) 指 从 D j a n g o 的 v i e w . p y 中 的 函 数 a j a x s e r v e r 读 取 J S O N 数 据 ， 数 据 通 过 .getJSON(‘/ajax\_server/’,function(ret)指从Django的view.py中的函数ajax\_server读取JSON数据，数据通过 .getJSON(‘/ajaxserver/’,function(ret)指从Django的view.py中的函数ajaxserver读取JSON数据，数据通过(‘\#demo’).append(ret)展示到div中。也可以使用document.getElementById(“demo”).innerHTML = ret;来展示数据。

<!DOCTYPE html>
    <html>
    <body>
    
    <div class = "demo"></div>
     
    <script src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
         
          $.getJSON('/ajax_server/',function(ret){
         
                $('#demo').append(ret)
          })
        });
    </script>
    </body>
    </html>

## view.py(Django) ##

添加

def ajax_server(request):
        data_dict = {
        'xxx': 'omegaxyz.com', 'yyy': 'zzz'}
        return JsonResponse(data_dict)

## urls.py(Django) ##

添加

url(r'^ajax_server/$', 'tools.views.ajax_server', name='ajax_server'),

## 缺陷 ##

对应用Ajax最主要的批评就是，它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，HTML5之前的方法大多是在用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态）。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5aXN2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200310141554444.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5aXN2,size_16,color_FFFFFF,t_70
[omegaxyz.com]: https://www.omegaxyz.com