AJAX请求是否覆盖另一个?

时间:2014-10-16 12:00:39

标签: javascript jquery ajax

我有一个动态AJAX函数,它有许多不同的模式(我用不同的参数调用函数并通过switch-case检查哪种模式必须使用)但是当我用一个接一个地使用不同的参数直接调用AJAX函数时同样的XMLHttpRequest似乎第二个请求会覆盖第一个请求。

这可能吗?

以下是我的功能(编辑)的示例:

$(function() {
    ajax("test_1");
    ajax("test_2");
});

function ajax(mode)
    {
        switch (mode)
        {
            case "test_1":
                request = null;
                if (window.XMLHttpRequest) {
                    request = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    try {
                        request = new ActiveXObject('Msxml2.XMLHTTP');
                    } catch (e) {
                        try {
                            request = new ActiveXObject('Microsoft.XMLHTTP');
                        } catch (e) {
                        }
                    }
                }
                if (!request) {
                    console.log("Kann keine XMLHTTP-Instanz erzeugen");
                    return false;
                } else {
                    var url = "../ajax.php";
                    request.open('POST', url, true);
                    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                    request.send('ajax_mode=test&request_mode=test_1');
                    request.onreadystatechange = function() {
                        if (request.readyState === 4)
                        {
                            interpretRequest_test_1();
                        }
                    };
                }
                break;
            case "test_2":
                request = null;
                if (window.XMLHttpRequest) {
                    request = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    try {
                        request = new ActiveXObject('Msxml2.XMLHTTP');
                    } catch (e) {
                        try {
                            request = new ActiveXObject('Microsoft.XMLHTTP');
                        } catch (e) {
                        }
                    }
                }
                if (!request) {
                    console.log("Kann keine XMLHTTP-Instanz erzeugen");
                    return false;
                } else {
                    var url = "../ajax.php";
                    request.open('POST', url, true);
                    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                    request.send('ajax_mode=test&request_mode=test_2');
                    request.onreadystatechange = function() {
                        if (request.readyState === 4)
                        {
                            interpretRequest_test_2();
                        }
                    };
                }
                break;
        }
    }

    function interpretRequest_test_1() {
        if (request.status != 200) {
            console.log("Error");
        } else {
            alert("1");
        }
    }
    function interpretRequest_test_2() {
        if (request.status != 200) {
            console.log("Error");
        } else {
            alert("2");
        }
    }

1 个答案:

答案 0 :(得分:3)

您的request变量未使用var关键字定义,这使其成为全局变量,因此您正在重复使用相同的XHR对象。

如果您正在重复使用相同的XMLHttpRequest对象,那么如果您尝试向其发出另一个请求,它将中止先前的请求,而另一个请求正在进行中。

在您的switch语句中,使用request关键字定义var。这使得变量作用于本地范围,而不是全局。

switch (mode) {
   case "test_1":
       var request = null;
       ...
   case "test_2":
       var request = null;
       ...
}

或者只在函数顶部执行一次,而不是在每个case语句中执行一次。

如果您有全局对象,则是一个更简化的示例:

var xhr = new XMLHttpRequest();

function do_smth(){
    xhr.open(...);
}

function do_smth2(){
    xhr.open(...);
}

do_smth();
do_smth2();

您需要使XHR对象的范围正确,而不是全局,因此每次调用都具有唯一的XHR。

function do_smth(){
    var xhr = new XMLHttpRequest();
    xhr.open(...);
}

function do_smth2(){
    var xhr = new XMLHttpRequest();
    xhr.open(...);
}