• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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();   //要求执行队列中的请求
      }
    }
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • Ajax的使用代码解析
    • PHP AjaxForm提交图片上传并显示图片源码
    • JS 拦截全局ajax请求实例解析
    • Ajax遍历jSon后对每一条数据进行相应的修改和删除(代码分享)
    • AJAX工作原理及优缺点详解
    • AngularJS实现ajax请求的方法
    • 使用Ajax生成的Excel文件并下载的实例
    • Ajax的概述与实现过程
    • Ajax读取txt并对txt内容进行分页显示功能
    • 在Thinkphp中使用ajax实现无刷新分页的方法
    • jstree创建无限分级树的方法【基于ajax动态创建子节点】
    • JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
    • jQuery插件ajaxFileUpload异步上传文件
    • 浅析Ajax语法
    上一篇:Ajax读取txt并对txt内容进行分页显示功能
    下一篇:pushState实现Ajax无刷新页面切换
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    AJAX请求队列实现 AJAX,请求,队列,实现,AJAX,