公司的产品导入了AJAX,但是后来发现一个严重的问题,就是在IE下,首页切换到其它页面比较困难,特别是首页还有一个下拉列表,选择不同的值会将首页的那些AJAX区域重新加载,如果其中几个比较慢(服务器端返回比较慢,因为有些存在性能问题,数据量大了以后查询特别慢),那么切换的时候要等很长时间,所以表面上看上去就是IE死掉了,但是在FireFox下没有这个问题。后来查证是IE下有两个并发连接请求的限制,每个AJAX请求也都算一个请求。后来的解决办法就是将AJAX请求排队,一个执行完了才能执行另外一个,这样无论怎么切换都是马上响应的,这个修改只对IE有效,FF下就不进行限制。
  var divRequestMap = new Object();
  var requestDivIdList = new Array();
  var currentRequest=0;
  var requestQueue = new Array();
  var useRequestQueueFlag= /msie/ig.test(navigator.userAgent);
 
  function createrequest()
  {
     try
     { 
       if(typeof ActiveXObject!="undefined")
       {
        try
         {
           return new ActiveXObject("Microsoft.XMLHTTP");
         }catch(a)
         {}
       }
       if(typeof XMLHttpRequest!="undefined")
       {
         return new XMLHttpRequest()
       }
       return null;
     }catch(e){}
  }

    function abortRequest(request)
    {
        function doNothing() {
        }
        request.onreadystatechange = doNothing;
        request.abort();
        delete request;
        currentRequest–;
    }
   
    function addRequest(url,divId)
    {
        var item=new Array();
        item[0]=url;
        item[1]=divId;
        requestQueue.push(item);
    }
   
    function abortAllRequest()
    {
        if (useRequestQueueFlag)
        {
            while (requestQueue.length)
            {
                requestQueue.shift();
            }
            while (requestDivIdList.length)
            {
                abortRequest(divRequestMap[requestDivIdList.shift()]);
            }
            currentRequest=0;
        }
    }
   
    function removeRequestDivId(divId)
    {
        for (i=0;i<requestDivIdList.length;i++)
        {
            var item=requestDivIdList.shift();
            if (item==divId)
            {
                return;
            }
            else
            {
                requestDivIdList.push(item);
            }
        }
    }
   
    function executeRequestArray()
    {
        if (requestQueue.length)
        {
            var item=requestQueue.shift();
            if (!ajax_loaddiv_get(item[0],item[1],true))
            {
                requestQueue.unshift(item);
            }
        }
        setTimeout("executeRequestArray()",200);
    }
   
  abortAllRequest();
  executeRequestArray();
 
  function useRequestQueue(url,divId,queue)
  {
        if (!useRequestQueueFlag)
        {
              return true;
        }
        if (currentRequest>0)
        {
            if (!queue)
            {
                addRequest(url,divId);
            }
            return false;
        }   
      currentRequest++;
      return true;     
  }

  function ajax_loaddiv_get(url,divId,queue)                                                            
  {
      try
      {                                                                                   
        if(divRequestMap[divId] != null)
        {
          abortRequest(divRequestMap[divId]);
        }
        if (!useRequestQueue(url,divId,queue))
        {
               return false;
        }
        var req = createrequest();
        divRequestMap[divId]=req;
        requestDivIdList.push(divId);                                                
        req.open("GET",url,true);                                                      
   
         req.onreadystatechange=function()
         {
             // if many serveral request is sent, and the reponseTest requires to be set into the same div,
             // only the last one’s request’s responseTest will be set.
              if (req.readyState==4)        
              {
                  currentRequest–;
                  removeRequestDivId(divId);
                var status=0;
                try
                {
                  status=req.status;
                } catch(err){}
                 
                if (status == 200)
                {
                    setInnerHTML(document.getElementById(divId),req.responseText);
                }
                else
                {
                  setInnerHTML(document.getElementById(divId),"<font class=ErrorDatastl>Error:"+req.statusText+"(code:"+req.status+")</font>");
                }
                divRequestMap[divId]=null;
              }
         }
         req.send(null)
                                                                                             
      }catch(e){}   
      return  true;                                                                        
  }
 
  }                                                                     

也可以下载完整的实现

(Visited 240 times, 1 visits today)