使用 Dojo 进行批量 Ajax 请求的多种处理方式.docx

1、使用 Dojo 进行批量 Ajax 请求的多种处理方式使用 Dojo 进行批量 Ajax 请求的多种处理方式 引言在阅读本文之前，您需要具备以下知识：Ajax 技术：Ajax 的英文全名是：Asynchronous JavaScript and XML，从名字可以看出 Ajax 是一种异步的与服务器业务交互的方式。通常，在浏览器内运行的 JavaScript 代码都是单线程的。Ajax 的异步交互方式使得前台的 JavaScript 程序不会阻塞在等待服务器响应的过程中。从而使前台程序能够一直保持激活和响应性。有关 Ajax 的内容请参考 Ajax 技术资源中心。Dojo 框架：Dojo 是一

2、个强大的前端框架，它提供了方便的 Ajax 方法、丰富的小部件、数据结构、辅助函数、效果和布局帮助。有关 Dojo 的详细介绍请参考 Dojo 技术专题。XMLHttpRequest 对象：这是一个 JavaScript 对象，用于向服务器发送请求和接收服务器的响应。详细介绍请参考相关资源。异步编程模式：这种模式在 web 编程中变得越来越重要，通常用于执行时间可能较长的操作。异步编程模式不会等待长时间的操作完成或是造成阻塞，而是立即返回一个代表该操作的对象。操作成功或者失败之后会调用事先对该对象注册的回调函数。有关异步编程模式在 web 编程中的应用请参考相关资源。并发和串行 Ajax 请求

3、：顾名思义，并发 Ajax 请求是指客户端同时发送多个 Ajax 请求至服务器端；串行 Ajax 请求是指客户端在一个 Ajax 请求返回之后再发送下一个 Ajax 请求。Dojo 的应用将贯穿本文，选择 Dojo 的主要原因有以下两点：Dojo 提供了专门用于异步编程模式的对象：dojo.Deferred。并且提供了很多进一步操作 Deferred 对象的机制和方法。通过这些机制和方法能够方便的管理多个 dojo.Deferred 对象。Dojo 封装了一些静态函数（dojo.xhr 函数）使得开发人员能够很简单的触发 Ajax 请求。同时，dojo.xhr 函数返回一个 Deferred

4、对象用于进行异步编程操作。基于上述内容，本文的主要内容可以归纳如下：描述 dojo.xhr 函数的使用、如何将其应用于异步编程模式和如何利用异步编程模式实现小规模的批量 Ajax 请求管理详细介绍用 dojo.DeferredList 和 dojox.lang.async.par 实现任意规模的并发 Ajax 请求详细介绍用 dojox.lang.async.seq 实现任意规模的串行 Ajax 请求回页首准备工作服务器端业务描述由于本文主要讨论客户端实现 Ajax 请求。在此不介绍服务器端的实现方式，并且认为服务器已经实现了所有我们需要的功能，仅以最简单的方式描述服务器端的业务。让我们用一个

5、示例来说明，图 1 展示了服务器与客户端的交互。图 1. 客户端与服务器端数据交互示现在在服务器端有一个音乐管理系统，里面的音乐按照风格进行分类。服务器提供两类 REST 服务：/music/categoryOfMusic 返回某一个分类的所有歌曲的概要信息/music/nameOfSong 返回某一首歌曲的详细信息客户端与服务器端的数据以 JSON 格式进行交互。准备开发环境和调试工具下载并安装 Firefox 浏览器，并安装 Firebug 插件。回页首使用 Dojo 进行基本的 Ajax 请求处理dojo.xhr 的使用方法HTTP 协议中的四种请求是分别是：Get（读取），Post（更

6、新），Put（创建），Delete（删除）。 Dojo 以 XmlHttpRequest 对象为基础，提供了一组静态函数来支持这些 HTTP 请求。这些方法定义在 dojo/_base/xhr.js 中，因此在使用的时候不需要显式的引用。清单 1 显示了一个示例，这个示例获取所有轻音乐歌曲，并将获得的数据打印在 Firebug 的 console 面板上。清单 1. dojo.xhrGet 的使用 dojo.xhrGet( url: /music/softMusic, sync: false, handleAs: json, handle: function(response, ioArgs)

7、 console.log(response); );sync 表示当前的 xhr 函数在数据返回前是否阻塞，这个值默认是 false，即不阻塞。有关 Dojo 中 xhr 函数的详细使用请参考 掌握 Dojo 工具包，第 2 部分: XHR 框架与 Dojo 以获得更多的信息。服务器以 JSON 格式返回歌曲信息如清单 2 所示：清单 2. 服务器端返回 /music/categoryOfMusic 数据示例 songs: name: softMusic1, singer: A, category: soft , name: softMusic2, singer: B, category: s

8、oft , 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 对象由u

