1、第十六章 Ajax應用詳解,在本章的內(nèi)容中，將要介紹Ajax技術(shù)，使用這種技術(shù)，可以構(gòu)建出類似傳統(tǒng)桌面應用程序的交互界面，可以豐富客戶與服務器的交互方式。通過本章內(nèi)容的學習，讀者可以了解Ajax的基本知識，并且在本章中對Ajax處理客戶請求的各個環(huán)節(jié)都進行了詳細的分析，在具體的示例中展示了Ajax在各種情景下的具體應用，通過這些示例程序讀者可以體會到Ajax的基本用法。,16.1 Ajax技術(shù)簡介,從本質(zhì)上講，Ajax并不是一種全新的技術(shù)，Ajax只是綜合利用已經(jīng)存在的各種技術(shù)，從而誕生了一種全新的應用，在本節(jié)內(nèi)容中，將簡單介紹這種技術(shù)的誕生過程和其他相關(guān)的基本知識。,16.1.1 Web開發(fā)

2、技術(shù)演變過程,Web應用程序發(fā)展至今大體經(jīng)歷了三個階段，第一個階段使用的是簡單的靜態(tài)頁面，第二個階段使用的ASP、JSP、PHP等動態(tài)腳本語言，第三個階段是Web2.0階段，而Ajax就是Web2.0中的核心技術(shù)。（具體內(nèi)容請參照書。）,16.1.2 什么是Ajax,對于Ajax并沒有確切的定義，而且隨著Ajax被廣泛應用，現(xiàn)在Ajax所包含的范圍也更加廣泛，所有的實現(xiàn)瀏覽器與服務器異步交互的技術(shù)都可以歸入Ajax的范圍，即無需刷新當前頁面就可以實現(xiàn)與服務器的交互的技術(shù)，這種技術(shù)就是Ajax，而且Ajax也不像Java、JSP等是一種單獨的技術(shù)，Ajax是一系列技術(shù)的集合，例如在在實現(xiàn)與服務器

3、的異步通信的時候，需要用到XML、JavaScript、XMLHttpRequest等，使用這幾種技術(shù)可以實現(xiàn)與服務器的異步通信，所以，Ajax就是這幾種語言的綜合體。,16.1.3 Ajax的相關(guān)技術(shù),在上面的內(nèi)容中，介紹了Ajax是一系列技術(shù)的集合體，通過這些技術(shù)的綜合運用從而實現(xiàn)Ajax的目標，實現(xiàn)客戶端與服務器端的異步通信。（具體內(nèi)容請參照書。）,16.2 Ajax工作原理簡單示例,在本節(jié)的內(nèi)容中，將通過一個具體的例子來展示Ajax的工作原理，通過與傳統(tǒng)請求響應方式的對比，展現(xiàn)Ajax中處理請求響應的不同方式。在這個示例程序中，所要完成的任務非常簡單，僅僅需要輸入一個姓名，然后提交這個

4、表單，在服務器端處理這個請求，然后在頁面顯示處理的結(jié)果，在下面的示例程序中，將展示通過傳統(tǒng)方式和Ajax方式處理這個請求響應的具體過程。,16.2.1 傳統(tǒng)的請求響應方式,在傳統(tǒng)的請求響應方式中，是通過表單向服務器提交用戶信息，服務器端處理接收到的信息，并把處理結(jié)果返回給用戶，在這個過程中需要刷新整個頁面才能得到服務器返回的結(jié)果。（具體內(nèi)容請參照書。）,16.2.2 使用Ajax的請求響應方式,在上面的示例程序中，展示了傳統(tǒng)的請求響應處理方式，在本節(jié)中，將展示Ajax中處理請求響應的方式。在Ajax處理請求響應的方式中，不會整個頁面進行刷新，對于用戶的輸入信息，并不依靠表單來提交，而是通過XM

5、LHttpRequest對象傳遞給服務器。（具體內(nèi)容請參照書。）,16.3 XMLHttpRequest對象,XMLHttpRequest對象在Ajax中占據(jù)著十分重要的地位，Ajax中的客戶端就是通過XMLHttpRequest對象實現(xiàn)與服務器的通信，在本節(jié)內(nèi)容中將詳細介紹這個對象的基本知識。,16.3.1 XMLHttpRequest對象簡介,XMLHttpRequest對象也不是一個新的技術(shù)，這個對象最早出現(xiàn)在微軟的IE瀏覽器中，是以ActiveX組件的形式出現(xiàn)的，在當時并沒有引起開發(fā)人員太大的注意，但是在Google推出Google Map和Google Suggest產(chǎn)品以后，Aja

