jQuery Ajax异步加载显示等待效果代码共享

AJAX的全称是异步JavaScript和XML。它不是一项新技术，而是以下原始技术的结合。

1)用CSS和XHTML来表达。

2)使用DOM模型的交互式动态显示。

3)使用XMLHttpRequest与服务器异步通信。

4)使用javascript进行绑定和调用。

借助AJAX异步技术，可以在客户端脚本和web服务器之间的数据交换过程中，使用XMLHttpRequest对象完成HTTP Request/Response模型：

1)用户不需要等待服务器响应。控件在异步调度XMLHttpRequest请求后立即返回到浏览器。界面上不会出现白板，在得到服务器响应之前可以友好的给出加载提示。

2)不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数，当服务器响应到达时触发回调函数，并传递少量所需数据。“按需获取数据”也减轻了服务器的压力。

3)不需要使用隐藏或嵌入的框架。在XHR对象之前，Ajax通信通常是通过hack来模拟的，例如使用隐藏或嵌入的框架(iframe标签)。

css:

#正在加载{ width:170pxheight:25pxborder:3px实心# C3DAF9位置：绝对；top:300pxleft:600pxz指数：10000；背景-color : # f7f 9fc；线高：25 px；垂直对齐：毫米；font-size :11 pt；display:none}html:

Div id='正在加载' img src=' http : $ { path }/map/image/201203281115512 . gif ' alt=' '/正在加载数据，请稍候./divjs:

$.ajax({async: true，before send : function(){ ShowDiv()；}，complete : function(){ HiddenDiv()；}，类型： 'POST '，url : ' '，数据： {}，success:函数(数据){//var obj=JSON.parse(数据)；//var str=JSON . stringify(obj)；}});//显示加载数据函数show div () {$ ('# loading ')。show()；}//隐藏加载数据函数hidden div () {$ ('# loading ')。hide()；}图片渲染如下：

以上是边肖介绍的jQuery Ajax异步加载和显示等待效果的代码分享，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！