Question

我有两个类似的功能，但只有最后一个会触发

我看到两个的console.log，但是在head（）上的xmlhttp.open;实际上并没有开火。当我注释掉lineOpen（）;功能，然后它的工作原理。

我做错了什么？

var xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function headset(){
xmlhttp.open("get", "http://localhost:8080/Way2Call/Way2CallService/UseHeadset?bUseHeadset=true", true);
xmlhttp.send();
console.log("Headset Set");
}
function lineOpen(){
xmlhttp.open("get", "http://localhost:8080/Way2Call/Way2CallService/Open", true);
xmlhttp.send();
console.log("Line Opened");
}
headset();
lineOpen();

Answer 1

您在功能之间共享xmlhttp引用。本地化，你应该没事。

function _xhr() {
    return (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
}

function headset(){
    var xmlhttp = _xhr();
    xmlhttp.open("get", "http://localhost:8080/Way2Call/Way2CallService/UseHeadset?    bUseHeadset=true", true);
    xmlhttp.send();
    console.log("Headset Set");
}
function lineOpen(){
    var xmlhttp = _xhr();
    xmlhttp.open("get", "http://localhost:8080/Way2Call/Way2CallService/Open", true);
    xmlhttp.send();
    console.log("Line Opened");
}
headset();
lineOpen();

Answer 2

在第一个函数有机会完成之前，您将为每个函数重复使用相同的XMLHttpRequest。

为每个函数提供自己的XMLHttpRequest对象：

function makeXMLHttpRequest() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {// code for IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function headset(){
    var xmlhttp = makeXMLHttpRequest();
    xmlhttp.open("get", "http://localhost:8080/Way2Call/Way2CallService/UseHeadset?bUseHeadset=true", true);
    xmlhttp.send();
    console.log("Headset Set");
}

function lineOpen() {
    var xmlhttp = makeXMLHttpRequest();
    xmlhttp.open("get", "http://localhost:8080/Way2Call/Way2CallService/Open", true);
    xmlhttp.send();
    console.log("Line Opened");
}

headset();
lineOpen();

或者在第一个请求完成之前不要触发第二个函数。

Answer 3

获取不同的XMLHttp对象：

function getXMLHttpObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else { // code for IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function headset() {
    var xmlHttp = getXMLHttpObject();

    xmlHttp.open("get", "http://localhost:8080/Way2Call/Way2CallService/UseHeadset?bUseHeadset=true", true);
    xmlHttp.send();
}

function lineOpen() {
    var xmlHttp = getXMLHttpObject();

    xmlHttp.open("get", "http://localhost:8080/Way2Call/Way2CallService/Open", true);
    xmlHttp.send();
}

headset();
lineOpen();

Answer 4

通常，您不应该重复使用xmlHttpRequest对象。

[http://ajaxian.com/archives/the-xmlhttprequest-reuse-dilemma](This链接）详细介绍了它。

我建议你创建一个类似于：

的函数

    function doRequest(){
        var xmlhttp;
        if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open(type, url, true);
        xmlhttp.send();
    }

您还可以创建一个只返回请求对象的函数。

    function getRequest(){
        var xmlhttp;
        if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return(xmlhttp);
    }

或者只是使用jQuery！：）

我有两个功能，但最后一个将启动

4 个答案: