AJAX 学习笔记[五] AJAX 如何处理多个异步请求

来源：互联网发布：淘宝原单店铺推荐编辑：程序博客网时间：2024/06/06 03:14

前面的示例中，都是通过1个全局变量的xmlHttp 异步对象对所有异步请求进行处理的。这样做通常会存在一些问题。比如：当第1个异步请求尚未完成，很可能就已经被第2个异步请求所覆盖。

解决办法：通常是将xmlHttp 对象作为局部变量来处理，并且在收到服务器端的返回值后手动将其删除。

客户端（9-6.html）

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>多个异步对象</title>
<script language="javascript">   
function createQueryString(oText){
    var sInput = document.getElementById(oText).value;
    var queryString = "oText=" + sInput;
    return queryString;
}
function getData(oServer, oText, oSpan){
    var xmlHttp;  //处理为局部变量
    if(window.ActiveXObject)
        xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
    else if(window.XMLHttpRequest)
        xmlHttp = new XMLHttpRequest();
    var queryString = oServer + "?";
    queryString += createQueryString(oText) + "&timestamp=" + new Date().getTime();
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
            var responseSpan = document.getElementById(oSpan);
            responseSpan.innerHTML = xmlHttp.responseText;
            delete xmlHttp; //收到返回结果后手动删除
            xmlHttp = null;
        }
    }
    xmlHttp.open("GET",queryString);
    xmlHttp.send(null);
}
function test(){
    //同时发送两个不同的异步请求
    getData('9-5.aspx','first','firstSpan');
    getData('9-5.aspx','second','secondSpan');
}
</script>
</head>

<body>
<form>
    first: <input type="text" id="first">
    <span id="firstSpan"></span>
<br>
    second: <input type="text" id="second">
    <span id="secondSpan"></span>
<br>
    <input type="button" value="发送" onclick="test()">
</form>
</body>
</html>

由于函数中的局部变量是每次调用时单独建立的，函数执行完便自动销毁。所以，这时测试多个异步请求便不会发生冲突和数据覆盖的情况了。

服务器端（9-5.aspx）

代码如下：

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    Response.Write(Request["oText"]);
%>

完毕。