使用 Dojo 进行批量 Ajax 请求的多种处理方式（2）
|
- UID
- 1066743
|
使用 Dojo 进行批量 Ajax 请求的多种处理方式（2）
使用 Dojo 进行基本的 Ajax 请求处理dojo.xhr 的使用方法HTTP 协议中的四种请求是分别是：Get（读取），Post（更新），Put（创建），Delete（删除）。 Dojo 以 XmlHttpRequest 对象为基础，提供了一组静态函数来支持这些 HTTP 请求。这些方法定义在 dojo/_base/xhr.js 中，因此在使用的时候不需要显式的引用。
清单 1 显示了一个示例，这个示例获取所有轻音乐歌曲，并将获得的数据打印在 Firebug 的 console 面板上。
清单 1. dojo.xhrGet 的使用1
2
3
4
5
6
7
8
| dojo.xhrGet({
url: "/music/softMusic",
sync: false,
handleAs: "json",
handle: function(response, ioArgs) {
console.log(response);
}
});
|
sync 表示当前的 xhr 函数在数据返回前是否阻塞，这个值默认是 false，即不阻塞。有关 Dojo 中 xhr 函数的详细使用请参考 以获得更多的信息。
服务器以 JSON 格式返回歌曲信息如清单 2 所示：
清单 2. 服务器端返回 /music/{categoryOfMusic} 数据示例1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| {
"songs": [
{
name: "softMusic1",
singer: "A",
category: "soft"
},
{
name: "softMusic2",
singer: "B",
category: "soft"
},
{
name: "softMusic3",
singer: "C",
category: "soft"
}
]
}
|
dojo.Deferred 对象和为 dojo.xhr 函数添加回调函数Dojo 提供的所有 xhr 函数都会返回一个"dojo.Deferred"对象。更多有关"dojo.Deferred"的信息，请参考 dojo.Deferred 参考文档。Deferred 对象是 Dojo 提供的用于异步编程模式的强大工具。"dojo.Deferred"有三个状态，初始化时是"unresolve"状态；当它所等待的事件发生时 , 进入"resolve" 状态；当发生错误了，进入"reject"状态。当 Deferred 对象由"unresolve"状态进入"resolve" 状态或"reject"状态时，会调用事先注册的回调函数。对于 dojo.xhr 返回的 Deferred 对象，所注册的回调函数会在 Ajax 请求返回时或者出错时调用。通过注册回调函数，可以替代的 dojo.xhr 中的 handle 方法。例如上面的一段代码可以写成如下所示：
清单 3. 为 dojo.xhrGet 添加回调函数1
2
3
4
5
6
7
| var deferred = dojo.xhrGet({
url: "/music/softMusic",
handleAs: "json"
});
deferred.addBoth(function(response) {
console.log(response);
});
|
addBoth 是为正常返回和出错返回添加相同的回调函数。与 dojo.xhr 函数的参数 handle 起相同作用。
基于回调函数的小规模批量 Ajax 请求处理
因为 Ajax 请求是一种异步操作，客户端不知道什么时候能获得返回的数据，所以进行批量 Ajax 请求时，客户端不能很好的同时管理多个 Ajax 请求返回的数据。例如，当需要多个 Ajax 请求都返回之后将得到的数据一起输出，不论是分别监测这些 Ajax 请求还是延时一个足够长的时间以确保所有的 Ajax 请求都返回，都不是明智的方法。
dojo.xhr 函数可以为 Ajax 请求添加任意的回调函数。这样在前一次请求的回调函数中再发送 Ajax 请求。当最后一个 Ajax 请求返回时，必然所有的 Ajax 请求都已经返回。通过这种方法，可以实现小规模的批量 Ajax 请求管理。
例如，回到我们的音乐管理系统。现在需要获取第 3 首轻音乐的详细信息，并输出在 Firebug 的 console 面板上。由于我们事先不知道第 3 首轻音乐的名字，无法直接获取它的详细信息。只能先获得所有的轻音乐，在返回的 JSON 格式数据中找到第三首音乐的概要信息，再发送一次 Ajax 请求获得该音乐的详细信息。清单 4 展示了一种实现方式。
清单 4. 在回调函数中发送另一次 Ajax 请求1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var deferred = dojo.xhrGet({
url: "/music/softMusic",
handleAs: "json"
});
deferred.then(function(response) {
var songs = response.songs;
return dojo.xhrGet({
url: "/music/" + songs[2].name,
handleAs: "json"
});
}, function(errResponse) {
console.log(errResponse);
}).addBoth(function(response) {
console.log(response);
});
|
Deferred 对象的 then 方法接收两个参数，这两个参数都是函数，第一个函数在 Deferred 达到"resovled"时调用，第二个函数在 Deferred 达到"rejected"时调用。
服务器以 JSON 格式返回歌曲的详细信息如清单 5 所示：
清单 5. 服务器端返回 /music/{nameOfSong} 数据示例1
2
3
4
5
6
7
| {
name: "softMusic3",
singer: "C",
year: "2012-03-21",
…
category: "soft"
}
|
这种方法只能串行的处理多个 Ajax 请求，并且，随着 Ajax 请求数增多，所需要的代码也需要相应的增加，因此只适合进行小规模批量 Ajax 请求处理。 |
|
|
|
|
|
