Question

我希望我的页面执行相同的功能3次，每次调用3个不同的东西。

目前代码

 <script>
 ajaxGet('/goget.php?name='+edit.dep.value, 'dep_result');
 ajaxGet('/goget.php?name='+edit.arr.value, 'arr_result');
 ajaxGet('/goget.php?type='+edit.reg.value, 'reg_result');
 </script>

但它只执行最后一次通话。为什么呢？

使用Javascript：

var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {

XMLHttpRequestObject = new XMLHttpRequest();

} else if (window.ActiveXObject) {

XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function ajaxGet(ajaxLoadData, changeToID) {

if(XMLHttpRequestObject) {

    var obj = document.getElementById(changeToID);
    XMLHttpRequestObject.open("GET", ajaxLoadData);
    XMLHttpRequestObject.onreadystatechange = function() {

    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status ==     200) {

        obj.innerHTML = XMLHttpRequestObject.responseText;

    }
}

    XMLHttpRequestObject.send(null);

}
}

Answer 1

您希望每次致电ajaxGet创建自己的XMLHttpRequest。

XMLHttpRequest一次只能处理1个请求。并且，由于它们将异步地发出请求，因此它们将并行处理而不是按顺序处理。

function ajaxGet(ajaxLoadData, changeToID) {
    var obj = document.getElementById(changeToID);
    var xhr = new XMLHttpRequest();

    xhr.open("GET", ajaxLoadData);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            obj.innerHTML = xhr.responseText;
        }
    };
    xhr.send(null);
}

当然，浏览器通常会将请求限制为一次只有少数（通常是2），排队任何额外的。但是你的代码不应该依赖它。

附注：除非您需要支持IE6或更早版本，否则您无需回退到ActiveXObject。

Answer 2

您需要更改ajaxGet()方法，以便在每次调用时实例化一个新的XMLHttpRequest对象。因为，你使用相同的XMLHttpRequest每个新请求都会覆盖前一个请求。

因此，您只能获得最后一次方法调用返回的结果。

function getXHRObj() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function ajaxGet(ajaxLoadData, changeToID) {
    var XMLHttpRequestObject = getXHRObj();
    var obj = document.getElementById(changeToID);
    XMLHttpRequestObject.open("GET", ajaxLoadData);
    XMLHttpRequestObject.onreadystatechange = function() {
        if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
            obj.innerHTML = XMLHttpRequestObject.responseText;
        }
    }
    XMLHttpRequestObject.send(null);
}

Javascript只执行最后一个调用的函数

2 个答案: