Ajax

我們見過許多使用Ajax的應用，到目前為止，我們認為最有意思的是DVD租借服務Netflix。當瀏覽Netflix中的各個選擇時，會看到各類最新影片的相關圖片和文字。當把滑鼠停在一個給定影片的圖片上時，就會看到更多的資訊（見圖4-12）。儘管不使用Ajax也能達到這個效果，但第一次擷取頁面時要納入大量可能永遠也不會用到的資訊。通過使用Ajax，只會在需要時發送所需的資訊。圖4-12

無一例外地，幾乎每個應用都會時不時地調用一個長時間啟動並執行事務。如果你關心系統的可用性，就要確保使用者能很容易地看到系統的狀態。如果是一個胖客戶應用，對於長時間運行事務的問題，解決辦法很簡單：只需顯示一個進度條，以便使用者知道目前所處狀況。不過，在Ajax之前，要在Web應用中做到這一點很不容易。本節將使你瞭解如何使用Ajax為Web應用建立進度條。在代碼清單4-9所示的例子中，再次在pollCallback()方法中使用了setTimeout()，從而每隔2秒調用一次伺服器。在process

Web應用通常使用“嚮導工具”設計原則來構建，即每個螢幕要求使用者輸入少量的資訊，每個後續頁的資料都依據前一頁的輸入來建立。對於某些情況，這個設計模式非常有用，如使用者以一種逐步、有序的方式完成任務。遺憾的是，太多的Web應用使用了這種方法，因為它們別無選擇。在Ajax技術出現之前，當基於使用者輸入修改頁面上的某些部分時，動態地更新頁面而不重新整理整個頁面是很難辦到的，甚至根本不可能。避免完全頁面重新整理的一種技術是在頁面上隱藏資料，並在需要時再顯示它們。例如，假設選擇框

你有時可能需要從伺服器擷取一些內容，例如，可能想“ping”一下伺服器，驗證伺服器是否正常運行。此時，你也許只想讀取伺服器發出的響應首部，而忽略內容。通過讀取響應首部，可以得出Content-Type（內容類型）、Content-Length（內容長度），甚至Last-

我們已經介紹了Ajax技術，也知道了如何使用XMLHttpRequest對象，現在要把它們結合起來，該怎麼做呢？哪些情況下需要應用Ajax技術？當然，Ajax的潛力幾乎是無窮盡的，關於Ajax的使用，靈感可能源源不斷。本章將展示一些例子，在這些情況下，使用Ajax技術可以讓應用突飛猛進。有些情況是一目瞭然的，有些則不是。不過無論怎樣，對Ajax應用積累的經驗越多，你就越會找到自己的方法來改善應用。在這些例子中，大多數都使用Java servlet作為伺服器端組件，其實每個例子也都能很容易地使用.

本章介紹了XMLHttpRequest對象與伺服器之間相互連信的各種方法。XMLHttpRequest對象可以使用HTTP GET或POST方法發送請求，請求資料可以作為查詢串、XML或JSON資料發送。處理請求之後，伺服器一般會發送簡單文本、XML資料甚至JSON資料作為響應。每個格式都有自己最適用的場合。如果不能根據請求的結果動態更新頁面的內容，Ajax就沒有多大的用處。當前的瀏覽器都把Web頁面的內容提供為一個遵循W3C

到此為止，你已經瞭解了如何使用Ajax技術向伺服器發送請求，也知道了客戶可以採用多種方法解析伺服器的響應。前面的例子中只缺少一個內容，就是你尚未將任何資料作為請求的一部分發送給伺服器。在大多數情況下，向伺服器發送一個請求而沒有任何請求參數是沒有什麼意義的。如果沒有請求參數，伺服器就得不到上下文資料，也無法根據上下文資料為客戶建立“個人化”的響應，實際上，伺服器會向每一個客戶發送同樣的響應。要想充分發揮Ajax技術的強大功能，這要求你向伺服器發送一些上下文資料。假設有一個輸

XMLHttpRequest對象提供了兩個可以用來訪問伺服器響應的屬性。第一個屬性respo-nseText將響應提供為一個串，第二個屬性responseXML將響應提供為一個XML對象。一些簡單的用例就很適合按簡單文本來擷取響應，如將響應顯示在警告框中，或者響應只是指示成功還是失敗的詞。第2章中的例子就使用了responseText屬性來訪問伺服器響應，並將響應顯示在警告框中。3.1.1　使用innerHTML

儘管Ajax風格的技術已經用了很多年，但直到最近XMLHttpRequest對象才得到現代瀏覽器的採納，而這也為開發豐富的Web應用開啟了一個新的時代。在本章中，我們討論了Ajax核心（即XMLHttpRequest對象）的相關基礎知識。我們瞭解了XMLHttpRequest對象的方法和屬性，而且展示了使用XMLHttpRequest對象的簡單樣本。可以看到，這個對象相當簡單，無需你考慮其中很多的複雜性。適當地使用JavaScript，再加上基本的DOM管理，Ajax可以提供高度的互動性，而這在

