Ajax详解3请求队列

/*
 完成请求的赛跑

 异步请求几乎同时发生，但却不会同步而且次序经常颠倒。

 1.延迟决定胜利者
 在赛跑过程中，无论是服务器还是脚本都无法使某个请求更快地得到响应。请求过程中的延迟会出现在几个阶段，而其中的多个阶段都是你无法控制的。
 所有通信过程都将遵循如下相同的模式：
 （1）客户端计算机对服务器发起获取或修改信息的请求。
 （2）将请求通过一条计算机网络发送到服务器。
 （3）服务器处理请求。
 （4）服务器将对请求的响应通过另一条计算机网络发送回客户端计算机
 在这个请求/相应循环的过程中，每个阶段都存在外部因素的影响。

 2.处理异步请求
 处理请求/响应循环中的延迟问题有很多不同的方式。以下是其中几种主要的思路：
 （1）置之不理。
 （2）关掉异步行为。 在Ajax对象中设置asynchronous=false是另外一种选择，但这个选择也可以从你的方案清单中划掉。如果在XMLHttpRequest对象上设置了同步模式，那么它会按照次序处理请求，但它是通过把请求转换为一种更加激进的阻塞模式来实现这一点的。在这种情况下，你的脚本将被迫停止运行直至请求完成，期间可能会因为响应过慢而导致脚本和浏览器被挂起。

 3.在客户端队请求排队
 排队是另一种可能的方案。与其一次发送多个XMLHttpRequest请求，不如等到前一个请求获得相应后再发送下一个。

 */

/* 一个复制对象的辅助方法 */
function clone(myObj) {
    if (typeof myObj !== 'object') {
        return myObj;
    }
    if (myObj === null) {
        return myObj;
    }
    var myNewObj = {};
    for (var i in myObj) {
        myNewObj[i] = clone(myObj[i]);
    }
    return myNewObj;
}

/* 用于保存队列的数组 */
var requestQueue = [];

/**
 * 为ADS.ajaxRequest方法启用排队功能的包装对象
 * @param url
 * @param options
 * @param queue
 * @example
 *      ADS.ajaxRequestQueue('/your/script/', {
     *          completeListener: function(){
     *              alert(this.responseText);
     *          }
     *      }, 'Queue1');
 */
function ajaxRequestQueue(url, options, queue) {
    queue = queue || 'default';

    // 这个对象将把可选的侦听器包装在另一个函数中
    // 因此，可选的对象必须唯一。否则，如果该方法
    // 被调用时使用的是共享的可选对象，那么会导致
    // 陷入递归中
    options = clone(options) || {};
    if (!requestQueue[queue]) {
        requestQueue[queue] = [];
    }

    // 当前一次请求完成时，需要使用completeListener
    // 调用队列中的下一次请求。如果完成侦听器已经
    // 有定义，那么需要首先调用它

    // 取得旧侦听器
    var userCompleteListener = options.completeListener;

    // 添加新侦听器
    options.completeListener = function () {
        // 如果存在旧的侦听器则首先调用它
        if (userCompleteListener) {
            // this引用的是情求对象
            userCompleteListener.apply(this, arguments);
        }

        // 从队列中移除这个请求
        requestQueue[queue].shift();

        // 调用队列中的下一项
        if (requestQueue[queue][0]) {
            // 请求保存在req属性中，但为防止它是
            // 一个POST请求，故也需包含send选项
            var q = requestQueue[queue][0].req.send(
                    requestQueue[queue][0].send
            );
        }
    };

    // 如果发生了错误，应该通过调用相应的
    // 错误处理方法取消队列中的其他请求

    // 取得旧侦听器
    var userErrorListener = options.errorListener;

    // 添加新侦听器
    options.errorListener = function () {
        if (userErrorListener) {
            userErrorListener.apply(this, arguments);
        }

        // 由于已经调用了错误侦听器
        // 股从队列中移除这个请求
        requestQueue[queue].shift();

        // 由于出错需要取消队列中的其余请求，但首先要调用
        // 每个请求的errorListener。通过调用队列中
        // 下一项的错误侦听器就会才清楚所有排队的请求，因为在
        // 链中的调研那个是一次发生的

        // 检测队列中是否还存在请求
        if (requestQueue[queue].length) {
            // 取得下一项
            var q = requestQueue[queue].shift();

            // 中断请求
            q.req.abort();

            // 伪造请求对象，以便errorListener
            // 认为请求已经完成并相应地运行

            var fakeRequest = {};

            // 将status设置为0，将readyState设置为4
            // 就好像请求虽然完成但却失败了一样
            fakeRequest.status = 0;
            fakeRequest.readyState = 4;

            fakeRequest.responseText = null;
            fakeRequest.responseXML = null;

            // 设置错误信息，以便需要时显示
            fakeRequest.statusText = 'A request in the queue received an error';

            // 调用状态改变，如果readyState是4，而
            // status不是200，则会调用errorListener
            q.error.apply(fakeRequest);
        }
    };

    // 将这个请求添加到队列中
    requestQueue[queue].push({
        req: getRequestObject(url, options),
        send: options.send,
        error: options.errorListener
    });

    // 如果队列的长度表明只有一个
    // 项（即第一个）则调用请求
    if (requestQueue[queue].length === 1) {
        ajaxRequest(url, options);
    }
}

window.ADS.ajaxRequestQueue = ajaxRequestQueue;

//队列中的请求1
ADS.ajaxRequestQueue('/your/script/', {
    completeListener: function () {
        alert(this.responseText);
    }
}, 'Queue1');
//队列中的请求2
ADS.ajaxRequestQueue('/your/script/', {
    completeListener: function () {
        alert(this.responseText);
    }
}, 'Queue2');
//队列1中的请求1，要等到请求1完成
ADS.ajaxRequestQueue('/your/script/', {
    completeListener: function () {
        alert(this.responseText);
    }
}, 'Queue1');
// 队列1与队列2会在同一时刻以异步方式运行

/*
 4.令请求异步但禁用有冲突的功能
 禁用功能可能是避免不协调问题的最常见方法了。当执行某些异步请求时，让用户知道后台在干什么永远是很重要的。而这通常是通过在请求等待响应期间显示“载入中”等信息或者动画来完成。在等待期间，用户可能会犹豫急不可耐而在载入完成之前有执行了相同的操作，那么就可能对程序造成潜在的破坏。
 除了显示简单的“载入中”信息之外，还可以禁用程序中的某个部件，以防止用户在不耐烦的情况下重复操作。而实现这一点的唯一技巧，就是无论是响应成功，还是发生了错误都要重新启用所禁用的部件。
 */

// 例如：Web应用程序中包含如下提交按钮
// <input type="submit" id="buttonID">
// 那么，就可以禁用表单提交功能
ADS.ajaxRequest('/your/script/', {
    loadListener: function () {
        // 在载入期间禁用按钮
        ADS.$('buttonID').disabled = 'disabled';
    },
    completeListener: function () {
        // 当响应成功时启用按钮
        ADS.$('buttonID').disabled = '';
        alert(this.responseText);
    },
    errorListener: function () {
        // 当发生错误时也要启用按钮
        ADS.$('buttonID').disabled = '';
        alert('Oops, please try again:' + this.statusText);
    }
});

/*
这种方法的唯一问题，就是在某些情况下--比如拖放式界面功能中--如果使用它，结果差不多会与传统页面重载的工作流一样令人讨厌。所以不能再脚本等待响应期间禁用拖动功能
 */

// 增加资源占用