Javascript 如何管理多个重叠的XMLHttpRequest？

我正在进行我的第一个AJAX项目，我从设置以下功能开始：

function sendHTTPRequest(callback,filename,data) {

    if (window.XMLHttpRequest) {
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

    httpRequest.onreadystatechange = callback;
    httpRequest.open('POST',rootAddress+filename, true);
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    httpRequest.send(data);

}

function exampleCallback() {

    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
            // successful, parse the XML data
        } else {
            // error
        }
    } else {
        // not ready
    }
}

这很有效，但我现在已经到了一个地步，我有多个同时的HTTP请求，而我的单个全局

httpRequest

变量并没有减少它。在我看来，我可以使用数组，并在每次调用

sendHTTPRequest（）

时将新的XMLHttpRequest推送到堆栈上，但是我如何告诉我的各种回调函数要解析堆栈中的哪个项呢？或者，这是处理这一过程的更好方法？（我用它们来处理对不同页面的请求，结果需要进行不同的解析。）

谢谢

不要使用全局搜索。使用局部变量

不要使用全局搜索。事件处理程序是在它们所触发的对象的上下文中调用的。使用

此

不要使用全局搜索。使用局部变量

---

不要使用全局搜索。事件处理程序是在它们所触发的对象的上下文中调用的。使用

this

使用一个局部变量和一个每个请求的回调函数，后者依次调用给定的回调函数。所需的变化非常小；请参见

***/code>行：

function sendHTTPRequest(callback,filename,data) {
    var httpRequest; // ** Local variable

    if (window.XMLHttpRequest) {
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // ** Callback specific to *this* request
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                // successful, call the callback
                callback(httpRequest);
            } else {
                // error, call the callback -- here we use null to indicate the error
                callback(null);
            }
        } else {
            // not ready
        }
    };
    httpRequest.open('POST',rootAddress+filename, true);
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    httpRequest.send(data);
}

function exampleCallback(xhr) {

    if (xhr) {
        // successful, parse the XML data, for instance
        var x = xhr.responseXML;
    } else {
        // not ready
    }
}

您可以让它为回调提供更多信息（例如，
filename
和
data
参数）

如果使用承诺，则可以让
sendHTTPRequest
返回承诺，而不是接受直接回调。
使用局部变量和每请求回调，后者反过来调用给定回调。所需的变化非常小；请参见
**
行：

function sendHTTPRequest(callback,filename,data) {
    var httpRequest; // ** Local variable

    if (window.XMLHttpRequest) {
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // ** Callback specific to *this* request
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                // successful, call the callback
                callback(httpRequest);
            } else {
                // error, call the callback -- here we use null to indicate the error
                callback(null);
            }
        } else {
            // not ready
        }
    };
    httpRequest.open('POST',rootAddress+filename, true);
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    httpRequest.send(data);
}

function exampleCallback(xhr) {

    if (xhr) {
        // successful, parse the XML data, for instance
        var x = xhr.responseXML;
    } else {
        // not ready
    }
}

您可以让它为回调提供更多信息（例如，
filename
和
data
参数）

如果你使用承诺，你可以让
sendHTTPRequest
返回一个承诺，而不是接受直接回调。
我知道我们应该避免发表“谢谢”的帖子，但这确实非常有用，而且信息量也非常大。感谢您的清晰解释和改进！我知道我们应该避免发“谢谢”的帖子，但这真的是非常有用和有用的。感谢您的清晰解释和改进！
function sendHTTPRequest(callback,filename,data) {
    var httpRequest; // ** Local variable

    if (window.XMLHttpRequest) {
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // ** Callback specific to *this* request
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                // successful, call the callback
                callback(httpRequest);
            } else {
                // error, call the callback -- here we use null to indicate the error
                callback(null);
            }
        } else {
            // not ready
        }
    };
    httpRequest.open('POST',rootAddress+filename, true);
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    httpRequest.send(data);
}

function exampleCallback(xhr) {

    if (xhr) {
        // successful, parse the XML data, for instance
        var x = xhr.responseXML;
    } else {
        // not ready
    }
}