6、x技術(shù)以飛快的速度發(fā)展起來，而XMLHttpRequest對象又是Ajax的重要組成部分，所以XMLHttpRequest對象也開始重新受到重視。,16.3.2 創(chuàng)建XMLHttpRequest對象,在使用XMLHttpRequest對象發(fā)送請求、接收響應之前，需要創(chuàng)建這個對象，其中，在IE瀏覽器中，XMLHttpRequest對象是以ActiveX組件的形式提供的，其他瀏覽器中使用JavaScript本地方法來創(chuàng)建，所以在創(chuàng)建XMLHttpRequest對象的時候，需要對這個差別做對應的判斷和處理，下面的代碼就是創(chuàng)建XMLHttpRequest對象的通用代碼。,16.3.3 XMLHttpR

7、equest常用方法和屬性,在XMLHttpRequest對象創(chuàng)建以后，就可以在對這個對象進行各種不同的操作，從而完成和服務器的通信，接下來將介紹XMLHttpRequest對象常用的方法和屬性。open（string method,string url,boolean asynch,string name,string password）和send（content）是XMLHttpRequest對象中最常用的方法。,16.4 客戶端向服務器發(fā)送請求,在Ajax中，向服務器端發(fā)送請求使用的是XMLHttpRequest對象，在XMLHttpRequest對象成功創(chuàng)建以后，就可以通過這個對象與服

8、務器進行通信，在本節(jié)接下來的內(nèi)容中，將介紹客戶端使用XMLHttpRequest對象向服務器發(fā)送請求的基本方法。,16.4.1 使用XMLHttpRequest對象發(fā)送請求,在向服務器發(fā)送請求之前，首先使用XMLHttpRequest對象的open（string method,string url,boolean asynch,string name,string password）方法建立對服務器的調(diào)用，然后才能向服務器發(fā)送請求信息。而且在這里還需要指明在請求狀態(tài)發(fā)生改變的時候需要調(diào)用的時間處理方法。,16.4.2 常用發(fā)送請求內(nèi)容的方法,在傳統(tǒng)的Web應用中，是通過表單向服務器提交用戶的輸

9、入信息，但是這種提交方式會刷新整個頁面，在Ajax中要實現(xiàn)的就是與服務器端的異步通信，所以就不能使用表單向服務器發(fā)送請求信息，在Ajax中，可以使用下面幾種方法來向服務器發(fā)送請求的內(nèi)容。,16.5 服務器端處理用戶請求,在Ajax中，服務器接收到用戶的請求以后，可以根據(jù)請求的內(nèi)容進行相應的操作，然后把操作以合適的格式返回給客戶端，在本節(jié)內(nèi)容中，將重點介紹在服務器端對客戶請求的處理。在服務器端處理方式可以有很多種選擇，可以選擇JSP、ASP、CGI、Servlet中的任意一種作為相應客戶端請求的服務程序，在本章內(nèi)容中，將選擇Servlet實現(xiàn)服務器端邏輯處理的功能。,16.5.1 在服務器端處理

10、用戶請求,由于客戶端向服務器發(fā)送信息的時候，可以選擇多種方式進行發(fā)送，所以在服務器端就需要根據(jù)客戶端發(fā)送信息的方式，對接收到的信息進行分析，從而取出進一步操作所需要的信息。,16.5.2 返回XML格式的響應文檔,在服務器端完成用戶需要的邏輯處理以后，需要把處理的結(jié)果返回給用戶，在這種情況下，一般是把處理的結(jié)果組織成XML的格式，然后把這個XML文檔返回給客戶端。,16.6 客戶端處理服務器響應,在服務器端結(jié)束對用戶請求的處理以后，會把處理的結(jié)果返回給用戶，在客戶端的需要對返回的內(nèi)容進行處理，然后根據(jù)這些處理結(jié)果對頁面的內(nèi)容進行調(diào)整，到這一步為止，客戶端與服務器端的異步通信就完成了。在本章接下

11、來的內(nèi)容中，將介紹客戶端處理返回的響應內(nèi)容的基本方法。,16.6.1 分析XML格式的文檔,在一般情況下，服務器會用XML文檔的格式返回邏輯處理的結(jié)果，在客戶端可以通過XMLHttpRequest對象取得這個響應文檔的內(nèi)容。在JavaScript中，可以以DOM的方式分析這個XML格式的文檔，這種分析方法和一般的XML文檔的分析方法是完全相同的，在本書第八章XML基礎(chǔ)知識中已經(jīng)介紹過使用JavaScript解析XML文檔的相關(guān)知識，在這里不再贅述。,16.6.2 使用JavaScript調(diào)整頁面內(nèi)容,在對XML文檔解析結(jié)束以后，就可以根據(jù)解析的結(jié)果來調(diào)整頁面的內(nèi)容，從而把服務器的處理結(jié)果表現(xiàn)在

