`
tipx
  • 浏览: 108986 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

队列执行 Ajax请求、Store请求、普通函数

AjaxEXTjsonITeye 
阅读更多
在比较复杂的模块中碰到无数次多个Ajax异步请求同时请求( 不会用direct)，而且往往需要在这些请求都完成后，根据所有的请求结果做一些事情，比如提交表单什么的，最初的解决方式是一个请求的回调里嵌下一个请求，勉强实现后，调试维护异常纠心，一圈一圈像个洋葱。
接着右思左想之下，写下这个简易的还算能用的队列（我随便称呼的，各位大人轻拍）。
本队列能加普通函数、Ext.Ajax.request请求、Store请求，可以任意调整顺序（其实就一数组，所以，你们懂的），可以按顺序执行，也可以无序同时执行请求，在所有请求完成后有事件可监听  （废话太多了，上代码）


执行结果截图：（含一个Ajax请求、一个Store请求、一个普通函数，实例在代码的注释中，不过异步请求自己随意建就可以了）

队列顺序执行效果：


队列无序执行效果： 




Ext.ns("Ext.ux.queue");
/**
 * @class Ext.ux.queue.Queue
 * @extends Ext.util.Observable
 *
 * 队列，支持Ajax,Store,普通Function
 *
 <pre><code>
var log=[];
var queue = new Ext.ux.queue.Queue({
    listeners:{
        beforequeue: function(){
            //Q.info("开始执行队列------------&lt;br/>");
            //return false;
        },
        afterqueue: function(self, flag){
            Q.info("完成---"+log.join("&lt;br/>")+"&lt;br/>"+flag);
        }
    }
});

//-----------------------------------Ajax队列项---------------------------------
//1.直接使用【Ajax参数】方式创建Ajax队列项
var q1 = queue.addAjax({
    url: path+"/sys/BusiUser^checkDiscountAuthorize.action",
    params:{authorizeUser: "smallBeautiful@4304", authorizePwd: "123000"},
    success: function(response){
        var json = Ext.decode(response.responseText);
        if(false === json.success){
            log.push("执行【授权success】！---false");
            return false;
        }
        log.push("执行【授权success】！---true");
        //return true;
    },
    failure: function(response){
        log.push("执行【授权failure】！----false");
        return false;
    },
    callback: function(){
        log.push("执行【授权callback】！");
        //return true;
    }
});
//2.直接【完整参数】方式创建Ajax队列项
var q1 = queue.addAjax({
    params: {
        url: path+"/sys/BusiUser^checkDiscountAuthorize.action",
        params:{authorizeUser: "smallBeautiful@4304", authorizePwd: "123000"},
        success: function(response){
            var json = Ext.decode(response.responseText);
            if(false === json.success){
                log.push("执行【授权success】！---false");
                return false;
            }
            log.push("执行【授权success】！---true");
            //return true;
        },
        failure: function(response){
            log.push("执行【授权failure】！----false");
            return false;
        },
        callback: function(){
            log.push("执行【授权callback】！");
            //return true;
        }
    },
    listeners: {
        "beforeexecute": function(){
            log.push("------------执行【q1 -> beforeexecute】！");
        },
        "afterexecute": function(){
            log.push("------------执行【q1 -> afterexecute】！");
        }
    }
});
q1.on("beforeexecute", function(){
    log.push("执行【q1 -> beforeexecute】！");
});
q1.on("afterexecute", function(){
    log.push("执行【q1 -> afterexecute】！");
});

//-----------------------------------Ajax队列项----结束--------------------------


//-----------------------------------Store队列项---------------------------------
var q2 = queue.addStore({
    store: grid.getStore(),
    params: {
        start:0,
        limit:10,
        callback: function(rs, options, success){
            log.push("执行【store.load - callback】！");
            //return success;
        }
    }
//,
//listeners: {
//    "beforeexecute": function(){
//        log.push("执行【q2 -> beforeexecute】！");
//    },
//    "afterexecute": function(){
//        log.push("执行【q222222 -> afterexecute】！");
//    }
//}
});
q2.on("beforeexecute", function(){
    log.push("执行【q2 -> beforeexecute】！");
    //return false;
});
q2.on("afterexecute", function(){
    log.push("执行【q2 -> afterexecute】！");
});

//两种移除队列方式
queue.remove(q2);
//queue.removeAt(0);

//-----------------------------------Store队列项----结束-------------------------


//-----------------------------------普通函数队列项------------------------------
//1.使用【函数参数】创建函数队列项
//var q3 = queue.addFn(function(){
//    log.push("执行【q3 - fn】！");
//    return true; //返回false，则代表当前队列项执行失败
//});

//2.使用【完整参数】创建函数队列项
var q3 = queue.addFn({
    fn: function(json){
        log.push("执行【q3 - fn】！-----"+json.aaa);
        return true;
    },
    params:{aaa: "我是函数参数"},
    listeners: {
        "beforeexecute": function(){
            log.push("----listeners----执行【q3 -> beforeexecute】！");
        },
        "afterexecute": function(){
            log.push("----listeners----执行【q3 -> afterexecute】！");
        }
    }
});
q3.on("beforeexecute", function(){
    log.push("执行【q3 -> beforeexecute】！");
});
q3.on("afterexecute", function(){
    log.push("执行【q3 -> afterexecute】！");
});

//【注】：可以在添加队列项时，设置顺序：queue.addAjax({...}, 1); //将当前添加的队列项设置为队列的第2项

queue.orderExecute(); //顺序执行队列
//queue.execute();    //无序执行队列
 </code></pre>

 * @author    tipx
 * @homepage  http://tipx.iteye.com
 * @version   0.1
 * @revision  $Id: Ext.ux.queue.js 5 2011-04-14 10:35:16 tipx $
 * @depends Q
 *
 * @license Ext.ux.queue.Queue is licensed under the terms of
 * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
 * that the code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 *
 * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
 * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
 */
Ext.ux.queue.Queue = Ext.extend(Ext.util.Observable, {
    //items:[], //队列
    //disorderCount:0,  //队列完成计数器，初始设置为当前items.length（防止在请求途中有添加item），每执行一个请求该值减1，值为0时代表所有执行完毕，用于无序请求时，触发afterqueue事件
    //orderCount:0, //队列执行计数器，初始为当前items.length，每执行一个请求该值减1，值为0时代表所有执行完毕
    constructor: function(cfg){
        this.items=[]; //队列容器
        Ext.apply(this, cfg);
        this.initEvents();
        Ext.ux.queue.Queue.superclass.constructor.call(this, cfg);
    },
    //添加事件
    initEvents: function(){
        this.addEvents(
            /**
             * @event beforequeue 队列开始执行前事件<br/>若事件返回false，则终止执行队列
             * @param {Ext.ux.queue.Queue} this 当前队列
             */
            "beforequeue",
            /**
             * @event afterqueue 队列开始执行完成事件
             * @param {Ext.ux.queue.Queue} this 当前队列
             * @param {boolean} success 队列执行结果，true为成功，false为失败
             * <br/>当队列中任意一个队列项执行结果为false，则队列执行结果为false
             * <br/>若当前队列为顺序执行时，某一队列项执行结果为false，则终止队列执行，队列执行结果为false
             */
            "afterqueue",
            /**
             * @event execute 任意一个队列项执行完毕
             * @param {Ext.ux.queue.Queue} this 当前队列
             * @param {boolean} success 队列项执行结果，true为成功，false为失败
             */
            "execute"
        );

        //监听队列项执行完毕事件
        this.on("execute", function(self, success){
            //Ext.ux.queue.EXECUTETYPE.DISORDER : 无序执行
            //Ext.ux.queue.EXECUTETYPE.ORDER : 有序执行
            this[this.executeType+"ExecuteItem"](success); //根据执行类型，执行相应的方法
        });
        //队列执行完成后，重置队列执行类型
        this.on("afterqueue", function(){
            this.executeType = null;
        });
    },
    /**
     * 获取队列长度
     * @return {int} 队列长度
     */
    getCount: function(){
        return this.items.length;
    },
    /**
     * 根据索引获取队列项
     * @param {int} index 索引
     * @return {Ext.ux.queue.QueueItem} 队列项
     */
    getAt: function(index){
        return this.items[index];
    },
    /**
     * 将普通Ajax请求添加到队列
     * @param {object} json 配置信息；允许直接传入Ajax请求参数
     * @param {int} index (Optional) 队列索引，通过该参数可调整当前队列项所处的顺序，缺省添加到队列当前最后一位
     * @return {Ext.ux.queue.QueueItem} 新添加的队列项
     */
    addAjax : function(json, index){
        //url存在时，当前整个作为request的params
        if(json.url){
            json = {
                params: json
            };
        }
        json.qtype = Ext.ux.queue.QTYPE.AJAX;
        return this.addItem(json, index);
    },
    /**
     * 将Store请求添加到队列
     * @param {object} json 配置信息
     * @param {int} index (Optional) 队列索引，通过该参数可调整当前队列项所处的顺序，缺省添加到队列当前最后一位
     * @return {Ext.ux.queue.QueueItem} 新添加的队列项
     */
    addStore : function(json, index){
        return this.addItem(Ext.apply({
            qtype: Ext.ux.queue.QTYPE.STORE
        }, json), index);
    },
    /**
     * 添加普通函数添加到队列
     * @param {object/function} json 配置信息，直接传入函数则作为队列执行项
     * @param {int} index (Optional) 队列索引，通过该参数可调整当前队列项所处的顺序，缺省添加到队列当前最后一位
     * @return {Ext.ux.queue.QueueItem} 新添加的队列项
     */
    addFn: function(json, index){
        //当json参数是函数时，则自动转换
        if(Ext.isFunction(json)){
            json = {
                fn: json
            };
        }
        json.qtype = Ext.ux.queue.QTYPE.FUNCTION;
        return this.addItem(json, index);
    },
    /**
     * 添加队列项(对象)
     * @param {Ext.ux.queue.QueueItem} item 队列项对象
     * @param {int} index (Optional) 队列索引，通过该参数可调整当前队列项所处的顺序，缺省添加到队列当前最后一位
     * @return {Ext.ux.queue.QueueItem} 新添加的队列项
     */
    add: function(item, index){
        this.items.splice(this.createIndex(index), 0, item);
        return item;
    },
    //private
    addItem: function(json, index){
        var item = new Ext.ux.queue.QueueItem(json);
        this.items.splice(this.createIndex(index), 0, item);
        return item;
    },
    /**
     * 移除队列项
     * @param {Ext.ux.queue.QueueItem} item 待移除的队列项
     * @return {Ext.ux.queue.QueueItem} 被移除的队列项；若未在当前队列中找到该队列项，将返回undefined
     */
    remove: function(item){
        var index = this.items.indexOf(item);
        if(index < 0){return item;}
        return this.removeAt(index);
    },
    /**
     * 按index移除队列项
     * @param {int} index 待移除的队列项索引
     * @return {Ext.ux.queue.QueueItem} 被移除的队列项；若未在当前队列中找到该队列项，将返回undefined
     */
    removeAt: function(index){
        var item = this.items[index];
        this.items.splice(index, 1);
        return item;
    },
    //private
    //根据index生成有效的index值
    createIndex: function(index){
        var len = this.items.length;
        //不能直接使用 index = index || len; //此种方式导致index为0时，将会使用len的值
        if(Ext.isEmpty(index)){
            index = len;
        }
        index = Math.min(index, len);
        return index;
    },
    /**
     * 不限制顺序地执行队列
     */
    execute: function(){
        if(false === this.fireEvent("beforequeue", this)){
            return;
        }
        var items = this.items;

        this.disorderState = true; //初始执行状态，当无序队列中有一个队列项执行结果为false，则队列执行结果为false
        this.executeType = Ext.ux.queue.EXECUTETYPE.DISORDER; //设置执行类型
        this.disorderCount = items.length; //初始化【无序队列】计数器
        if(items.length < 1){
            this.fireEvent("afterqueue", this, true);
        }
        var thiz = this;
        Q.each(this.items, function(item){
            thiz.executeItem(item); //执行队列
        });
    },
    /**
     * 按顺序执行队列
     */
    orderExecute: function(){
        if(false === this.fireEvent("beforequeue", this)){
            return;
        }
        var items = this.items;
        this.executeType = Ext.ux.queue.EXECUTETYPE.ORDER; //设置执行类型
        this.orderCount = 0; //初始化【有序队列】计数器
        if(items.length < 1){
            this.fireEvent("afterqueue", this, true);
        }
        this.executeItem(items[0]); //开始执行队列
    },
    //private
    //执行队列项
    executeItem: function(item){
        var thiz = this;
        //队列项执行完毕事件监听
        item.on("afterexecute", function(item, flag){
            thiz.fireEvent("execute", this, false !== flag);
        }, item, {single:true});
        item.execute();
    },
    //private
    //顺序执行队列项
    orderExecuteItem: function(success){
        this.orderCount++;
        var item = this.getAt(this.orderCount);
        if(item){
            if(false === success){ //执行失败时触发队列完成事件
                this.fireEvent("afterqueue", this, false);
            }else{ //执行成功则继续往下执行
                this.executeItem(item); //开始执行队列
            }
        }else{
            //最后的队列项
            //执行成功或失败都触发队列完成事件
            this.fireEvent("afterqueue", this, false !== success);
        }
    },
    //private
    //无序执行队列项
    disorderExecuteItem: function(success){
        this.disorderCount--;

        //当无序队列中有一个队列项执行结果为false，则队列执行结果为false
        if(false === success){
            this.disorderState = false;
        }

        //为0时，执行完毕
        if(this.disorderCount == 0){
            this.fireEvent("afterqueue", this, this.disorderState);
        }
    }
});
//private
Ext.apply(Ext.ux.queue, {
    /**
     * @class Ext.ux.queue.QTYPE
     * 队列项类型
     */
    QTYPE : {
        /**
         * 队列项函数类型
         * 直接使用返回值来判断执行结束，触发执行完成事件，并获得执行结果
         * @type Ext.ux.queue.QTYPE
         * @property FUNCTION
         */
        FUNCTION: "Fn",
        /**
         * 队列项Ajax类型
         * @type Ext.ux.queue.QTYPE
         * @property AJAX
         */
        //普通ajax请求，如: Ext.Ajax.request，只需要传用于request的参数(url、params、callback等)即可
        //通过添加回调函数来感知执行结束、触发执行完成事件，以及获取执行结果
        AJAX: "Ajax",
        /**
         * 队列项Store类型
         * @type Ext.ux.queue.QTYPE
         * @property STORE
         */
        //数据源请求, 如：store.load, store.reload，需要分开传入store对象，以及参数(参数应当允许为空)
        //通过添加回调函数来感知执行结束、触发执行完成事件，以及获取执行结果
        STORE: "Store"
    },
    //执行类型
    EXECUTETYPE: {
        DISORDER: "disorder", //无序执行
        ORDER: "order" //有序
    }
});

/**
 * @class Ext.ux.queue.QueueItem
 * @extends Ext.util.Observable
 *
 * 队列项，支持Ajax,Store,普通Function
 *
 <pre><code>
var qi = new Ext.ux.queue.QueueItem({
    qtype: Ext.ux.queue.QTYPE.FUNCTION,
    fn: function(json){
        log.push("执行【qi - fn】！-----"+json.ccc);
        return true;
    },
    params: {ccc: "item参数！！！"},
    listeners: {
        "beforeexecute": function(){
            log.push("listeners----执行【qi -> beforeexecute】！");
        },
        "afterexecute": function(){
            log.push("listeners----执行【qi -> afterexecute】！");
        }
    }
});
qi.execute(); //单独执行队列项

//将队列项放入队列中执行
var queue = new Ext.ux.queue.Queue();
queue.add(qi);
queue.execute();
 </code></pre>

 * @author    tipx
 * @homepage  http://tipx.iteye.com
 * @version   1
 * @revision  $Id: Ext.ux.queue.js 5 2011-04-14 11:06:25 tipx $
 * @depends Q
 *
 * @license Ext.ux.queue.QueueItem is licensed under the terms of
 * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
 * that the code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 *
 * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
 * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
 */
Ext.ux.queue.QueueItem = Ext.extend(Ext.util.Observable, {
    constructor: function(cfg){
        cfg = Ext.apply({
            /**
             * @cfg {function} fn 普通函数队列项中的执行函数<br/>函数执行结果为false，则事件afterexecute的success参数为false
             */
            //fn: undefined,
            //ajax: undefined,
            /**
             * @cfg {Ext.data.Store} store store函数队列项时，必传属性<br/>该回调函数执行结果为false，则事件afterexecute的success参数为false
             */
            //store: undefined,
            /**
             * @cfg {object} scope 执行函数、回调函数中使用的this代表的作用域，缺省为当前队列项QueueItem
             */
            scope: this, //作用域，缺省为当前队列项
            /**
             * @cfg {Ext.ux.queue.QTYPE} qtype 队列项类型
             * <br/>(缺省值)普通函数队列项：Ext.ux.queue.QTYPE.FUNCTION
             * <br/>Ajax队列项：Ext.ux.queue.QTYPE.AJAX
             * <br/>Store队列项：Ext.ux.queue.QTYPE.STORE
             */
            qtype: Ext.ux.queue.QTYPE.FUNCTION, //类型缺省为普通函数
            /**
             * @cfg {object} params 执行参数<br/>
             * 普通函数队列项时：该参数为执行函数的参数，参数只能使用一个json格式的参数；<br/>
             * Ajax队列项时：该参数为执行Ajax请求的参数；<br/>
             * Store队列项时：该参数为Store.load方法的参数；<br/>
             * 【注】：异步请求时，回调函数执行结果为false，则事件afterexecute的success参数为false
             */
            params:{} //执行参数，缺省为空
        }, cfg);
        Ext.apply(this, cfg);
        this.initEvents();
        Ext.ux.queue.QueueItem.superclass.constructor.call(this, cfg);
    },
    //添加事件
    initEvents: function(){
        this.addEvents(
            /**
             * @event beforeexecute 队列项执行前触发<br/>若事件返回false，则中止执行队列项
             * @param {Ext.ux.queue.QueueItem} this 当前队列项
             */
            "beforeexecute",
            /**
             * @event afterexecute 队列项执行后触发
             * @param {Ext.ux.queue.QueueItem} this 当前队列项
             * @param {boolean} success 当前队列项执行结果，true为成功，false为失败
             */
            "afterexecute"
        );
    },
    //private
    //执行函数
    execFn: function(){
        var flag = (false !== this.fn.call(this.scope, this.params));
        this.fireEvent("afterexecute", this, flag);
    },
    //private
    //执行Ajax
    execAjax: function(){
        var thiz = this, scope = this.scope;
        var params = Ext.ux.util.clone(this.params),
            callbackFn = params.callback,
            successFn = params.success,
            failureFn = params.failure;

        //callback不需要删除，因为会被生成的callback覆盖
        delete params.success; //从参数中删除，避免重复执行
        delete params.failure; //从参数中删除，避免重复执行

        //将params中的回调函数统一归整到callback中
        var callback = function(options, success, response){
            var flag = success; //初始设置为success

            //若回调函数存在，则执行它，并取出结果
            if(callbackFn){
                flag = callbackFn.call(scope, options, success, response);
            }
            //如果有successFn/failureFn，则将忽略callbackFn的执行结果
            if(success){
                if(successFn){
                    flag = successFn.call(scope, response, options);
                }
            }else{
                if(failureFn){
                    flag = failureFn.call(scope, response, options);
                }
            }
            //触发执行完成事件
            thiz.fireEvent("afterexecute", this, flag);
        }

        params.callback = callback;
        Ext.Ajax.request(params);
    },
    //private
    //执行Store
    execStore: function(){
        var thiz = this, scope = this.scope;
        var store = this.store, params = this.params, callbackFn = params.callback;

        //将params中的回调函数统一归整到callback中
        var callback = function(rs, options, success){
            var flag = success; //初始设置为success

            //若回调函数存在，则执行它，并取出结果
            if(callbackFn){
                flag = callbackFn.call(scope, rs, options, success);
            }
            //触发执行完成事件
            thiz.fireEvent("afterexecute", this, flag);
        }

        params.callback = callback;
        store.load(params);
    },
    /**
     * 队列项执行
     */
    execute: function(){
        if(false === this.fireEvent("beforeexecute", this)){
            return;
        }
        //根据类型，取出相应的方法执行
        this["exec"+this.qtype]();
    }
});



【注意】：
1.本代码虽然是一个独立的js，但引用了两个插件：Q和Ext.ux.util，直接将Q.each替换成Ext.each或自己的each方法即可以；Ext.ux.util是国外ext大牛站上下载的，见附件。
2.代码上注释巨多是在ext-doc生成API时使用的，我就不一一删除了，有些注释的内容就是例子
  • 大小: 38.9 KB
  • 大小: 36.3 KB
1
顶
1
踩
分享到：
| 删除JAVA文件中的注释
评论
1 楼 tipx 2011-04-14  
iteye的域名真不习惯。。。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AJAX请求队列实现

    请求执行由ExeRequestArray函数负责，它会检查队列的长度，如果大于0，即存在请求，则调用DoRequest函数发起AJAX请求。 在DoRequest函数中，会根据浏览器的不同，使用XMLHttpRequest或ActiveXObject创建AJAX实例，...

    解决Ajax 发送多个请求引发的并发问题

    5. 使用Debounce或Throttle：Debounce（防抖）或Throttle（节流）可以限制函数的执行频率，防止短时间内发送过多请求。 6. 调整浏览器设置：对于开发测试环境，可以尝试调整浏览器的并发请求限制，但这不是通用解决...

    ajaxQueue:基于jquery的Ajax请求队列

    // 优先级为0是普通请求，1为高级请求。 高级请求会优先发送 // 向队列中添加请求对象即可发送请求 handler.pushRequest({ url: "" , // 发送的地址 type : "", // 提交类型 complete : function(data){} //请求...

    多个ajax同时进行

    新的请求会被添加到队列尾部，只有当前正在执行的请求完成后，才会处理下一个请求。 3. **超时和重试机制**：为了处理可能的网络问题，开发者通常会为Ajax请求设置超时，并在超时时决定是否自动重试。这需要考虑重...

    多ajax请求的各类解决方案(同步, 队列, cancel请求)

    在现代Web开发中，AJAX...同步请求适用于有依赖关系的场景，队列管理用于按顺序执行请求，而取消请求则在需要忽略之前请求结果时非常有用。掌握这些技巧，能够帮助开发者构建更高效、响应更快的Web应用程序。

    ajaxpool,ajax管理，ajax池

    3. **请求处理函数**：负责创建和发送Ajax请求，以及处理响应。 4. **调度策略**：决定何时从队列中取出请求进行发送，这可以是简单的先进先出（FIFO），也可以是基于优先级或其他策略。 5. **错误处理**：对请求...

    Android网络开发，请求队列

    在Android应用开发中，网络请求是常见的操作，用于获取服务器数据、更新用户界面或执行其他与互联网相关的任务。为了优化应用程序的性能和用户体验，开发者通常会采用请求队列来管理这些网络请求。本文将深入探讨...

    asyncfnqueue一个异步函数队列化执行库

    `asyncfnqueue`是一个专门针对这种情况设计的库，它允许我们将异步函数按照一定的顺序进行队列化执行，从而更好地控制程序流程。这个库被称为`async-fn-queue`，在JavaScript开发的其他杂项中具有广泛的应用价值。 ...

    ajaxProxy:ajaxProxy 是一个ajax请求发送代理，支持链序请求和阻塞请求

    ajaxProxy提供了blockReq函数实现对已丢弃请求的阻塞，且支持多条队列，只有同一队列中的请求才会互相阻塞，所以我们可以在页面的不同区域使用不同的队列，不同区域的请求互不干扰，统一区域的请求互相阻塞。...

    extjs对ajax的支持文档

    - Ext.Ajax也支持批量请求管理和队列控制，允许开发者组织和顺序执行多个Ajax请求。 8. **预处理和后处理**： - `beforeSend`: 在发送请求前执行的函数，可以取消请求。 - `loadFn`和`unloadFn`: 对于资源加载和...

    ajaxQueue:ajax请求队列

    多个ajax请求同时发送，相互无依赖。 多个ajax请求相互依赖，必须有先后顺序。 多个请求被同时发送，只需要最后一个请求。 1.情况1-多个ajax请求同时发送，相互无依赖 ajaxQueue1文件夹 ajaxQueue-requireJS //为...

    js每隔5分钟执行一次ajax请求的实现方法

    本问题中提到的是如何实现一个页面每隔5分钟执行一次AJAX请求，这可以通过`setTimeout`函数来实现。下面我们将详细讨论相关的知识点。 首先，`setTimeout`函数是JavaScript中的一个内置方法，它用于在指定的毫秒数...

    详解JavaScript for循环中发送AJAX请求问题

    在这种情况下，除最后一个请求外，其他请求可能被取消或者因为队列过满而无法正确执行。为了解决这个问题，我们可以考虑以下两种策略： 1. **同步的AJAX请求**： 同步请求意味着浏览器会等待当前请求完成后再执行...

    jQuery AJAX 扩展 ----自动放弃及 队列实现

    队列在jQuery中用于组织和控制执行顺序，尤其适用于处理多个Ajax请求时。通常，`$.ajax()`请求默认是并行执行的，但通过`async: false`可以设置为同步，但这会导致浏览器阻塞。更好的方法是使用`$.when()`和`$....

    手把手教你写电商爬虫-第三课 实战尚妆网AJAX请求处理和内容提取

    在本节课中，我们会学习如何处理电商网站尚妆网的AJAX请求，以及如何提取动态加载的内容。这是一个非常实用的教程，因为AJAX技术广泛应用于现代网页中，而动态内容加载也是电商网站常见的技术之一。 首先，我们需要...

    Ajax中get与post请求详解

    Ajax 中 get 与 post 请求的详细解释 Ajax 技术中 get 与 post 两种请求方式是许多开发者经常遇到的疑问，以下将详细解释两者的区别，并提供实例代码。 一、get 与 post 的基本区别 1. 参数传递方式：get 请求将...

    Ajax异步(请求)提交类 支持跨域

    - 如果当前有正在处理的请求，则将新的请求加入到队列中等待处理。 - 否则，设置`isWorking`为`true`表示当前正在处理请求，并根据`IsOuterURL()`的结果决定是否使用代理服务器发送请求。 - 设置回调函数处理请求...

    PHP中利用redis实现消息队列处理高并发请求思路详解.rar

    后台工作者会从队列中取出任务并执行，从而实现了请求的非阻塞处理。这样，前端可以快速响应用户，而不会因为等待耗时操作而阻塞。 Redis作为一款高性能的键值数据库，常被用于构建消息队列，因为它提供了丰富的...

Magicbox
Global site tag (gtag.js) - Google Analytics