html ajax等待效果,jQuery Ajax 异步加载显示等待效果代码分享

AJAX 全称 Asynchronous JavaScript and XML(异步的 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手段，如使用隐藏的或内嵌的框架(标签)。

css：

#loading {

width:170px;

height:25px;

border:3px solid #C3DAF9;

position:absolute;

top:300px;

left:600px;

z-index:10000;

background-color:#F7F9FC;

line-height:25px;

vertical-align:middle;

font-size:11pt;

display:none;

}

html：

正在加载数据,请稍候...

js：

$.ajax({

async: true,

beforeSend: function () {

ShowDiv();

},

complete: function () {

HiddenDiv();

},

type : 'POST' ,

url : '',

data : {

},

success: function (data) {

//var obj = JSON.parse(data);

//var str = JSON.stringify(obj);

}

});

//显示加载数据

function ShowDiv() {

$("#loading").show();

}

//隐藏加载数据

function HiddenDiv() {

$("#loading").hide();

}

图片效果图如下所示：

以上所述是小编给大家介绍的jQuery Ajax 异步加载显示等待效果代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！