夏日博客

A-A+

jquery中全局ajax参数详细执行分析

2016年01月07日 前端设计 暂无评论 阅读 5 views 次

jquery中全局ajax参数很多朋友不太清楚了，这里我来以一篇文章为各位分析jquery中全局ajax参数例子，希望可以帮助到大家哦。

本文分析的问题，比较奇葩。可能大家在一般的项目中都用不到。所以首先要先了解这个应用场景。反正我分析了之后才发现jquery全局$.ajax竟然可以这样用!
IT分享

1、背景

在页面中使用ajax请求进行异步操作这个现在比较常用，我们会在ajax开始时候加个进度显示，在complete之后隐藏即可。但是要是页面内有多个ajax请求，我们怎么处理这个进度那？单个单个处理肯定会很麻烦，比如你不知道所有页面的ajax什么时候都处理完成，需要很具体的写代码才行。

单个ajax请求,代码如下:

  1. function GetEditData() {  
  2.         if (ID == null || ID == 0) { return; }  
  3.         //开始启动进度条  
  4.         $("#btnnext").html("修改");  
  5.            $.ajax({  
  6.             type: "post",  
  7.             url: ajaxUrl,  
  8.             data: {  
  9.                 activeid: ID,  
  10.                 Operate: "view"  
  11.             },  
  12.             success: function (data, textStatus) {  
  13.                 if (data != null) {  
  14.                     $("#txttitle").val(data.title);  
  15.                 }  
  16.                 else {  
  17.                     alert("加载数据失败:" ); return;  
  18.                 }  
  19.             },  
  20.             complete: function (XMLHttpRequest, textStatus) {  
  21.                     //完成了。去除进度条  
  22.             },  
  23.             error: function (e) {  
  24.                 alert("加载数据失败。"); return;  
  25.             }  
  26.         });  
  27.     }  

又或者这个情况：提交表单的所有活动ajax请求失败时，并触发错误事件.如何停止在jQuery中所有活动的ajax请求，而不trigerring错误事件？

2、分析

这里就用到了ajax的全局变量。具体可以到这里看看[Jquery $.ajax请求详解及ajax全局变量分析]。这里指说明一下我们用的全局变量。

jquery $.ajax有一些全局变量：

.ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。

.ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。

.ajaxSend() 在 Ajax 请求发送之前显示一条消息。

jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。

.ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。

.ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。

.ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。

我们通过这些全局变量就能够保存每次ajax请求，并在每个ajax请求处理完成后，清理这个缓存。

首先我们定义个实体保存每次ajax请求的数据,代码如下:

  1. function AjaxModel(id, status) {  
  2.     this.id = id;  
  3.     this.status = status;  
  4.     return this;  
  5. }  

然后在ajax的处理事件中加上逻辑,代码如下:

  1. // 添加ajax全局事件处理。  
  2. $(document).ajaxStart(function (a, b, c) {  
  3.      
  4. }).ajaxSend(function (e, jqXHR, options) {  
  5.          
  6.     sendcount++;  
  7.     jqXHR.id = sendcount;  
  8.     var model = new AjaxModel(jqXHR, 0);  
  9.     if (xhrPool.length == 0) {  
  10.         // timer = setInterval("CheckIsAjaxLoadok()", 10);//1000为1秒钟  
  11.         $.fn.jqLoading({ height: 100, width: 240, text: "正在加载中，请耐心等待...." });  
  12.     }  
  13.      
  14.     xhrPool.push(model);  
  15. }).ajaxError(function (e, xhr, opts) {  
  16. }).ajaxSuccess(function (e, xhr, opts) {  
  17. }).ajaxComplete(function (e, jqXHR, options) {  
  18.         
  19.          
  20.     $.each(xhrPool, function (key, val) {  
  21.             
  22.         if (val.id.id== jqXHR.id) {  
  23.             val.status = 1;  
  24.         }  
  25.     });  
  26.   var  xhrPooltemp = $.grep(xhrPool, function (x) { return x.status==0 });  
  27.   if (xhrPooltemp.length == 0) {  
  28.         $.fn.jqLoading("destroy");  
  29.     }   
  30. }).ajaxStop(function () {  
  31. });  

这里面最主要的是将ajax的XMLHttpRequest 对象保存到我们定义的array数组中。这里需要注意：

每次XMLHttpRequest 对象jquery会保存,在ajax 完成后销毁,所以这里我们就可以用判断每个ajax是否完成。XMLHttpRequest 对象是没有id这个属性的，我们可以自己给他加上这个属性,代码如下:

  1. .ajaxSend(function (e, jqXHR, options) {  
  2.          
  3.     sendcount++;  
  4.     jqXHR.id = sendcount;  
  5.     var model = new AjaxModel(jqXHR, 0);  
  6.     if (xhrPool.length == 0) {  
  7.         // timer = setInterval("CheckIsAjaxLoadok()", 10);//1000为1秒钟  
  8.         $.fn.jqLoading({ height: 100, width: 240, text: "正在加载中，请耐心等待...." });  
  9.     }  
  10.      
  11.     xhrPool.push(model);  
  12. })  

jqXHR.id = sendcount;给这个XMLHttpRequest对象加上了id，按照发起请求的顺序给他一个id。

在complete函数中，我们找到这个对应id的XMLHttpRequest对象，设置它完成了。

这样这个页面的所有ajax请求，我们都能够管理起来。剩下的能做的事情就很多了。可以判断每个ajax请求是否完成，中止所有的ajax请求，在全部ajax完成后取消遮罩层等等。

标签：

给我留言