用Dojo實現(xiàn)Ajax請求：XHR、跨域、及其他
在任何瀏覽器上方便地實現(xiàn)Ajax請求是每一個Ajax框架的初衷。Dojo在這方面無疑提供了非常豐富的支持。除了XMLHttpRequest之外，動態(tài)script、iframe、RPC也應(yīng)有盡有，并且接口統(tǒng)一，使用方便，大多數(shù)情況下都只需要一句話就能達到目的，從而免除重復(fù)造輪子的麻煩。而且，Dojo一貫追求的概念完整性也在這里有所體現(xiàn)，換句話說，在使用Dojo的Ajax工具的過程中不會感到任何的不自然，相反更容易有觸類旁通的感覺，因為API的模式是統(tǒng)一的，而且這里涉及到的某些概念（如Deferred對象）也貫穿在整個Dojo之中。
Dojo的XHR函數(shù)
Dojo的XMLHttpRequest函數(shù)就叫dojo.xhr，除了把自己取名美元符號之外，這好像是最直接的辦法了。它定義在Dojo基本庫里，所以不需要額外的require就能使用。它可以實現(xiàn)任何同域內(nèi)的http請求。不過更常用的是dojo.xhrGet和dojo.xhrPost，它們只不過是對dojo.xhr函數(shù)的簡單封裝；當然根據(jù)REST風(fēng)格，還有dojo.xhrPut和dojo.xhrDelete。
這些函數(shù)的參數(shù)都很統(tǒng)一。除了dojo.xhr的第一個參數(shù)是http方法名之外，所有的dojo.xhr*系列函數(shù)都接受同一種散列式的參數(shù)，其中包含請求的細節(jié)，例如url、是否同步、要傳給服務(wù)器的內(nèi)容（可以是普通對象、表單、或者純文本）、超時設(shè)定、返回結(jié)果的類型（非常豐富且可擴展）、以及請求成功和失敗時的回調(diào)。所有dojo.xhr*函數(shù)（實際上是所有IO函數(shù)）返回值也都一樣，都是一個Deferred對象，顧名思義，它能讓一些事情“延遲”發(fā)生，從而讓API用起來更靈活。
下面的兩個例子可能會帶來一點直觀感受：
- dojo.xhrGet({
- url: "something.html",
- load: function(response, ioArgs){
- //用response干一些事
- console.log("xhr get success:", response);
- return response; //必須返回response
- },
- error: function(response, ioArgs){
- console.log("xhr get failed:", response);
- return response; //必須返回response
- }
- });
- //Deferred對象允許用同步調(diào)用的寫法寫異步調(diào)用
- var deferredResult = dojo.xhrPost({
- url: "something.html",
- form: formNode, //Dojo會自動將form轉(zhuǎn)成object
- timeout: 3000, //Dojo會保證超時設(shè)定的有效性
- handleAs: "json" //得到的response將被認為是JSON，并自動轉(zhuǎn)為object
- });
- //當響應(yīng)結(jié)果可用時再調(diào)用回調(diào)函數(shù)
- deferredResult.then(function(response){
- console.log("xhr get success:", response);
- return response; //必須返回response
- });
首先解釋一下timeout。除了IE8之外，目前大多數(shù)XMLHttpRequest對象都沒有內(nèi)置的timeout功能，因此必須用 setTimeout。當同時存在大量請求時，需要為每一個請求設(shè)置單獨的定時器，這在某些瀏覽器（主要是IE）會造成嚴重的性能問題。dojo的做法是只用一個單獨的setInterval，定時輪詢（間隔50ms）所有還未結(jié)束的請求的狀態(tài)，這樣就高效地解決了一切遠程請求（包括JSONP和 iframe）的超時問題。
值得一提的還有handleAs參數(shù)，通過設(shè)置這個參數(shù)，可以自動識別服務(wù)器的響應(yīng)內(nèi)容格式并轉(zhuǎn)換成對象或文本等方便使用的形式。根據(jù)文檔，它接受如下值：text (默認), json, json-comment-optional, json-comment-filtered, javascript, xml。
而且它還是可擴展的。其實handleAs只是告訴xhr函數(shù)去調(diào)用哪個格式轉(zhuǎn)換插件，即dojo.contentHandlers對象里的一個方法。例如 dojo.contentHandlers.json就是處理JSON格式的插件。你可以方便地定制自己所需要的格式轉(zhuǎn)換插件，當然，你也可修改現(xiàn)有插件的行為：
- dojo.contentHandlers.json = (function(old){
- return function(xhr){
- var json = old(xhr);
- if(json.someSignalFormServer){
- doSomthing(json);
- delete json.someSignalFormServer;
- }
- return json;
- }
- })(dojo.contentHandlers.json);//一個小技巧，利用傳參得到原方法
虛擬的參數(shù)類
這里特別提一下Dojo在API設(shè)計上的兩個特點。其一是虛擬的參數(shù)“類”概念：通過利用javascript對象可以靈活擴展的特點，強行規(guī)定一個散列參數(shù)屬于某個“類”。例如dojo.xhr*系列函數(shù)所接受的參數(shù)就稱為dojo.__XhrArgs。這個“類”并不存在于實際代碼中（不要試圖用 instanceof驗證它），只停留在概念上，比抽象類還抽象，因此給它加上雙下劃線前綴（Dojo習(xí)慣為抽象類加單下劃線前綴）。這樣做看起來沒什么意思，但實際上簡化了API，因為它使API之間產(chǎn)生了聯(lián)系，更容易記憶也就更易于使用。這一點在對這種類做“繼承”時更明顯。例如 dojo.__XhrArgs繼承自dojo.__IoArgs，這是所有IO函數(shù)所必須支持的參數(shù)集合，同樣繼承自dojo.__IoArgs的還有 dojo.io.script.__ioArgs和dojo.io.iframe.__ioArgs，分別用于動態(tài)腳本請求和iframe請求。子類只向父類添加少量的屬性，這樣繁多的參數(shù)就具有了樹形類結(jié)構(gòu)。原本散列式參數(shù)是用精確的參數(shù)名代替了固定的參數(shù)順序，在增加靈活性和可擴展性的同時，實際上增加了記憶量（畢竟參數(shù)名不能拼錯），使得API都不像看起來那么好用，有了參數(shù)類的設(shè)計就緩解了這個問題。
這種參數(shù)類的做法在Dojo里隨處可見，讀源碼的話就會發(fā)現(xiàn)它們都是被正兒八經(jīng)地以正常代碼形式聲明在一種特殊注釋格式里的，像這樣：
- /*=====
- dojo.declare("dojo.__XhrArgs", dojo.__IoArgs, {
- constructor: function(){
- //summary:
- //...
- //handleAs:
- //...
- //......
- }
- });
- =====*/
這種格式可以被jsDoc工具自動提取成文檔，在文檔里這些虛擬出來的類就像真的類一樣五臟俱全了。
Deferred對象
另一個API設(shè)計特點就是Deferred對象的廣泛使用。Dojo里的Deferred是基于MochiKit實現(xiàn)稍加改進而成的，而后者則是受到 python的事件驅(qū)動網(wǎng)絡(luò)工具包Twisted里同名概念的啟發(fā)。概括來說的話，這個對象的作用就是將異步IO中回調(diào)函數(shù)的聲明位置與調(diào)用位置分離，這樣在一個異步IO最終完成的地方，開發(fā)人員可以簡單地說“貨已經(jīng)到了，想用的可以來拿了”，而不用具體地指出到底該調(diào)用哪些回調(diào)函數(shù)。這樣做的好處是讓異步IO的寫法和同步IO一樣（對數(shù)據(jù)的處理總是在取數(shù)據(jù)函數(shù)的外面，而不是里面），從而簡化異步編程。
具體做法是，異步函數(shù)總是同步地返回一個代理對象（這就是Deferred對象），可以將它看做你想要的數(shù)據(jù)的代表，它提供一些方法以添加回調(diào)函數(shù)，當數(shù)據(jù)可用時，這些回調(diào)函數(shù)(可以由很多個)便會按照添加順序依次執(zhí)行。如果在取數(shù)據(jù)過程中出現(xiàn)錯誤，就會調(diào)用所提供的錯誤處理函數(shù)(也可以有很多個)；如果想要取消這個異步請求，也可通過Deferred對象的cancel方法完成。
dojo.Deferred的核心方法如下：
- then(callback, errback); //添加回調(diào)函數(shù)
- callback(result); //表示異步調(diào)用成功完成，觸發(fā)回調(diào)函數(shù)
- errback(error); //表示異步調(diào)用中產(chǎn)生錯誤，觸發(fā)錯誤處理函數(shù)
- cancel(); //取消異步調(diào)用
Dojo還提供了一個when方法，使同步的值和異步的Deferred對象在使用時寫法一樣。例如：
- //某個工具函數(shù)的實現(xiàn)
- var obj = {
- getItem: function(){
- if(this.item){
- return this.item; //這里同步地返回數(shù)據(jù)
- }else{
- return dojo.xhrGet({ //這里返回的是Deferred對象
- url: "toGetItem.html",
- load: dojo.hitch(this, function(response){
- this.item = response;
- return response;
- })
- });
- }
- }
- };
- //用戶代碼
- dojo.when(obj.getItem(), function(item){
- //無論同步異步，使用工具函數(shù)getItem的方式都一樣
- });
在函數(shù)閉包的幫助下，Deferred對象的創(chuàng)建和使用變得更為簡單，你可以輕易寫出一個創(chuàng)建Deferred對象的函數(shù)，以同步的寫法做異步的事。例如寫一個使用store獲取數(shù)據(jù)的函數(shù)：
- var store = new dojo.data.QueryReadStore({...});
- function getData(start, count){
- var d = new dojo.Deferred(); //初始化一個Deferred對象
- store.fetch({
- start: start,
- count: count,
- onComplete: function(items){
- //直接取用上層閉包里的Deferred對象
- d.callback(items);
- }
- });
- return d; //把它當做結(jié)果返回
- }
#p#
用dojo.io.script跨域
dojo.xhr* 只是XmlHttpRequest對象的封裝，由于同源策略限制，它不能發(fā)跨域請求，要跨域還是需要動態(tài)創(chuàng)建<script>標簽。Dojo 沒有像JQuery一樣把所有東西都封裝在一起（JQuery的ajax()方法可以跨域，當然用的是JSONP，所以它不敢把自己稱為xhr），而是堅持一個API只干一件事情。畢竟在大部分應(yīng)用中，同域請求比跨域請求多得多，如果一個應(yīng)用不需要跨域，就沒必要加載相關(guān)代碼。因此與xhr不同，dojo 的跨域請求組件不在基本庫，而在核心庫，需要require一下才能使用：
- dojo.require("dojo.io.script");
這個包里面基本上只需要用到一個函數(shù)：dojo.io.script.get()。它也返回Deferred對象，并接受類型為 dojo.io.script.__ioArgs的散列參數(shù)。受益于虛擬參數(shù)類，我們不用從頭開始學(xué)習(xí)這個參數(shù)，它繼承了dojo.__IoArgs，因此和dojo.xhr*系列的參數(shù)大同小異。唯一需要注意的是handleAs在這里無效了，代之以jsonp或者checkString。
前者用于實現(xiàn)JSONP協(xié)議，其值由服務(wù)器端指定，當script標簽加載后就按照JSONP協(xié)議執(zhí)行這個函數(shù)，然后Dojo會自動介入，負責把真正的數(shù)據(jù)傳給load函數(shù)。需要指出的是在Dojo1.4以前，這個參數(shù)叫callbackParamName，冗長但意義明確。畢竟Dojo太早了，它成型的時候（2005）JSONP這個詞才剛出現(xiàn)不久。現(xiàn)在callbackParamName還是可用的（為了向后兼容），不過處于deprecated狀態(tài)。
下面的例子從flickr獲取feed數(shù)據(jù)：
- dojo.io.script.get({
- url: "http://www.flickr.com/services/feeds/photos_public.gne",
- jsonp: "jsoncallback", //由flickr指定
- content: {format: "json"},
- load: function(response){
- console.log(response);
- return response;
- },
- error: function(response){
- console.log(response);
- return response;
- }
- });
與jsonp不同，checkString參數(shù)專門用于跨域獲取javascript代碼，它其實是那段跨域腳本里的一個有定義的變量的名字，Dojo會用它來判斷跨域代碼是否加載完畢，配合前面提到的timeout機制就能實現(xiàn)有效的超時處理。
- dojo.io.script.get({
- url: "http://......", //某個提供腳本的URL
- checkString: "obj",
- load: function(response){
- //腳本加載完畢，可以直接使用其中的對象了，如obj。
- Return response;
- }
- });
用dojo.io.iframe傳數(shù)據(jù)
dojo.io 包里還有一個工具就是iframe，常用于以不刷新頁面的方式上傳或下載文件。這個很經(jīng)典的Ajax技巧在Dojo里就是一句 dojo.io.iframe.send({...})。這個函數(shù)接受dojo.io.iframe.__ioArgs，相比 dojo.__IoArgs，它只多了一個method參數(shù)，用于指定是用GET還是POST（默認）方法發(fā)送請求。下面的例子就實現(xiàn)了通過無刷新提交表單來上傳文件：
- dojo.io.iframe.send({
- form: "formNodeId", //某個form元素包含本地文件路徑
- handleAs: "html", //服務(wù)器將返回html頁面
- load: onSubmitted, //提交成功
- error: onSubmitError //提交失敗
- });
目前send函數(shù)的handleAs參數(shù)支持html, xml, text, json, 和javascript五種響應(yīng)格式。除了html和xml之外，使用其他格式有一個比較特別的要求，就是服務(wù)端返回的響應(yīng)必須具有以下格式：
- <html>
- <head></head>
- <body>
- <textarea>真正的響應(yīng)內(nèi)容</textarea>
- </body>
- </html>
這是因為服務(wù)器返回的東西是加載在iframe里的，而只有html頁面才能在任何瀏覽器里保證成功加載（有個DOM在，以后取數(shù)據(jù)也方便）。加一個<textarea>則可以盡量忠實于原始文本數(shù)據(jù)的格式，而不會受到html的影響。
試試RPC(遠程過程調(diào)用)
如果dojo.xhr*函數(shù)以及Deferred機制仍然無法避免代碼的混亂，那RPC可能就是唯一的選擇了。dojo.rpc包提供了基于“簡單方法描述”語言(SMD)的RPC實現(xiàn)。SMD的原理類似于WSDL（Web服務(wù)描述語言），不過是基于JSON的，它定義了遠程方法的名稱、參數(shù)等屬性，讓 Dojo能創(chuàng)建出代理方法以供調(diào)用。
Dojo提供了兩種方式實現(xiàn)rpc：XHR和JSONP，分別對應(yīng)dojo.rpc.JsonService類和dojo.rpc.JsonpService類，用戶可以根據(jù)是否需要跨域各取所需。
一個簡單的例子：
- var smdObj = {
- serviceType: "JSON-RPC",
- serviceURL: "http://...."
- methods: [
- {name: "myFunc", parameters: []}
- ]
- };
- var rpc = new dojo.rpc.JsonpService(smdObj); //傳入SMD
- var result = rpc.myFunc(); //直接調(diào)用遠程方法，返回Deferred對象
- dojo.when(result, function(result){
- //得到結(jié)果
- });
SMD還沒有一個被廣泛認可的官方標準，一直以來都是Dojo社區(qū)領(lǐng)導(dǎo)著它的發(fā)展，以后這個模塊也有可能發(fā)生改變，但整個RPC基本的框架會保持穩(wěn)定。
結(jié)語
Ajax請求這個主題太大，本文只能掛一漏萬地介紹一點dojo在這方面設(shè)計和實現(xiàn)的皮毛，包括基本XHR請求、動態(tài)script、iframe請求、以及RPC，并特別強調(diào)了幾個有Dojo特色的設(shè)計，如timeout機制、虛擬參數(shù)類、Deferred對象等。
Dojo由Ajax領(lǐng)域的先驅(qū)們寫就，相信從它的代碼中我們一定能學(xué)到更多的東西。
原文鏈接：http://www.infoq.com/cn/articles/dojo-ajax-xhr
【編輯推薦】
