zoukankan      html  css  js  c++  java
  • AJAX 请求队列实现

    AJAX在使用的过程中会遇到一个问题,当用户短时间内执行了多个异步请求的时候,如果前一个请求没完成,将会被取消执行最新的一个请求,大多数情况下,不会有什么影响,例如请求了一个新的列表,旧的请求也就没什么必要了 ,但是,当我们的WEB程序需要同时异步调用多个请求,或者需要用户请求的是不同类型的数据,都需要执行完成的时候就出现问题 了,于是,将用户的请求记录下来,并按顺序执行。

    不同的浏览器,允许同时执行的线程不同,通常IE允许两个线程,于是,当同时执行的异步请求超过两个时,就会变成只执行最新的两个。

    AJAX队列很简单,创建一个数组存储请求队列,数组中每一项又是一个请求参数数组,当用户执行请求时,不是直接执行AJAX,首先将参数作为一个数组作为项再存入队列,检查队列中是否存在多个请求,如果没有,直接执行当前队列中这唯一的一项,如果有则不执行(因为有其他项,说明队列还在执行中,不必着急,其他项执行完了会轮到这一项的),AJAX执行完成后就删除当前执行的队列项,然后再检查数组还有没有请求,有就继续执行到所有请求都完成为止,以下是我构建的一个队列,AJAX部分是之前封装的。

    //Ajax Function

     

    var reqObj; //Creat Null Instence

     

    var RequestArray = new Array();

    //var whichRequest;

     

    //加入请求队列

    function AddRequestArray(url,isAsy,method,parStr,callBackFun)

    {

     

            var ArgItem = new Array();

     

            ArgItem[0]=url;

            ArgItem[1]=isAsy;

            ArgItem[2]=method;

            ArgItem[3]=parStr;

            ArgItem[4]=callBackFun;

     

            RequestArray.push(ArgItem);     //将当前请求添加到队列末尾

           

           

           

            if(RequestArray.length==1)  //如果请求队列里只有当前请求立即要求执行队列,如果有其他请求,那么就不要求执行队列

            {

                ExeRequestArray();

            }

    }

     

    //执行队列里的顺序第一个的请求

    function ExeRequestArray()

    {

     

        if( RequestArray.length>0)  //如果队列里有请求执行 AJAX请求

        {

            var ArgItem = RequestArray[0];

     

            DoRequest(ArgItem[0],ArgItem[1],ArgItem[2],ArgItem[3],ArgItem[4]);

        }

    }

     

     

    //Run Ajax (string urladdress,bool IsAsy,string method,string parameters,string whichRequest)

    function DoRequest(url,isAsy,method,parStr,callBackFun) 

    {

     

        reqObj = false;

       

        //whichRequest = whichReq;

     

        if (window.XMLHttpRequest) //compatible Mozilla, Safari,...

        {

           

            reqObj = new XMLHttpRequest();              //Creat XMLHttpRequest Instance

           

            if (reqObj.overrideMimeType)                //if Mime Type is false ,then set MimeType 'text/xml'

            {

                reqObj.overrideMimeType('text/xml');

            }

       

        }

       

        else if (window.ActiveXObject) //compatible IE

        {

       

            try

            {

                reqObj = new ActiveXObject("Msxml2.XMLHTTP");  //Creat XMLHttpRequest Instance

            }

            catch (e)

            {

                try

                {

                    reqObj = new ActiveXObject("Microsoft.XMLHTTP");  //Creat XMLHttpRequest Instance

                }

                catch (e)

                {}

            }

       

        }

     

        //if reqObj is false,then alert warnning

        if (!reqObj)

        {

           

            alert('Giving up :( Cannot create an XMLHTTP instance');

            return false;

       

        }

       

       

       

       

        reqObj.onreadystatechange = function(){GetRequest(callBackFun)}; //set onreadystatechange Function

       

        reqObj.open(method, url, isAsy);        //set open Function

       

        reqObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //set RequestHeader

       

        reqObj.send(parStr);   //do send and send parameters

     

    }

     

     

    //get Service Response information Function

    function GetRequest(callBackFun)

    {

     

       

     

        //judge readystate information

        if (reqObj.readyState == 4)

        {

            //judge status information

            if (reqObj.status == 200)

            {

                eval(callBackFun+"(reqObj)");

     

            }

            else

            {

                alert('There was a problem with the request.'+reqObj.status+"CallFunction:"+callBackFun); //else alert warnning

            }

      

            RequestArray.shift();  //移除队列里的顺序第一个的请求,即当前已经执行完成的请求

            ExeRequestArray();      //要求执行队列中的请求

     

        }

     

    }

            

     

  • 相关阅读:
    自定义View的ToolBar布局报错Error:(2) No resource identifier found for attribute 'context' in package 'c
    在学git之主分支 branch
    获取发布版SHA1
    关于开启线程与UI的操作
    播放音频和视频(VideoView控件)
    通知栏Notification的应用
    Android 真机调式 Installation failed with message 远程主机强迫关闭了一个现有的连接。. It is possible that this issue is resolved by uninstalling an existing version of the apk if it is present, and then re-installing. WA
    运行程序申请危险权限
    mysql乐观锁总结和实践
    Nginx配置文件nginx.conf中文详解
  • 原文地址:https://www.cnblogs.com/ZetaChow/p/2237357.html
Copyright © 2011-2022 走看看