jquery全局ajax参数详细执行分析-$.ajax竟然可以这样用!
2015-03-27 16:45
483 查看
本文分析的问题,比较奇葩。可能大家在一般的项目中都用不到。所以首先要先了解这个应用场景。反正我分析了之后才发现jquery全局$.ajax竟然可以这样用!
1、背景
在页面中使用ajax请求进行异步操作这个现在比较常用,我们会在ajax开始时候加个进度显示,在complete之后隐藏即可。但是要是页面内有多个ajax请求,我们怎么处理这个进度那?单个单个处理肯定会很麻烦,比如你不知道所有页面的ajax什么时候都处理完成,需要很具体的写代码才行。
单个ajax请求:
又或者这个情况:提交表单的所有活动ajax请求失败时,并触发错误事件.如何停止在jQuery中所有活动的ajax请求,而不trigerring错误事件?
2、分析
这里就用到了ajax的全局变量。具体可以到这里看看[Jquery
$.ajax请求详解及ajax全局变量分析]。这里指说明一下我们用的全局变量。
jquery $.ajax有一些全局变量:
我们通过这些全局变量就能够保存每次ajax请求,并在每个ajax请求处理完成后,清理这个缓存。
首先我们定义个实体保存每次ajax请求的数据:
然后在ajax的处理事件中加上逻辑:
每次XMLHttpRequest 对象jquery会保存,在ajax 完成后销毁。所以这里我们就可以用判断每个ajax是否完成。XMLHttpRequest 对象是没有id这个属性的,我们可以自己给他加上这个属性。这里面最主要的是将ajax的XMLHttpRequest 对象保存到我们定义的array数组中。这里需要注意:
在complete函数中,我们找到这个对应id的XMLHttpRequest对象,设置它完成了。
jqXHR.id = sendcount;给这个XMLHttpRequest对象加上了id,按照发起请求的顺序给他一个id。
这样这个页面的所有ajax请求,我们都能够管理起来。剩下的能做的事情就很多了。可以判断每个ajax请求是否完成,中止所有的ajax请求,在全部ajax完成后取消遮罩层等等。
源引:http://www.suchso.com/projecteactual/jquery-ajax-args-use-global-setup.html
1、背景
在页面中使用ajax请求进行异步操作这个现在比较常用,我们会在ajax开始时候加个进度显示,在complete之后隐藏即可。但是要是页面内有多个ajax请求,我们怎么处理这个进度那?单个单个处理肯定会很麻烦,比如你不知道所有页面的ajax什么时候都处理完成,需要很具体的写代码才行。
单个ajax请求:
function GetEditData() { if (ID == null || ID == 0) { return; } //开始启动进度条 $("#btnnext").html("修改"); $.ajax({ type: "post", url: ajaxUrl, data: { activeid: ID, Operate: "view" }, success: function (data, textStatus) { if (data != null) { $("#txttitle").val(data.title); } else { alert("加载数据失败:" ); return; } }, complete: function (XMLHttpRequest, textStatus) { //完成了。去除进度条 }, error: function (e) { alert("加载数据失败。"); return; } }); }
又或者这个情况:提交表单的所有活动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请求的数据:
<span style="font-size:14px;">function AjaxModel(id, status) { this.id = id; this.status = status; return this; }</span>
然后在ajax的处理事件中加上逻辑:
<span style="font-size:14px;">$(document).ajaxStart(function (a, b, c) { }).ajaxSend(function (e, jqXHR, options) { sendcount++; jqXHR.id = sendcount; var model = new AjaxModel(jqXHR, 0); if (xhrPool.length == 0) { // timer = setInterval("CheckIsAjaxLoadok()", 10);//1000为1秒钟 $.fn.jqLoading({ height: 100, width: 240, text: "正在加载中,请耐心等待...." }); } xhrPool.push(model); }).ajaxError(function (e, xhr, opts) { }).ajaxSuccess(function (e, xhr, opts) { }).ajaxComplete(function (e, jqXHR, options) { $.each(xhrPool, function (key, val) { if (val.id.id== jqXHR.id) { val.status = 1; } }); var xhrPooltemp = $.grep(xhrPool, function (x) { return x.status==0 }); if (xhrPooltemp.length == 0) { $.fn.jqLoading("destroy"); } }).ajaxStop(function () { });</span>
每次XMLHttpRequest 对象jquery会保存,在ajax 完成后销毁。所以这里我们就可以用判断每个ajax是否完成。XMLHttpRequest 对象是没有id这个属性的,我们可以自己给他加上这个属性。这里面最主要的是将ajax的XMLHttpRequest 对象保存到我们定义的array数组中。这里需要注意:
<span style="font-size:14px;">.ajaxSend(function (e, jqXHR, options) { sendcount++; jqXHR.id = sendcount; var model = new AjaxModel(jqXHR, 0); if (xhrPool.length == 0) { // timer = setInterval("CheckIsAjaxLoadok()", 10);//1000为1秒钟 $.fn.jqLoading({ height: 100, width: 240, text: "正在加载中,请耐心等待...." }); } xhrPool.push(model); })</span>
在complete函数中,我们找到这个对应id的XMLHttpRequest对象,设置它完成了。
jqXHR.id = sendcount;给这个XMLHttpRequest对象加上了id,按照发起请求的顺序给他一个id。
这样这个页面的所有ajax请求,我们都能够管理起来。剩下的能做的事情就很多了。可以判断每个ajax请求是否完成,中止所有的ajax请求,在全部ajax完成后取消遮罩层等等。
源引:http://www.suchso.com/projecteactual/jquery-ajax-args-use-global-setup.html
相关文章推荐
- jquery全局ajax参数详细执行分析-$.ajax竟然可以这样用!
- Jquery中AJAX参数详细介绍
- Jquery中AJAX常用参数详细介绍
- Jquery中AJAX参数详细介绍
- JQuery中Ajax详细参数使用案例
- JQuery中的AJAX参数详细介绍
- 类型:Jquery;问题:jquery调用后台带参数方法;结果:利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
- Jquery中AJAX参数详细介绍
- 转载 Jquery中AJAX参数详细介绍
- jquery上传插件uploadify参数详细分析
- Jquery中AJAX参数详细说明
- 解决jQuery.ajax在IE, FireFox可以正常执行。Chrome,360极速模式中无法正常执行。
- Jquery中AJAX参数详细介绍
- jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
- Jquery中AJAX参数详细介绍
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
- JQuery中Ajax()的data参数类型实例分析
- jquery之ajax——全局事件引用方式以及各个事件(全局/局部)执行顺序
- jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
- Jquery中AJAX参数详细列表