现在位置首页 / 项目实战 /正文

Jquery $.ajax请求详解及ajax全局变量分析

作者: IT小兵 | 2014年3月12日| 热度:℃ | 评论: |参与:

在一个页面中,我们可能会使用多个初始化加载函数,包括可能有onload、$(document).ready(function (e) {});。

他们的具体差别不在该文章中涉及,本篇主要分析一下ajax的请求状态及异步同步处理,多个ajax请求的状态监控和分析。


ajax带来很好的用户体验,于是一个稍微注重web系统使用ajax基本成为必然。当传统功能型web项目向用户体验型项目转变时,

  1. 层出不穷的需求就来了。正如本篇所介绍的就是一个多个AJAX请求的情况下,如何利用jquery来处理几种case。

  2. 多个ajax请求同时发送,相互无依赖。

  3. 多个ajax请求相互依赖,必须有先后顺序。

  4. 多个请求被同时发送,只需要最后一个请求。

第1种case

应用场景: 这个场景很多,一个页面打开是多个区域同时请求后台得到各自的数据,没依赖,没顺序。
处理方案: 直接用jquery的ajax函数。这个用的非常多,这里从略,可看后面的代码中例子。

第2种case

应用场景: 多个ajax请求,需要顺序执行,后一个ajax请求的执行参数是前一个ajax的结果。例如:

 用户登录后我们发送一次请求得到用户的应用ID,然后利用应用ID发送一次请求得到具体的应用内容

(例子虽然不是太恰当,但基本就是这个意思了)。
处理方法:
    1. 利用ajax参数async设置为false,进行同步操作。(这个方法只适合同域操作,跨域需使用下面两种方法)
    2. 利用ajax嵌套(这个同第1种情况)
    3. 利用队列进行操作

1)、ajax请求实际上和http正常的页面打开是一样的返回代码,具体代码查看:


[Http请求状态及jquery ajax请求异常处理]

2)、页面多个ajax请求时,我们如何监控每个ajax的执行情况?

这里是有办法的,如果是一个单独的界面我们可以在每个ajax的函数中处理:

 
        $.ajax({
            type: "post",
            dataType: "json", traditional: true,
            data: { oper: "detail", id: id },
            url: AjaxUrl,
            success: function (data, textStatus) {
                if (data != null) {
                    //成功处理
                }
            },
            complete: function (XMLHttpRequest, textStatus) {
//完成处理
            },
            error: function (e) {
                //异常处理
            }
        });

但是,要是很多页面都需要统一处理,或者需要等到所有ajax请求完成后,才处理下一步请求,就需要有一个监控

该页面所有ajax请求完成情况的全局处理了。这个可以使用jQuery自带的ajax全局变量进行处理。

背景介绍:Jquery ajax全局变量

jquery 提供了一个列表 全局Ajax事件处理程序 。 这些全局事件是发起每一个AJAX请求时产生。如果全局变量jQuery.ajaxSetup()是true。

默认情况下它是true。

  • .ajaxStart——注册一个处理程序被称为第一个AJAX请求时开始;每个页面中所有的ajax请求只发生一次。

  • .ajaxSend——附加一个函数执行之前发送一个AJAX请求;每次发起ajax请求就触发一次。

  • .ajaxError——注册一个处理程序被称为AJAX请求完成时一个错误;

  • .ajaxSuccess——附加一个函数执行时一个AJAX请求成功完成;

  • .ajaxComplete——注册一个处理程序被称为AJAX请求完成;每次发起一次ajaxsend请求就对应一次complete。

  • .ajaxStop——注册一个处理程序被称为当所有AJAX请求已经完成了。

每当一个Ajax请求即将发送,jQuery检查是否有任何其他响应过程中的Ajax请求。如果没有检查到,jQuery就会触发ajaxStart事件。


我们可以使用上面的事件注册程序,把一些通用操作所有AJAX请求在这些事件中简化和统一处理。

 一些可能用到的场景如下:

  • 显示一个繁忙的图标和阻塞UI每当一个AJAX请求的过程;

  • 不管碰到一个AJAX错误显示一条错误消息;

  • 重定向用户重定向到登录页面如果web会话到期时一个AJAX请求。

  • 监控多个ajax的状态执行情况

  • 在页面所有ajaxsend执行完成后,执行下一步的操作

var sendcount = 0;
var completecount = 0;
// 添加ajax全局事件处理。
$(document).ajaxStart(function (a,b,c) {
    
}).ajaxSend(function (e, xhr, opts) {
    sendcount++;
}).ajaxError(function (e, xhr, opts) {
}).ajaxSuccess(function (e, xhr, opts) {
}).ajaxComplete(function (e, xhr, opts) {
    completecount++;
    if (sendcount == completecount) {
        //进行下一步操作
    }
}).ajaxStop(function () {
});




2)、异步和同步的差别:

$.ajax()其中有一个参数为async: false,false为同步。

ajax是调用xmlhttprequest对象之类(以ie为例)发送请求,而这些对象本来就有并发数的限制,不同的浏览器也是不同的数目限制,ie貌似是2。

有一点要注意,Javascript自身是单线程运行的,所有的主流浏览器只提供一个线程执行Javascript。因此Javascript不能开启额外的线程(除非使用Web Workers,目前最新的浏览器 Safari, Chrome, Opera and Mozilla Firefox支持Web Workers,IE10也会支持)。Javascript中的事件都是线性执行的,通过一个任务队列,可以近似的看做先进先出的模式处理事件的,因此所有的Javascript异步实现都是假象,通过计时器实现的。

Javascript自身单线程运行,不代表ajax是单线程运行,因为ajax是通过XMLHttpRequest这个API实现的,因此是浏览器提供额外的线程去处理http request。一旦请求处理完毕,它会触发一个事件,把这个事件加入到javascript任务队列中,直到javascript处理这个事件。

3)、ajax不执行Success的问题

  • JQuery 中Ajax的一点其它的认识: 客户端发起请求,得到服务器端的相应是200,<正确拿到服务器响应的数据>没有问题.此时在判断进入success 对应的回调函数还是进入到error对应的回调函数之前,可能会校验一些东西:
    1. 返回的每条数据是否是dataType中定义的数据类型。如果有部分数据不是或者哪怕一条数据没有严格的按照dataType定义的类型,程序就会进入到error:function(){****}

    2. 请求的域和当前域是否是同一域,如果不是同一域也十分有可能进入error:function(){***}



参考代码:

An Example to Use jQuery Global AJAX Event Handlers - CodeProject


http://www.codeproject.com/Articles/382390/An-Example-to-Use-jQuery-Global-AJAX-Event-Handler

多ajax请求的各类解决方案(同步, 队列, cancel请求)的令一种解决方案 - 参禅 - 博客园

http://www.cnblogs.com/spnt/archive/2013/03/21/2973970.html


转发注明:IT分享  http://www.suchso.com 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询