为什么获胜'这个ajax调用在这个简单的javascript对象文本ajax框架中工作

Why won't this ajax call work in this simple object literal ajax frame work for javascript

本文关键字：ajax javascript 简单 对象 文本 工作 框架 获胜 这个 调用 为什么      更新时间：2023-09-26
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; 
}

大多数函数都引用作用域较差的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实现吗？

一些问题：

  1. 实际上，您不应该依赖全局变量（"xml"）将所有内容联系在一起。当您想要两个重叠的请求时会发生什么
  2. 您从未设置过"readyStateChange"处理程序
相关文章：