javascript - 为什么这个 ajax 调用不能在这个简单的 JavaScript 对象文字 ajax 框架中工作

Question

var ajax = {
xmlHTTP: function() {
    xml = new XMLHttpRequest();
    return xml;
},
xmlHTTPfunction: function() {
    if (xml.readyState == 4 && xml.status == 200)  {
        document.getElementById("te").innerHTML = xml.responseText; 
         alert(xml.status);
         alert(xml.responseText);
     }

},
xmlHTTPopen: function(url) {
    xml.open("POST", url, true);
},
xmlHTTPheader: function() {
    ajax.xmlHTTP().setRequestHeader("Content-type","application/x-www-form-urlencoded");
},
xmlHTTPsend: function(string) {
    xml.send(string);
},
ajaxCall: function() {
    ajax.xmlHTTP();
    ajax.xmlHTTPopen('testx.php');
    ajax.xmlHTTPsend('test');
    return 1;
}
}
   if(ajax.ajaxCall() == 1) {
document.getElementById("te").innerHTML = xml.responseText; 

}

Answer 1

大多数函数都引用作用域很差的xml变量。也就是说，当您调用 ajax.xmlHTTPopen 时，没有任何信息表明 xml 变量在该函数内具有任何值。

提供更好范围的最简单方法是将 xml 变量定义为 ajax 对象的属性；这是一个对代码进行最小更改的示例:

var ajax = {
    xmlHTTP: function() {
        this.xml = new XMLHttpRequest();
        this.xml.onreadystatechange = this.xmlHTTPfunction();
    },
    xmlHTTPfunction: function() {
        if (this.xml.readyState == 4 && this.xml.status == 200)  {
            document.getElementById("te").innerHTML = this.xml.responseText; 
             alert(this.xml.status);
             alert(this.xml.responseText);
         }
    },
    xmlHTTPopen: function(url) {
        this.xml.open("POST", url, true);
    },
    xmlHTTPheader: function() {
        this.xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    },
    xmlHTTPsend: function(string) {
        this.xml.send(string);
    },
    ajaxCall: function() {
        ajax.xmlHTTP();
        ajax.xmlHTTPopen('testx.php');
        ajax.xmlHTTPsend('test');
        return 1;
    }
}

请注意，正如您所写，ajax.ajaxCall 是非阻塞的，因此它始终会立即返回 1，甚至在响应到达(或必须发送)之前 --为此，您必须为 XMLHtpRequest 对象的 onreadystatechange 事件分配一个回调函数，以便在响应最终返回时对其进行处理。

如果将 xml.open 的第三个参数更改为 false，则 xml.send 调用将阻塞，直到响应到达，其中如果您不需要分配回调。替代实现可能如下所示:

var ajax = {
    xmlHTTP: function() {
        this.xml = new XMLHttpRequest();
    },
    xmlHTTPopen: function(url) {
        this.xml.open("POST", url, false);
    },
    xmlHTTPheader: function() {
        this.xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    },
    xmlHTTPsend: function(string) {
        this.xml.send(string);
    },
    ajaxCall: function() {
        ajax.xmlHTTP();
        ajax.xmlHTTPopen('testx.php');
        ajax.xmlHTTPsend('test');
        return 1;
    }
}
if(ajax.ajaxCall() == 1) {
    document.getElementById("te").innerHTML = ajax.xml.responseText; 
}

但是根据我的经验，这在现实世界中几乎从未使用过。

另外:您的代码永远不会调用 xmlHTTPheader 函数，尽管这没有什么坏处。

鉴于您当前的代码，我想不出更好的建议；您看过 jQuery 及其 ajax 实现吗？