公司的产品导入了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;
}
}
也可以下载完整的实现。
发表评论