我們一直在說DOM，如果你沒有做過太多用戶端的工作，可能不知道什麼是DOM。DOM是一個W3C規約，可以以一種獨立於平台和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。有一點很重要，DOM的設計是以對象管理組織（OMG）的規約為基礎的，因此可以用於任何程式設計語言。最初人們把它認為是一種讓JavaScript在瀏覽器間可移植的方法，不過DOM的應用已經遠遠超出這個範圍。DOM實際上是以物件導向方式描述的物件模型。DOM定義了表示和修改文檔所

到目前為止，我們討論的解決方案都不是標準。儘管XMLHttpRequest得到了廣泛支援，但是你已經看到了，建立XMLHttpRequest對象的過程會隨瀏覽器不同而有所差異。許多人錯誤地認為Ajax得到了W3C的支援，但實際上並非如此。W3C在一個新標準中解決了這一問題以及其他缺點，這個標準的名字相當長：DOM Level 3

現在已經準備開始使用XMLHttpRequest對象了。我們剛剛討論了如何建立這個對象，下面來看如何向伺服器發送請求，以及如何處理伺服器的響應。最簡單的請求是，不以查詢參數或提交表單資料的形式向伺服器發送任何資訊。在實際中，往往都希望向伺服器發送一些資訊。使用XMLHttpRequest對象發送請求的基本步驟如下：1. 為得到XMLHttpRequest對象執行個體的一個引用，可以建立一個新的執行個體，也可以訪問包含有XMLHttpRequest執行個體的一個變數。2.

我們已經介紹了Ajax，下面來簡單談談遠程指令碼。你可能會想：“Ajax有什麼大不了的？我早就用IFRAME做過同樣的事情。”實際上，我們自己也曾用過這種方法。這在以前一般稱為遠程指令碼（remote

你可能想瞭解GET和POST之間有什麼區別，並想知道什麼時候使用它們。從理論上講，如果請求是等冪的就可以使用GET，所謂等冪是指多個請求返回相同的結果。實際上，相應的伺服器方法可能會以某種方式修改狀態，所以一般情況下這是不成立的。這隻是一種標準。更實際的區別在於淨荷的大小，在許多情況下，瀏覽器和伺服器會限制URL的長度URL用於向伺服器發送資料。一般來講，可以使用GET從伺服器擷取資料；換句話說，要避免使用GET調用改變伺服器上的狀態。一般地，當改變伺服器上的狀態時應當使用POST方法。不同於G

看到這裡，你可能想知道典型的Ajax互動是什麼樣。圖2-1顯示了Ajax應用中標準的互動模式。圖2-1　標準Ajax互動不同於標準Web客戶中所用的標準請求/回應程式法，Ajax應用的做法稍有差別。1. 一個用戶端事件觸發一個Ajax事件。從簡單的onchange事件到某個特定的使用者動作，很多這樣的事件都可以觸發Ajax事件。可以有如下的代碼：<input type="text"d="email" name="email"

表2-1顯示了XMLHttpRequest對象的一些典型方法。不要擔心，稍後就會詳細介紹這些方法。下面來更詳細地討論這些方法。void open(string method, string url, boolean asynch, string username, string

在使用XMLHttpRequest對象發送請求和處理響應之前，必須先用JavaScript建立一個XMLHttpRequest對象。由於XMLHttpRequest不是一個W3C標準，所以可以採用多種方法使用JavaScript來建立XMLHttpRequest的執行個體。Internet

網際網路最初只是為串連研究人員，使他們共用資訊，時至今日，網際網路已經得到了巨大的發展。網際網路開始時只有簡單的文本瀏覽器和靜態頁面，但是如今幾乎每家公司都有一個亮麗的網站，想找到一個粗糙的網站倒是很不容易。最早誰能想得到，有一天人們能在網上共同研究新型汽車，或者購買最新的斯蒂芬·金的小說呢？胖客戶應用的開發人員都飽受部署之苦，因為要把應用部署到數以千計的使用者機器上，他們急切地希望Web能夠減輕他們的負擔。多年以來，已經出現了許多Web應用技術，有些是專用的，有些需要高超的編程能

既然對在哪裡使用Ajax已經有所認識，下面再來談談應用Ajax的一些設計考慮。許多原則與Web應用的原則並無不同，不過還是有必要強調一下。要儘力減少客戶和伺服器之間的通訊量。如果應用得當，Ajax會使你的應用響應更快，但是如果每次使用者從一個域移到另一個域時你都來回傳遞超量的資料，使用者肯定不會滿意。如果有疑問，按標準約定行事。如果大多數應用都那麼做，可能你也應該那麼做。如果還有問題，可以看看Web案頭應用的有關標準。為此已經建立了一些模式，而且以後還會有更多的模式（www.ajaxpatter

既然你已經對Ajax產生了興趣，還要知道重要的一點，即什麼時候應該使用Ajax技術，而什麼時候不該用。首先，不要害怕在應用中嘗試新的方法。我們相信，幾乎每個Web應用都能從Ajax技術中獲益，只不過不要矯枉過正，過於離譜就行了。從驗證開始就很合適，但是不要限制你的主動性。你當然可以使用Ajax提交資料，但也許不能把它作為提交資料的主要方法。其次，惟一會影響你應用Ajax的就是瀏覽器問題。如果大量使用者（或者特別重要的使用者）還在使用比較舊的瀏覽器，如IE 5、Safari