掌握 Dojo 工具包（ 2）：使用 Dojo 架構開發 Ajax 應用

Ajax 的興起改變了傳統的 B/S 結構應用程式中以頁面為機關的互動模式，Ajax 引入的局部重新整理機制帶來了更好的使用者體驗，促使浏覽器中的頁面開始向應用程式發展，Google Mail, Google Reader 是在這種趨勢下誕生的典型應用。 Dojo 提供了基于 XmlHttpRequest 的對象的 XHR 架構來支援異步 Ajax 調用，另外 Dojo.io 包中提供了兩種浏覽器與伺服器互動的方式：iframe 隐藏架構和 script 動态腳本，他們是對 XHR 架構的有益補充，本文将對這些技術進行介紹。

XmlHttpRequest 對象的思考

在傳統的以頁面為機關的浏覽器和伺服器互動模式中，每一次伺服器請求都會導緻整個頁面的重新加載，即使需要更新的僅僅是頁面的一小部分（比如顯示一個登入錯誤資訊）。 Ajax 技術的出現給頁面帶來了一些變化，其中最直覺的莫過于站點的頁面上出現越來越多的“ loading …”，“正在加載中……”等提示資訊，有些忽如一夜春風來，loading 加載處處開的意思。“ loading …”或者“正在加載中……”表示浏覽器正在與伺服器之間進行互動，互動完成之後，将對頁面進行局部重新整理，這種互動模式雖然簡單卻極大的提高了 Web 應用的使用者體驗。實作這種模式的核心就是 XmlHttpRequest（後文簡稱 XHR）對象。

XHR 對象促使越來越多“單一頁面”的 Web 應用的誕生。使用 XHR 對象可以發送異步 HTTP 請求。因為是異步，在浏覽器和伺服器互動的過程中，仍然可以操作頁面。當頁面中有多個進行異步調用的 XHR 對象時，事情有了質的變化，每一個 XHR 對象都可以獨立于伺服器進行通信，浏覽器中的頁面仿佛是一個多線程的應用程式。這種多線程異步調用的特性給 Web 應用的開發帶來了很大的影響，越來越多像 Google Mail 這種“單一頁面”的應用湧現出來，而且大受歡迎。之是以能做到“單一頁面”是因為有很多的 XHR 對象默默地在背後服務，我們可以通過啟用 firebug 來檢視每次在 Google Mail 頁面上的操作“生産”了多少個 XHR 對象。

Ajax 資源中心 請通路 Ajax 資源中心，這是有關 Ajax 程式設計模型資訊的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新資訊都能在這裡找到。

使用 XHR 對象的另一個好處是可以減少伺服器傳回的資料量，進而提升系統的性能。在原有的 B/S 互動模式中，伺服器傳回的是粗粒度的 HTML 頁面；使用 XHR 對象之後，伺服器傳回的是細粒度的資料，如 HTML，JSON，XML 等，請注意這裡傳回的是資料而不是頁面，也就是說隻傳回需要更新的内容，而不傳回已經在頁面上顯示的其他内容，是以每次從伺服器傳回的資料量比原來要少。采用 AJAX 技術的 Web 應用在初次加載時花費的時間比較長，但是加載完成之後，其性能比原來的 Web 應用要好很多。

這裡介紹了一些 XmlHttpRequest 對象給 Web 開發帶來的變化，這些變化是 Ajax 技術能夠流行的重要原因，認識這些變化可以幫助開發人員設計、開發高效的 Web 應用。本文并不打算介紹 XmlHttpRequest 的屬性、方法，很多文章在這方面已經做得很好。

XHR 架構

XmlHttpRequest 對象是 Dojo 中的 XHR 架構的基礎，目前主流浏覽器都已經支援此對象，但是不同浏覽器上實作方式卻不一樣，IE5、IE6 采用 ActiveX 對象的方式，Firefox 和 Safari 都實作為一個内部對象，是以建立 XHR 對象之前需要先測試浏覽器的類型，清單 1 展示了最簡單的建立 XHR 對象的代碼。

清單 1

function createXHR(){ if (window.XMLHttpRequest) { // Non IE return new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE return new ActiveXObject("Microsoft.XMLHTTP"); } }

或許是認識到 XHR 對象的重要性，微軟在 IE7 中已經把它實作為一個視窗對象的屬性。但是判斷浏覽器類型的代碼依然不能消除，因為 IE5, IE6 仍然有大量的使用者。

XHR 對象建立方式不一緻是 Dojo 的 XHR 架構誕生的一個原因，更重要的原因是原始 XHR 對象還不夠強大，有些方面不能滿足開發的需要：首先 XHR 對象支援的傳回類型有限，原始 XHR 對象隻有 responseText 和 responseXML 兩個屬性代表傳回的資料，重要的資料交換格式 JSON 就不被支援；其次不能設定 HTTP Request 的逾時時間，設定逾時時間可以讓用戶端腳本控制請求存在的時間，而不是被動的等待伺服器端的傳回。

基于這些問題，Dojo 組織提供了一組函數來支援各種 HTTP 請求，包括 xhrGet，rawXhrPost，xhrPut，rawXhrPut，xhrPut，xhrDelete，這幾個函數與 HTTP 協定中的四種請求是一一對應的，HTTP 四種請求是：Get（讀取），Post（更新），Put（建立），Delete（删除）。 Dojo 組織的發起者 Alex Russell 把這些跟 XHR 對象相關的函數放在一起稱為 XHR 架構。下面我們來看看 Dojo 是如何建立 XHR 對象的。清單 2 是 Dojo 1.1 中建立 XHR 對象的代碼片段。

清單 2

本文轉自IBM Developerworks中國

      請點選此處檢視全文