[英]Why won't this ajax call work in this simple object literal ajax frame work for javascript
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;
}
Most of the functions refer to the xml
variable which is poorly scoped.大多数函数都引用了范围很差的
xml
变量。 That is to say, when you call ajax.xmlHTTPopen
there's nothing to say that the xml variable has any value inside said function.也就是说,当您调用
ajax.xmlHTTPopen
时,没有什么可以说 xml 变量在所说的 function 中具有任何值。
The simplest way to provide better scoping would be to define the xml variable as a property of the ajax object;提供更好范围界定的最简单方法是将 xml 变量定义为 ajax object 的属性; here is an example with minimal changes to your code:
这是一个对您的代码进行最小更改的示例:
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;
}
}
Note that, as you've written it, the ajax.ajaxCall
is non-blocking, so it will always return 1 immediately, even before the response arrives (or is necessarily sent) -- to that end, you have to assign a callback function to the XMLHtpRequest object's onreadystatechange event, to handle the response when it eventually comes back.请注意,正如您所写,
ajax.ajaxCall
是非阻塞的,因此即使在响应到达(或必须发送)之前,它也总是会立即返回 1 - 为此,您必须分配一个回调function 到 XMLHtpRequest 对象的 onreadystatechange 事件,以处理最终返回时的响应。
If you change the third parameter of xml.open
to false
the xml.send call will block until a response arrives, in which case you don't need to assign a callback.如果将
xml.open
的第三个参数更改为false
,则 xml.send 调用将阻塞,直到响应到达,在这种情况下,您不需要分配回调。 The alternative implementation may look like this:替代实现可能如下所示:
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;
}
However in my experience, this is almost never used in the real world.然而,根据我的经验,这在现实世界中几乎从未使用过。
Also : your code never calls the xmlHTTPheader function, although there's no harm in that.另外:您的代码从不调用 xmlHTTPheader function,尽管这样做没有害处。
I can't think of a better proposal given your current code;鉴于您当前的代码,我想不出更好的建议; have you looked at jQuery and its implementation of ajax?
您看过 jQuery 及其 ajax 的实现吗?
Some issues:一些问题:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.