Ajax在请求过程中显示进度的简单实现

Ajax在Web应用程序中的使用越来越频繁。在Ajax调用的过程中，有这样一种方式：显示一个GIF图片动画，显示后台正在工作，同时阻止用户操作这个页面(例如，Ajax请求是由一个按钮触发的，用户不能频繁点击这个按钮生成多个并发的Ajax请求)；调用完成后，图片消失，当前页面重新编辑。以下图为例，页面通过加载链接(左)通过Ajax请求加载数据。当用户点击链接时，Ajax请求启动，GIF图片显示“Loading”状态，当前页面被“覆盖”阻止用户继续点击Load按钮(中间)；Ajax请求完成了返回响应的结果，当结果出现时，GIF图片和“遮罩”同时消失(右图)。

源代码下载

这里我还以ASP.NET的MVC应用程序为例，提供了一个简单的实现。我们的GIF图片和div作为蒙版是在布局文件中定义的，相应的CSS是为它们定制的。GIF和mask div的z-index分别设置为2000和1000(这是任意的，只要mask div可以覆盖当前页面并且GIF图片显示在顶层)。后者可以通过设置位置、上下左右覆盖整个页面，背景设置为黑色。

！DOCTYPE html html head title@ViewBag.Title/title风格类型='text/css '。隐藏{displaynone }。进度{z-index }。掩模{位置固定；顶部；右；底部；向左；z指数；背景色# }/样式./head body div @ render body()/div img id=' progressmgage ' class=' progress hide ' alt=' src=' http : @ URl。content(' ~/Images/Ajax-loader . gif ')'/div id=' maskofprogressimage ' class=' mask hide '/div/body/html，然后我们通过下面的代码为jQuery定义另一个方法ajax2，它仍然调用$。ajax(选项)实现Ajax调用。在ajax2方法中，我们封装了options参数的完整属性，这样就可以隐藏显示的GIF图片和mask div。同时涵盖了options的async属性，总是异步执行，因为只有这样浏览器才能不被锁定，GIF才能正常显示。在调用$之前。ajax(选项)为了发出Ajax请求，我们将显示GIF图片和mask div，并将它们放置在中心。蒙版div的透明度也相应设置，所以会出现上图(中间)的效果。

！DOCTYPE html html标题.脚本类型=' text/JavaScript ' src=' http : @ URl。内容(' ~/Scripts/jquery-.min . js ')'/script script type=' text/JavaScript ' $(function(){ $)。Ajax=function(options){ var img=$(' # progressive mgage ')；var mask=$(' # maskOfProgressImage ')；var complete=options.completeoptions.complete=function(Httprequest，status){ img . hide()；mask . hide()；if(complete){ complete(Httprequest，状态)；} };options.async=trueimg.show()。css({ 'position' 'fixed '，' top' '% '，' left' '% '，' margin-top ' function(){ return-* img . height()/；}、“左边距”函数(){ return-* img . width()/；} });mask.show()。css('不透明度'，'.');$.ajax(选项)；};});/脚本/标题./html，现在调用Ajax时，只需要调用$.ajax2，如下图是实例中“Load”链接的click事件的注册码：

a href=' # ' id=' load ' load/a div id=' result '/div脚本类型='text/javascript' $('#load ')。单击(function () { $)。ajax ({ url '@Url。操作(' GetContacts ')'，成功函数(结果){ $('#result ')。html(结果)；} });});/script