12、頁面上，通常情況下會使用JavaScript來完成這個任務，通過使用innerText或者innerHTML可以設置HTML頁面元素內(nèi)的顯示內(nèi)容，通過DOM操作，可以動態(tài)創(chuàng)建HTML元素，通過CSS可以控制頁面HTML元素的顯示風格，通過這些操作，可以把服務器返回的處理結(jié)果充分展現(xiàn)在頁面上，從而最終完成客戶端和服務器的異步通信、而且這種處理方式是不會對整個頁面進行刷新的。,16.6.3 客戶端處理服務器相應的示例代碼,下面的示例代碼片段中，展示了如何在客戶端處理服務器的響應信息，具體代碼片段如下所示。（具體內(nèi)容請參照書。）,16.7 Ajax典型示例,在上面的內(nèi)容中，對Ajax的基本知識進行了

13、簡單的介紹，在本章接下來的內(nèi)容中，將通過具體的示例程序展示Ajax的魅力，而且通過這些具體的示例，讀者可以體會到Ajax的具體使用方法，從而可以在自己的Web應用中添加Ajax的處理方式。,16.7.1 異步身份驗證,在傳統(tǒng)的Web應用中，用戶的身份驗證是通過向服務器提供表單，服務器對表單中用戶信息進行驗證，然后再返回驗證的結(jié)果，在這樣的處理方式中，用戶端必需等到服務器返回處理結(jié)果才能盡進行別的操作，而且在這個過程中，會刷新整個頁面。這種處理方式不僅浪費了用戶的時間，每次刷新頁面也浪費了巨大的帶寬。（具體內(nèi)容請參照書。）,16.7.2 輸入提示和自動完成,在使用Google搜索或者是Baidu

14、搜索的時候，在輸入搜索關(guān)鍵字的同時，會自動彈出匹配的其他關(guān)鍵字的提示，這種輸入提示和自動完成的功能是在Google中首先推出的，然后就在各種Web應用中被廣泛采用，在下面的示例程序中，就展示了這樣一個功能的實現(xiàn)。下面就是輸入提示和自動完成功能JSP頁面的具體代碼。（具體內(nèi)容請參照書。）,16.7.3 聯(lián)動動態(tài)列表,在We應用的開發(fā)中，經(jīng)常會遇到聯(lián)動動態(tài)列表的需求，有其是在查詢條件的選擇中，所有的下拉列表中的選項都是從數(shù)據(jù)庫中動態(tài)取出的，當選擇第一個下拉列表的時候，后面的下拉列表要以這個選擇為條件從數(shù)據(jù)庫中取出滿足條件的內(nèi)容，從而調(diào)整顯示選項的內(nèi)容。然而在傳統(tǒng)的Web開發(fā)模式中，要實現(xiàn)這樣的功能

15、是相當?shù)穆闊看握{(diào)整下拉列表的時候，都需要重新刷新整個頁面，而且在刷新頁面的時候，需要做大量的工作來保存已經(jīng)選擇列表的狀態(tài)。（具體內(nèi)容請參照書。）,16.7.4 異步輸入驗證,在Ajax中，對用戶的輸入驗證可以使用異步的形式，在用戶每項輸入完成之后，都對用戶輸入的合法行進行驗證，即時向用戶返回驗證結(jié)果，使用戶及時發(fā)現(xiàn)輸入的錯誤，及時更改輸入，而且這種驗證不會刷新整個頁面，用戶的輸入信息都會別保留，從而可以節(jié)省用戶的時間，方便用戶的使用。（具體內(nèi)容請參照書。）,16.7.5 工具條提示,在桌面應用程序中，可以給程序添加工具條提示的功能，當鼠標移到指定位置的時候，會彈出一個提示框，提示這個區(qū)域的簡單信息。（具體內(nèi)容請參照書。）,16.7.6 自動刷新,使用Ajax也可以實現(xiàn)自動刷新的功能，而且是頁面局部的刷新，這種刷新方式不會對頁面的其他部分造成影響。（具體內(nèi)容請參照書。）,16.7.7 使用DOM動態(tài)生成HTML文檔,在很多時候，在瀏覽器段，需要根據(jù)服務器的返回結(jié)果，動態(tài)生成HTML文檔，這種功能一般情況下都是采用D