Ajax异步加载显示等待效果

作者：天空2017.04.16来源：Web前端之家浏览：6962评论:0

关键词：JQuery JS

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手段，如使用隐藏的或内嵌的框架(<iframe>标签)。

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：

<div id="loading"><img src="${path}/map/image/2012032811155512.gif" alt=""/>正在加载数据,请稍候...</div>

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();
}