多个ajax http request同时执行

当我们用ajax异步的发起一个http请求时,  后台在等待服务器的返回. 这时候用户可能又触发了ajax又进行一次异步调用.  如果之前的http请求仍没有完成,那么后面的请求会将前面的终止. 仔细分析下代码，才发现此原因，当初的代码是从别人处拷贝， 是因为 xmlhttp 变量是全局变量，导致前一个xmlhttp未执行完毕后，第二次运行时覆盖了之前的变量，导致没有正确回调。

例如以下代码,如果使用xmlhttp ajax代码, 不注意就会可能会导致不正常情况.

<script type="text/javascript">

function xmlhttpGet(url ,toObject, mode)
{

if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();  // 一定前面要加上 var xmlhttp 哦。 我之前这真是个愚蠢的错误。
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(toObject).innerHTML=xmlhttp.responseText;

}
}
xmlhttp.open("GET",url ,true);
xmlhttp.send();
}

function xmlhttpGet2(url ,toObject, mode)
{

if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp2=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp2.onreadystatechange=function()
{
if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
{
document.getElementById(toObject).innerHTML=xmlhttp2.responseText;

}
}
xmlhttp2.open("GET",url ,true);
xmlhttp2.send();
}
function clickorder()
{
xmlhttpGet('modules/DepotRecord_Nav.php','navication',1);
xmlhttpGet2('modules/DepotRecord_List.php','detail',1); 本来这里可以使用同一个函数, 但如果使用同一个xmlhttpGet 函数, 则后面的第二次调用,会异常中止掉第一次调用. ( 主要原因是第一个http请求未返回, 第二次调用同样的函数会中止第一次的http请求) 这当然不是我们想要的结果, 为了避免,只能复制多份xmlhttpGet函数. 当然最好的办法还是使用jquery,prototype等js框架.

}
</script>

此篇文章已被阅读2498 次