9、nresolve状态进入resolve 状态或reject状态时，会调用事先注册的回调函数。对于 dojo.xhr 返回的 Deferred 对象，所注册的回调函数会在 Ajax 请求返回时或者出错时调用。通过注册回调函数，可以替代的 dojo.xhr 中的 handle 方法。例如上面的一段代码可以写成如下所示：清单 3. 为 dojo.xhrGet 添加回调函数 var deferred = dojo.xhrGet( url: /music/softMusic, handleAs: json ); deferred.addBoth(function(response) console.lo

10、g(response); );addBoth 是为正常返回和出错返回添加相同的回调函数。与 dojo.xhr 函数的参数 handle 起相同作用。基于回调函数的小规模批量 Ajax 请求处理因为 Ajax 请求是一种异步操作，客户端不知道什么时候能获得返回的数据，所以进行批量 Ajax 请求时，客户端不能很好的同时管理多个 Ajax 请求返回的数据。例如，当需要多个 Ajax 请求都返回之后将得到的数据一起输出，不论是分别监测这些 Ajax 请求还是延时一个足够长的时间以确保所有的 Ajax 请求都返回，都不是明智的方法。dojo.xhr 函数可以为 Ajax 请求添加任意的回调函数。这样在

11、前一次请求的回调函数中再发送 Ajax 请求。当最后一个 Ajax 请求返回时，必然所有的 Ajax 请求都已经返回。通过这种方法，可以实现小规模的批量 Ajax 请求管理。例如，回到我们的音乐管理系统。现在需要获取第 3 首轻音乐的详细信息，并输出在 Firebug 的 console 面板上。由于我们事先不知道第 3 首轻音乐的名字，无法直接获取它的详细信息。只能先获得所有的轻音乐，在返回的 JSON 格式数据中找到第三首音乐的概要信息，再发送一次 Ajax 请求获得该音乐的详细信息。清单 4 展示了一种实现方式。清单 4. 在回调函数中发送另一次 Ajax 请求 var deferred

12、 = dojo.xhrGet( url: /music/softMusic, handleAs: json ); deferred.then(function(response) var songs = response.songs; return dojo.xhrGet( url: /music/ + songs2.name, handleAs: json ); , function(errResponse) console.log(errResponse); ).addBoth(function(response) console.log(response); );Deferred 对象的

13、 then 方法接收两个参数，这两个参数都是函数，第一个函数在 Deferred 达到resovled时调用，第二个函数在 Deferred 达到rejected时调用。服务器以 JSON 格式返回歌曲的详细信息如清单 5 所示：清单 5. 服务器端返回 /music/nameOfSong 数据示例 name: softMusic3, singer: C, year: 2012-03-21, category: soft 这种方法只能串行的处理多个 Ajax 请求，并且，随着 Ajax 请求数增多，所需要的代码也需要相应的增加，因此只适合进行小规模批量 Ajax 请求处理。回页首使用 Dojo

14、 并发的处理多个 Ajax 请求实现原理由于 HTTP 协议是无状态的（Stateless），HTTP 的无状态特性简化了服务器的设计，使服务器更容易支持大量并发的 HTTP 请求。在客户端，采用 Dojo 作为开发工具，由于 dojo.xhr 函数返回的是一个dojo.Deferred对象。因此，可以通过管理多个 dojo.xhr 函数返回的 Deferred 对象来管理多个并发的 Ajax 请求。用 dojo.DeferredList 和 dojox.lang.async.par 实现比较Dojo 中有多种方法管理异步编程对象dojo.Deferred。首先，可以用 dojo.Deferr

15、edList 管理多个 Deferred 对象。dojo.DeferredList 本身是一个 dojo.Deferred 的子类。因此，它也有相应的三种状态，也有对应的回调函数。DeferredList 达到resolved的条件是所有它所管理的 Deferred 对象都达到resolved或rejected状态。在下面的例子中，DeferredList 达到resolved的条件是所有的 Ajax 请求都返回（不论是成功返回还是出错返回），而 DeferredList 的回调函数获得的参数是一个二元数值对的数组，二元数值对对应了各个 Ajax 请求的返回信息。其中第一个数值是一个 bool

16、ean 值，表示 Ajax 请求是否成功返回；第二个数值是 Ajax 请求返回的信息。不论各个 Ajax 请求的返回顺序如何，该数组的顺序对应于传入 DeferredList 的 Deferred 对象的顺序。同时，我们也可以用 dojox.lang.async 模块中的一个静态函数 dojox.lang.async.par 管理并发的 Ajax 请求管理。这个静态函数接受一个函数的数组作为参数，并返回一个dojo.Deferred对象。在管理并发的 Ajax 请求时，可以使得传入的函数返回时调用 dojo.xhr 函数。该函数返回的 Deferred 对象达到resolved状态的条件是上述

17、函数数组中的函数成功返回或者函数返回的 Deferred 对象都达到resolved状态。否则，该 Deferred 对象进入rejected状态。该 Deferred 对象对应resolved状态的回调函数能够获得一个数组作为参数，这个数组包含了各个 Ajax 请求的成功返回信息。不论各个 Ajax 请求的返回顺序如何，该数组的顺序对应于传入 dojox.lang.async.par 的函数的顺序。并发处理多个 Ajax 请求的示例现在，对于我们的音乐管理系统，我们要同时获得所有的轻音乐，民谣，乡村音乐 , 并在 Firebug 的 console 面板显示。清单 6 展示了用上述的两种方法

