Question

我正在开发我的第一个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变量并没有削减它。在我看来，我可以使用一个数组，每次调用.push时sendHTTPRequest()一个新的XMLHttpRequest到堆栈中，但是如何告诉我的各种回调函数堆栈中的哪个项目要解析？或者是处理这个过程的更好方法？（我使用这些来处理对不同页面的请求，结果需要以不同的方式解析。）

谢谢！

Answer 1

httpRequest = new XMLHttpRequest();

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

if (httpRequest.readyState === XMLHttpRequest.DONE) {

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

Answer 2

使用局部变量和每请求回调，然后调用给定的回调。所需的变化非常小;见**行：

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返回承诺，而不是接受直接回拨。

如何管理多个重叠的XMLHttpRequests？

2 个答案: