六
23
2009
XmlHttpRequest的串行异步
发布者: seasun默认情况下，我们总是喜欢用异步XHR请求来提高Web应用的响应性。然而，你考虑过如何让你的XHR请求串行调用吗？毕竟在有些情况下，XHR请求必须按照顺序调用，比如B的调用依赖于A的结果。
你可以使用同步Ajax请求，但是那会暂时锁住浏览器。Thibaud Lopez Schneider在一篇文章中说明了同步Ajax和
串行发生的异步请求
之间的区别。
他创建了一个网站asynchronous.me用来生成简单的示例代码。如果查看串行异步XHR的示例代码的话，你会发现它其实很简单，只是把下一个方法作为上一个方法的回调方法。
function run() {
request1(function () {
request2(function () {
request3(function () {
done();
});
});
});
}
function request1(callback1) {
// request 1
print("request1");
var xmlHttpRequest1 = new XMLHttpRequest();
xmlHttpRequest1.open("GET", "something1?hello1", true);
xmlHttpRequest1.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// response 1
print("response1=" + this.responseText);
// continue execution in the callback
if (callback1) {
callback1();
}
}
};
xmlHttpRequest1.send();
}
function request2(callback2) {
// request 2
print("request2");
var xmlHttpRequest2 = new XMLHttpRequest();
xmlHttpRequest2.open("GET", "something2?hello2", true);
xmlHttpRequest2.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// response 2
print("response2=" + this.responseText);
// continue execution in the callback
if (callback2) {
callback2();
}
}
};
xmlHttpRequest2.send();
}
function request3(callback3) {
// request 3
print("request3");
var xmlHttpRequest3 = new XMLHttpRequest();
xmlHttpRequest3.open("GET", "something3?hello3", true);
xmlHttpRequest3.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// response 3
print("response3=" + this.responseText);
// continue execution in the callback
if (callback3) {
callback3();
}
}
};
xmlHttpRequest3.send();
}
function done() {
// end
print("done");
}
你可以把使用回调的方法与使用Dojo Deferred的进行比较：
function run() {
request1().addCallback(request2).addCallback(request3).addCallback(done);
}
function request1() {
// request 1
print("request1");
var deferred = dojo.xhrGet({
url: "something1?hello1",
load: function (response) {
// response 1
print("response1=" + response);
}
});
return deferred;
}
function request2() {
// request 2
print("request2");
var deferred = dojo.xhrGet({
url: "something2?hello2",
load: function (response) {
// response 2
print("response2=" + response);
}
});
return deferred;
}
function request3() {
// request 3
print("request3");
var deferred = dojo.xhrGet({
url: "something3?hello3",
load: function (response) {
// response 3
print("response3=" + response);
}
});
return deferred;
}
function done() {
// end
print("done");
}
- 分享