18、实现的示例。清单 6. 并发处理 Ajax 请求示例 dojo.require(dojo.DeferredList); dojo.require(dojox.lang.async); function getSoftMusic() return dojo.xhrGet( url: /music/softMusic, handleAs: json ); function getFolkMusic() return dojo.xhrGet( url: /music/folkMusic, handleAs: json ); function getCountryMusic() return dojo

19、.xhrGet( url: /music/countryMusic, handleAs: json ); / 利用 dojo.DeferredList 处理并发的 Ajax 请求 var d1 = getSoftMusic(), d2 = getFolkMusic(), d3 = getCountryMusic(), defList = new dojo.DeferredList(d1, d2, d3); defList.then(function(results) dojo.forEach(results, function(result) console.log(result1); );

20、); / 利用 dojox.lang.async.par 处理并发的 Ajax 请求 var arrayOfAjax = getSoftMusic, getFolkMusic, getCountryMusic; dojox.lang.async.par(arrayOfAjax)().then(function(results) dojo.forEach(results, function(result) console.log(result); ); );两种解决方案的对比从上面的示例可以看出，上述的两种方法都是用一个 Deferred 对象管理多个 Deferred 对象（DeferredL

21、ist 是 Deferred 的子类，因此 DeferredList 的实例也可以认为是一个 Deferred 对象）。通过为作为管理者的 Deferred 对象增加回调函数来通知客户端程序多个 Ajax 请求已经返回。相比之下，用 DeferredList 更为灵活。DeferredList 在默认情况下，会完成所有的 Ajax 请求，即使某一个 Ajax 请求失败了，最后 DeferredList 仍能够触发resolved状态的回调函数，并将相应的信息置于回调函数的参数中。而 dojox.lang.async.par 只会在所有的 Ajax 请求成功返回之后才会将各个 Ajax 请求的返

22、回的信息传递给回调函数。当某一个 Ajax 请求失败了，dojox.lang.async.par 会将排在这个请求之后的所有 Ajax 请求取消。并触发rejected状态的回调函数。回页首使用 Dojo 串行的处理多个 Ajax 请求实现原理利用前文中所述的方法可以串行的处理多个 Ajax 请求。但是存在一个问题，当需要串行处理的 Ajax 请求较多时，代码将显得又乱又长。并且，很多时候程序事先并不知道要串行处理多少个 Ajax 请求，因为这是由用户的操作决定的。在 dojox.lang.async 模块中，有一个静态函数 dojox.lang.async.seq 能够很好的帮我们解决这些问

23、题。用 dojox.lang.async.seq 的实现和示例dojox.lang.async.seq 也是接受一个函数的数组作为参数，并返回一个dojo.Deferred对象。在管理串行的 Ajax 请求时，可以使得传入的函数返回时调用 dojo.xhr 函数。该函数返回的 Deferred 对象达到resolved状态的条件是上述函数数组中的函数成功返回或者函数返回的 Deferred 对象都达到resolved状态。否则，该 Deferred 对象进入rejected状态。回到之前的例子，现在我们需要删除轻音乐，民谣，乡村音乐。但是很不幸，服务器规定删除操作不能并发进行，我们只能在删除一

24、个分类之后再删除另一个分类。清单 7 展示了实现的示例。清单 7. 串行处理 Ajax 请求示例 dojo.require(dojox.lang.async); function deleteSoftMusic() return dojo.xhrDelete( url: /music/softMusic, handle: function(response) console.log(response); ); function deleteFolkMusic() return dojo.xhrDelete( url: /music/folkMusic, handle: function(res

25、ponse) console.log(response); ); function deleteCountryMusic() return dojo.xhrDelete( url: /music/countryMusic, handle: function(response) console.log(response); ); var arrayOfAjax = deleteSoftMusic, deleteFolkMusic, getCountryMusic; dojox.lang.async.seq(arrayOfAjax)().allBoth(function(result) conso

26、le.log(result); );当 dojox.lang.async.seq 管理的某一个 Ajax 请求失败了，排在其之后的 Ajax 请求将不再执行。并且 dojox.lang.async.seq 返回的 Deferred 对象会进入rejected状态。回页首总结通过以上的介绍和举例，我们了解了如何以 Dojo 作为工具，管理批量 Ajax 请求。Ajax 请求是一种异步操作，客户端无法知道这种异步操作什么时候返回，是否能成功返回。因此，批量处理 Ajax 请求的难点在于同时管理。本文讲述了一种结合 dojo.xhr 函数和 dojo.Deferred 对象的管理方式。用这种方式能够以多种方式管理批量 Ajax 请求，希望能为您的实际应用带来一定的启发。