如何处理同时发生的 javascript xmlhttprequests?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/13445809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to handle Simultaneous javascript xmlhttprequests?
提问by nikolas
Possible Duplicate:
passing index from for loop to ajax callback function (javascript)
I've been a little confused with making xmlhttprequests, to different servers, in order to fetch some content.. Here is what I've written, but it seems that I'm mistaken at some point..
为了获取一些内容,我对向不同的服务器发出 xmlhttprequests 有点困惑。
var URL = new Array();
URL[0] = "http://www.example1.com";
URL[1] = "http://www.example2.com";
URL[2] = "http://www.example3.com";
var nRequest = new Array();
for (var i=0; i<3; i++) {
nRequest[i] = new XMLHttpRequest();
nRequest[i].open("GET", URL[i], true);
nRequest[i].onreadystatechange = function (oEvent) {
if (nRequest[i].readyState === 4) {
if (nRequest[i].status === 200) {
console.log(nRequest[i].responseText);
alert(nRequest[i].responseText);
} else {
console.log("Error", nRequest[i].statusText);
}
}
};
nRequest[i].send(null);
}
with this code on I.E.10 I get access denied on console..
使用 IE10 上的此代码,我在控制台上拒绝访问..
If I remove array and use simple request, it operates as expected..
如果我删除数组并使用简单的请求,它会按预期运行..
wRequest = new XMLHttpRequest();
wRequest.open("GET", "http://www.example1.com", true);
wRequest.onreadystatechange = function (oEvent) {
if (wRequest.readyState === 4) {
if (wRequest.status === 200) {
console.log(wRequest.responseText);
alert(wRequest.responseText);
} else {
console.log("Error", wRequest.statusText);
}
}
};
wRequest.send(null);
But how am I supposed to trigger multiple 2-3 requests, and still not have problem with data handling..??
但是我应该如何触发多个 2-3 个请求,并且仍然没有数据处理问题..??
回答by nnnnnn
The problem (ignoring the cross-domain issue that slebetman covered) is that when your ready state change callback is fired it is using the i
variable from the containing scope which will be 3
after the loop completes. One way to fix that is as follows:
问题(忽略 slebetman 涵盖的跨域问题)是,当您的就绪状态更改回调被触发时,它正在使用i
包含范围中的变量,该变量将3
在循环完成之后。一种解决方法如下:
for (var i=0; i<3; i++){
(function(i) {
nRequest[i] = new XMLHttpRequest();
nRequest[i].open("GET", URL[i], true);
nRequest[i].onreadystatechange = function (oEvent) {
if (nRequest[i].readyState === 4) {
if (nRequest[i].status === 200) {
console.log(nRequest[i].responseText);
alert(nRequest[i].responseText);
} else {
console.log("Error", nRequest[i].statusText);
}
}
};
nRequest[i].send(null);
})(i);
}
This introduces an immediately invoked function expression for each loop iteration such that the code inside the function has its own i
- the magic of JS closures means that when the onreadystatechange
function is called it will access the parameter i
of the anonymous function (even though that function has completed), not the i
of the outer scope, so the right nRequest
element will be processed each time.
这为每次循环迭代引入了一个立即调用的函数表达式,以便函数内部的代码有自己的i
- JS 闭包的魔力意味着当onreadystatechange
函数被调用时,它将访问i
匿名函数的参数(即使该函数已经完成),而不是i
外部作用域的 ,因此nRequest
每次都会处理正确的元素。
Also you had a typo on the .open()
line where you said wURL[i]
but should've had URL[i]
.
此外,您.open()
在说wURL[i]
但应该有URL[i]
.
Depending on what you plan to do with the response text I'm not sure that you need an array of requests at all: you could encapsulate the Ajax code into a function that takes a URL and a callback function as parameters, and then call that function in the loop...
根据您计划对响应文本执行的操作,我不确定您是否需要一个请求数组:您可以将 Ajax 代码封装到一个以 URL 和回调函数作为参数的函数中,然后调用它循环中的函数...
回答by slebetman
making xmlhttprequests, to different servers
向不同的服务器发出 xmlhttprequests
You cannot do that. XMLHttpRequest is only allowed to connect to the same domain that the page belongs to. This is called the "same origin policy".
你不能这样做。XMLHttpRequest 只允许连接到页面所属的域。这就是所谓的“同源政策”。
Google "same origin policy" or search for it here on SO to learn more.
谷歌“同源政策”或在这里搜索它以了解更多信息。