Dojo入門：增強Ajax功能

隨著Web技術的發展，RIA似乎已經成了主流，Ajax也隨之成了不可或缺的部分。Ajax是非同步javascript和Xml，雖然現在很多互動的資料格式都不再嚴格的採用XML，但這種非同步操作卻越來越流行了。目前主流的JS工具包都包含了Ajax的功能，dojo也有自己的Ajax架構XHR。

XHR架構

XHR架構是dojo對ajax支援的一組方法，允許想伺服器端發出get、post、put、delete請求，這些方法包括：

• xhrGet
• xhrPost
• xhrPut
• xhrDelete

所有這些函數都遵守相同的文法：接受一個屬性設定物件作為參數。在這些對象中您可以定義您想要發出的 Ajax 請求的各個方面。再一次說明，這些選項在所有 XHR 函數中都是一樣的。

比較常用的選項：

• url：這是 HTTP 要求的 URL。它必須和發出這一請求的頁面有同樣的域和連接埠組合。
• handleAs：允許您定義響應的處理格式，預設是 text，但是，json、javascript、xml、還有一些其他選項也可用。在本節後面您將看到一個建立 Ajax 請求的樣本，使用一個處理 JSON 響應格式的回呼函數。
• form：<form> 元素的一個引用或者字串 ID 表示。form 中每個欄位的值將被同請求一起作為請求體發送。
• content：一個對象，包含您想要傳遞給請求體中資源的參數。如果兩者都提供，這個對象將與從 form 屬性中擷取的值混合在一起。
• load：當 Ajax 請求返回一個成功響應訊息時，執行此函數。響應資料和請求對象作為參數被傳遞到這個函數。
• error：如果 Ajax 請求出現問題，該函數將被調用。如果在 Ajax 請求中定義的 URL 無效、請求逾時或者發生其他 HTTP 錯誤，這將會出現。錯誤訊息和請求對象被作為參數傳遞。
• handle：該函數允許您將載入和錯誤回呼函數合并到一個函數中（如果您確實不關心請求結果是成功或是出現錯誤，這將非常有用）。

這幾種類型的請求對於構建一個REST風格的架構很有用，用xhrGet查看資料，xhrPost修改資料，xhrPut建立資料，xhrDelete刪除資料，每一種類型的請求對應一種伺服器端具體的操作。

 

使用iframe進行檔案上傳

XHR對於普通的Web請求具有很強的可操作性，但是對於像非同步上傳檔案等操作顯得比較棘手，不過沒關係，dojo已經為我們想到了這些。

dojo通過使用iframe的方式實現了這種進階的資料轉送。筆者曾經使用jquery實現過一個通過iframe非同步上傳檔案的程式，其原理是將檔案的提交的target設定為iframe，這樣在提交時，頁面不會重新整理，只有當伺服器返回時，才會更新iframe中的內容。這種操作會有進度條，但整個頁面不會重新整理，雖然不是完全的無重新整理，但用其實現檔案上傳絕對的有用。

dojo.io.iframe 是如何工作的呢？除了 XHR 對象之外還有什麼方法可以實現表單的非同步提交？其實這一切都很簡單，dojo.io.iframe 首先會建立一個隱藏的 iframe 並插入到父頁面的最後，然後設定此 iframe 的 src 屬性為dojo-module-path/resources/blank.html（dojo-module-path 指 dojo 包所在的目錄），iframe 頁面的 onload 事件的處理函數被設定為父表單的回呼函數。接下來就是在 iframe 頁面中發送請求，並接收伺服器的響應。當 iframe 接收到伺服器的反饋並載入完之後，父表單的回呼函數即被調用。

 

JSONP：跨域的資料訪問

XHR 架構中的函數功能強大，使用方便。但是 XHR 架構的函數有一問題就是不能跨域訪問，瀏覽器不允許 XHR 對象訪問其他域的網站。

JSONP（JSONP Padding）就是為瞭解決跨域訪問而產生的：

• 通過<javascript></javascript>標籤訪問封裝JSON資料的地址
• 將要返回的資料封裝為JSON對象
• 資料返回給瀏覽器，並被自動執行

這便是JSONP執行的基本流程，但是想要確定資料是否載入完成並不容易，通常的做法是設定一個回調方法，這個方法的名稱被作為請求參數的一部分發送給伺服器，伺服器在將資料封裝完整後，產生回調方法執行的代碼，並將這些資訊全部返回給用戶端，當用戶端執行返回資料時，回調方法也會被隨之調用。

 

總結

本文介紹了 Dojo 中三種瀏覽器與伺服器互動的方式，這三種方式各有優缺點，但是在使用方式卻出奇的一致； xhr 架構的函數，dojo.io.iframe、dojo.io.script 對象的函數使用的 JSON 對象參數也極其相似，而且淺顯易懂。 Dojo 設計者的這一良好設計極大的減輕了開發人員的學習負擔，作為架構開發人員應該瞭解這一理念。

下表是對這三種方式從三個方面進行了比較：

	支援的 HTTP 要求類型	期望的輸出	跨域訪問
XHR	Get, post, delete, put	text, json, xml, javascript …	N
iframe	Get, post	html	N
script	Get	javascript	Y

 

 

 

綜上所述，使用上述三種方法時需要遵循一條簡單的原則：傳送檔案則 iframe，跨域訪問則使用動態指令碼，其餘則選 XHR 架構。

 

本文是作者學習過程中的總結，部分內容引用自一下地址：

http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro2/

http://www.ibm.com/developerworks/cn/web/wa-ground/