AJAX 專題--體驗AJAX 知識點剖析 實例貫串各知識點實現(xiàn)AJAX

1、AJAX 專題 該專題包含以下內(nèi)容： 1 專題思路.2 體驗AJAX3 知識架構(gòu)4 實例說明5 專題總結(jié) 作者：鄺偉林 梧桐網(wǎng)絡(luò)工作室 專題思路在開始Ajax專題之前，我覺得有必要向你說明我是以怎樣的思路，怎樣的內(nèi)容來說明Ajax的，也便于你事先判斷拿你寶貴的時間來關(guān)心這個專題是否值得。    首先從要義描述Ajax，一一分析，并通過與傳統(tǒng)方式比較和一個簡單的示例，讓你對Ajax有個比較深入的感性認識    接著,詳細地講解Ajax各種主要特征，深刻地領(lǐng)悟它的要點，并提出進一步學習的建議與方法。 

2、0;  第三步，在原理的指導(dǎo)下，實現(xiàn)Ajax比較突出的功能。    最后，為我們這個專題做一番總結(jié)。    特別聲明五點：    第一，這個專題主要是Ajax+PHP+MySQL+DOM+XML方向，如果你更關(guān)注的是ASP,SQL Server,Java等，你可能需要選擇更好的資料。     第二，講解內(nèi)容絕不復(fù)制，老調(diào)重彈，而是以創(chuàng)造性激發(fā)自己，與在知識的海洋里探索的人們通過知識的紐帶促成彼此的進步。  

3、   第三：借鑒了許多優(yōu)秀的書籍和網(wǎng)絡(luò)資源，促成了我獨立地寫出這些專題的可能性，深表感謝！     第四：如果你有什么問題，有什么需要探討的，或需要更多資源，你不煩聯(lián)系我，本網(wǎng)站上你可以找到我的聯(lián)系方式。     第五，轉(zhuǎn)載是歡迎的，不過請注明是來自梧桐網(wǎng)絡(luò)。     I hope your journey through this subject will be a pleasant and useful one! Let's get

4、started. 體驗AJAXWhat's Ajax ？從以下四個方面描述：<1> Ajax:Asynchronous JavaScript and XML,異步JavaScript和XML(Ajax覆蓋面遠非只包含JS與XML),中文發(fā)音：阿賈克斯；<2>通過XMLHttpRequest對象以異步的方式向服務(wù)器發(fā)送請求；服務(wù)器返回響應(yīng)前，用戶可以繼續(xù)在原有的頁面上進行操作而無需等待；<3>使用Ajax技術(shù)，允許瀏覽器與服務(wù)器通信而無需刷新當前頁面即可實現(xiàn)無縫更新（就是無閃爍的更新信息）;<4>與其說Ajax是一門獨立的技術(shù)，不如說是一種

5、全新的技巧，它是把javasript,dom,xml,php,mysql等多種已有技術(shù)巧妙地結(jié)合起來加以全新的使用?？梢缘贸鲆赃@么幾個關(guān)鍵點：異步方式與服務(wù)器交互;    無需等待，繼續(xù)在原有頁面操作，實現(xiàn)局部更新;    多種已有技術(shù)的綜合使用關(guān)鍵點剖析，深入淺出：（1）假設(shè)你要注冊為梧桐網(wǎng)絡(luò)會員，在你輸入完用戶名后，你的取名可能已經(jīng)被別人占有，而梧桐網(wǎng)絡(luò)又要求不能出現(xiàn)同名的現(xiàn)象，這時你按提交按鈕，等待一段時間后，網(wǎng)頁返回來提示你說要重新輸入，這時你可能就會想：如果我輸完后不用提交前就知道該用戶是否存在該多好？是

6、的，這就是異步方式與服務(wù)器交互：你輸你的，你無須自己發(fā)出檢查用戶名的請求，Ajax也會以偷偷(異步)的方式幫你做這件事。Ajax是怎樣完成這件事的呢？你可以先粗粗的了解一下它工作的流程：首先你在網(wǎng)頁上觸發(fā)了某種事件，如你使輸入框失去了焦點，或點擊鼠標，或按下鍵，下載到瀏覽器的JS文件獲取該事件后就會向服務(wù)器發(fā)出請求，服務(wù)器端接受請求，進行處理后返回結(jié)果，這時，JS文件收到返回的結(jié)果，進行處理后發(fā)送給瀏覽器，瀏覽器讀取數(shù)據(jù)后顯示在用戶的顯示器上，這樣就完成了一次異步地與服務(wù)器交互的行為。你可能會納悶了：你講的是Ajax，怎么卻是JS在工作了？有這樣一個比喻不知妥不妥當：愛因斯坦是一個知名的純理論

7、物理學家，他對于他的理論如何通過實踐來改變?nèi)祟惖陌l(fā)展史絲毫不感興趣；Ajax就是這樣一種理念：首先通過JS創(chuàng)建一個XMLHttpRequest對象，這個對象可以實現(xiàn)以異步的方式向服務(wù)器發(fā)送請求，并且預(yù)先構(gòu)建一個函數(shù)，一旦服務(wù)器端返回了結(jié)果，這個函數(shù)就可以對返回的結(jié)果進行處理并提交給瀏覽器，而所有這些功能，我們就說是Ajax技術(shù)了。小結(jié)：這點從需要的角度以一個例子的方式解釋了異步的方式，以及粗粗地講了一下實現(xiàn)異步交互的流程。接下來講這種方式的特點，如何提高WEB用戶的體驗。(2)上面關(guān)于注冊用戶時的例子可以說明Ajax如何帶給了WEB用戶全新的體驗；在傳統(tǒng)的 no-Ajax的網(wǎng)頁里，你既需要明確

8、指示“檢查用戶名”是否存在，又不得不在網(wǎng)絡(luò)繁忙情況下等待一段時間才能看到結(jié)果，而在等待結(jié)果的那段時間里，你對眼下的那份網(wǎng)頁無能為力；而使用了Ajax后，你完全不用去管這件事了，因為你隨時可以看到你輸入的是否合法，不合法也絲毫不受影響，你繼續(xù)輸入就是了，直到對了為止。這時，你會發(fā)現(xiàn)頁面沒有刷新，沒有閃爍，只是看到在某一個地方(不斷地)出現(xiàn)了提示內(nèi)容，其它的都沒變化，這就是上面說的無縫更新和頁面的局部更新信息。是不是覺得Ajax有點酷呢？學完這個專題后，你可能更能感受到它酷得有多厲害！（3）剛才說到了，Ajax是把多種技術(shù)綜合起來巧妙地加以使用了，這就要求了程序員必須掌握多種技術(shù)才能用好Ajax,

9、，在這個專題里，我會把Ajax覆蓋的技術(shù)，如js+com+xmlhttprequest,php+mysql+xml,在下一章 TheFeature里一一講解，這一章的主要是加深你對Ajax的認識，以及闡明接下來我為什么要講那些知識點的原因。為了更進一步地加深對Ajax的認識，我們拿傳統(tǒng)的no-Ajax與Ajax技術(shù)進行實例比較 這個例子的目標：在輸入框中輸入用戶名，當你輸入“hello”時，系統(tǒng)會提示你該用戶名已經(jīng)存在，而其它的名稱可以用,結(jié)合上面的原理注意區(qū)分開來: 窗體頂端窗體底端窗體頂端窗體底端  從這個對比的例子可以看出三點：第一:no-ajax需要你主動發(fā)出檢查命

10、令，而Ajax則偷偷（異步）地幫你發(fā)出了檢查命令；第二：通過發(fā)出檢查命令后，no-ajax使你中斷了在原有界面的操作，雖然可以通過服務(wù)器端語言如PHP實現(xiàn)自動跳轉(zhuǎn)到原來的頁面而不必像這個例子這樣進入另外一個頁面后再返回，但同樣會出現(xiàn)頁面的全部重新加載而增大網(wǎng)絡(luò)負擔，在網(wǎng)絡(luò)繁忙的情況下還可能使網(wǎng)頁凍結(jié)，使你無法再操作，只能等待；而Ajax則沒有這個問題，它讓你隨時可以看到結(jié)果，且不會影響到你現(xiàn)在的操作，也不需要瀏覽器重新加載所有的內(nèi)容，只需要更新你看到的提示內(nèi)容，這大大減輕了網(wǎng)絡(luò)的負擔，快捷的互動有利于體升WEB用戶的體驗。而減輕網(wǎng)絡(luò)負擔，提升WEB用戶體驗，正是Ajax追求的核心所在；第三：在

11、傳統(tǒng)的觀念里面，我們認為靜態(tài)網(wǎng)頁是用戶進入后就無法發(fā)生與主機服務(wù)器或數(shù)據(jù)庫服務(wù)器的交互行為，而通過這個對比可以看到，Ajax顯示的提示內(nèi)容正是來自主機服務(wù)器，并且還可以對數(shù)據(jù)庫進行了操作(這個例子只是為了說明我們現(xiàn)在關(guān)心的問題，而并沒有從數(shù)據(jù)庫獲取數(shù)據(jù)，而實際應(yīng)用種則大多時候都需要這樣做（對于數(shù)據(jù)量小且要求不是很高的，則完全可以通過數(shù)組，普通文件或XML文件代替數(shù)據(jù)庫的一些功能）); 階段小結(jié)：TouchAjax部分主要是為了加深你對Ajax的認識，即能從感性上認識它的特點，又有必要掌握一些它的原理所在。你可能有以下幾點感受：第一：Ajax可以以異步的方式與服務(wù)器交互，從而實現(xiàn)頁面的局部內(nèi)容更

12、新信息；第二：與服務(wù)器交互時并不影響到你當前在頁面上的操作；第三：Ajax可以減輕網(wǎng)絡(luò)負擔，提升WEB用戶體驗；第四：強烈地希望從原理與實際操作上掌握Ajax技術(shù)。在接下的章節(jié)里，首先仔細剖析Ajax的實現(xiàn)的各個知識要點，再以具體的實例把所有這些知識點貫穿到實際應(yīng)用上，并附上有詳細解釋的源代碼以及實現(xiàn)的功能，你可以先體驗一下已經(jīng)實現(xiàn)的功能后再來看我講過的原理與知識點。知識架構(gòu)Now I'will show you xmlHttpRequest+JS+DOM+CSS+XML+ PHP+MySQL which are needed for grasping Ajax'core在講解

13、各個知識點之前，首先來看一下Ajax工作流程圖,以便了解各個知識點在哪些環(huán)節(jié)上發(fā)揮作用：關(guān)于這幅圖說明三點：第一：這幅圖來自一本優(yōu)秀的書籍：AJAX_and_PHP_Building_Mordern_Web_Application,作者：Bogdan Brinzarea-Iamandi；Cristian Darie；Audra Hendrix，原著，A special thanks goes out to the three illustrious authors;推薦大家查閱這本書。 第二：原圖解釋的是no-db的情況，我加了數(shù)據(jù)庫進去。 第三：圖中第七點處：returns the resu

14、lts in XML format;別認為返回的一定要是XML格式的數(shù)據(jù)，是靜態(tài)文本就行?，F(xiàn)在我們來列一張表說明各自的功能：XMLHttpRequest對象WEB用戶觸發(fā)事件后（如單擊），WEB頁面中的JS文件創(chuàng)建XMLHttpRequest對象,通過這個對象設(shè)置HTTP方法（GET,POST等）和目標URL以及請求返回后的回調(diào)函數(shù)，這個對象首先向服務(wù)器發(fā)送請求，請求返回結(jié)果前用戶繼續(xù)著開始的操作，一旦返回結(jié)果，已經(jīng)設(shè)置的回調(diào)函數(shù)就會對返回的數(shù)據(jù)進行處理，返回的數(shù)據(jù)可以是XML格式，也可以是其它滿足HTTP協(xié)議的數(shù)據(jù)格式，經(jīng)過處理后，瀏覽器可以讀取出來，顯示在當前頁面上，即通過異步的方式實現(xiàn)頁

15、面局部內(nèi)容的更新。JavaScriptAjax應(yīng)用程序是使用JavaScript編寫的，它既創(chuàng)建了XMLHttpRequest對象實現(xiàn)與服務(wù)器的異步通信，也通過使用DOM處理從服務(wù)器端返回的數(shù)據(jù)，以一定的樣式(css)顯示在當前頁面上。DOM（文檔對象模型）DOM以一組可以使用JavaScript操作的可編程對象展現(xiàn)出Web頁面的結(jié)構(gòu)。通過使用腳本修改DOM，Ajax應(yīng)用程序可以在運行時改變用戶界面，或者高效地重繪頁面中的某個部分CSS（層疊樣式表）CSS為Web頁面元素提供了一種可重用的可視化樣式的定義方法。它提供了簡單而又強大的方法，以一致的方式定義和使用可視化樣式。在Ajax應(yīng)用中，用戶

16、界面的樣式可以通過CSS獨立修改XML(可擴展性標記語言)它存儲在服務(wù)器端，當接到請求時，它可以通過HTTP方式傳輸，XMLHttpRequest創(chuàng)建的回調(diào)函數(shù)一旦接受到HTTP返回信號時，通過DOM對XML文檔要素標簽以對象的方式獲取數(shù)據(jù)，并轉(zhuǎn)化成瀏覽器可解釋的文本格式顯示在用戶的頁面上。PHP它存儲在服務(wù)器端，接到請求命令后被執(zhí)行，并可以生成普通文本格式數(shù)據(jù)，XML格式數(shù)據(jù)，還可以負責從數(shù)據(jù)庫調(diào)用數(shù)據(jù)，處理完后以HTTP方式傳輸。MySQL(數(shù)據(jù)庫)MySQL收到PHP引擎請求指令后返回數(shù)據(jù)?，F(xiàn)在更為詳細地講解它們是如何協(xié)同工作實現(xiàn)Ajax的。(一)XMLHttpRequest對象從上面的

17、分析可以看出XMLHttpRequest對象對于Ajax技術(shù)的重要性了吧？它是Ajax的核心所在。它是如何創(chuàng)建的呢？它有哪些屬性與方法呢？它的工作流程是怎樣的呢？下面一一講解。XMLHttpRequest創(chuàng)建方法XMLHttpRequest被當今大多數(shù)瀏覽器所支持，但各自的創(chuàng)建方式有所不多，以下是一種萬無一失的跨瀏覽器創(chuàng)建方案： var xmlHttp;function CreateXmlHttpObject()var xmlHttp=null;try / Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); catch (e) /

18、 Internet Explorer try xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); catch (e) xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); return xmlHttp; XMLHttpRequest屬性與方法屬性表：onreadystatechange每個狀態(tài)改變時都會觸發(fā)這個事件處理器，通常會調(diào)用一個JavaScript函數(shù) onreadystatechange屬性是一個事件處理，當 狀態(tài)（ 表示處理過程處于什么特定的階段）改變時觸發(fā)特定的

19、代碼段或函數(shù)。例如，有些函數(shù)是在表單初始化時調(diào)用的，還有一些功能是在狀態(tài)改變成complete時啟動的readyState請求的狀態(tài)。有5個可取值：0 = 未初始化，1 = 正在加載，2 = 已加載，3 = 交互中，4 = 完成 readyState屬性詳細描述了當前請求處于過程的哪個階段。這 個屬性對于異常處理是十分有用的，并且在決定何時執(zhí)行特定操作時也很重要。可以使用該屬性來創(chuàng)建基于請求處理進程的操作。例如，可以使一段代碼在readyState為載入中時開始執(zhí)行，直到值為完成時結(jié)束responseText服務(wù)器的響應(yīng)，表示為一個串; 當請求執(zhí)行后，就將返回responseText屬性。如果

20、是向某種腳本發(fā)送一個請求，那么該腳本的輸出就將通過該屬性返回。通常會將該屬性的值復(fù)制給某個元素的innerHTML屬性，從而異步地在頁面元素中載入一個腳本或文檔。responseXML服務(wù)器的響應(yīng)，表示為XML。這個對象可以解析為一個DOM對象工作機制與responseText類似，不過返回的響應(yīng)是XML格式，如果打算使用瀏覽器內(nèi)建的XML處理功能，它是個理想的選擇。status服務(wù)器的HTTP狀態(tài)碼（200對應(yīng)OK，404對應(yīng)Not Found（未找到），等等）該屬性指明了請求返回的響應(yīng)代碼（常見的響應(yīng)代碼見表21）。例如，如果請求的文件找不到，則該屬性就會設(shè)置為404以表示文件未找到。st

21、atusTextHTTP狀態(tài)碼的相應(yīng)文本（OK或Not Found（未找到）等等）該屬性是status屬性的文本表述。如果status屬性的值是404，那么statusText的值就將是Not Found。同時使用status和statusText屬性，能夠讓用戶更深入地了解發(fā)生了什么。畢竟并不是所有用戶都知道數(shù)字404表示的是什么。 方法表：abort()abort方法非常簡單，就是停止當前正發(fā)送的請求。通過該函數(shù)就能夠很簡單地控制連接的時間長度。如果希望明確地規(guī)定請求發(fā)送的時間，可以通過abort方法來提前結(jié)束請求。getAllResponseHeaders()把HTTP請求的所有響應(yīng)首部

22、作為鍵/值對返回;可以通過該方法來獲取傳送的所有HTTP報頭getResponseHeader("header")返回指定首部的串值;可以通過該方法來獲取特定報頭的內(nèi)容。這對于要查詢部分報頭信息時很有用，因為所有報頭信息將是一個很大的字符串 。 例如 ， 要查詢所請求的文檔大小 ， 只需調(diào)用getResponseHeader ("ContentLength");以下就是一個報頭集的示例：Date: Sun, 13 Nov 2005 22:53:06 GMTServer: Apache/2.0.53 (Win32) PHP/5.0.3XPoweredBy:

23、PHP/5.0.3ContentLength:527KeepAlive:timeout=15, max=98Connection: KeepAliveContentType:text/htmlvoid open(string method, string url, boolean asynch, string username, string password)這個方法會建立對服務(wù)器的調(diào)用。它有兩個必要的參數(shù)，還有3個可選參數(shù)。要提供調(diào)用的特定方法（GET、POST或PUT），還要提供所調(diào)用資源的URL。另外還可以傳遞一個Boolean值，指示這個調(diào)用是異步的還是同步的。默認值為true，表示

24、請求本質(zhì)上是異步的。如果這個參數(shù)為false，處理就會等待，直到從服務(wù)器返回響應(yīng)為止。由于異步調(diào)用是使用Ajax的主要優(yōu)勢之一，所以倘若將這個參數(shù)設(shè)置為false，從某種程度上講與使用XMLHttpRequest對象的初衷不太相符。最后兩個參數(shù)不說自明，允許你指定一個特定的用戶名和密碼。send(content)向服務(wù)器發(fā)送請求;這個方法完成向服務(wù)器發(fā)送請求。如果該請求是異步發(fā)送的，那么立刻返回響應(yīng)；如果不是異步模式則要等到響應(yīng)收到后才返回。也可以指定一個輸出字符串作為參數(shù)，它對于表單的處理是很有幫助的，它能夠用來傳遞表單元素的值?？蛇x參數(shù)可以是DOM對象的實例、輸入流，或者串。傳入這個方法的

25、內(nèi)容會作為請求體的一部分發(fā)送setRequestHeader(string header, string value)這個方法為HTTP請求中一個給定的首部設(shè)置值。它有兩個參數(shù)，第一個串表示要設(shè)置的首部，第二個串表示要在首部中放置的值,這個值作為串返回。需要說明，這個方法必須在調(diào)用open()之后才能調(diào)用。 操作XMLHttpRequest對象的基本流程為：首先是用前面的代碼段創(chuàng)建該對象 xmlHttp接著編寫從網(wǎng)頁中調(diào)用的函數(shù)，如：checkUser(txt)：function checkUser(txt) var xmlHttp=createXMLHttpObject(); xmlHttp

26、.open("GET",url,true);/向服務(wù)器發(fā)送連接 xmlHttp.onreadystatechange=handleResponse;/請求狀態(tài)發(fā)生時調(diào)用處理函數(shù)， /注意這個函數(shù)沒有參數(shù)和"()" xmlHttp.send(null);/開始發(fā)送請求。再編寫處理返回數(shù)據(jù)的函數(shù) handleResponse()function handleResponse() if(xmlHttp.readyState=4)/4表示請求已經(jīng)發(fā)送完畢 if(xmlHttp.status=200) /服務(wù)器的HTTP狀態(tài)碼，200表示可以傳輸 /在這里調(diào)用DO

27、M，做你想做的事情，處理的結(jié)果就會局部更新網(wǎng)頁內(nèi)容。 DOM and XML<一>DOM.文檔對象模型。定義：DOM是HTML與XML的應(yīng)用編程接口（API），它將整個頁面映射為一個由層次節(jié)點組成的文件?？梢赃@樣理解： DOM 將 HTML與XML 頁面表示為一棵樹，就像你描繪的“家譜樹”一樣。頁面上的每個元素在 DOM 中都是一個節(jié)點，每個節(jié)點都帶有分枝，連到自己直接包含的元素（其子元素）以及直接包含自己的元素（其父元素）；JavaScript 可以訪問這個模型中的所有信息;這樣就可以對這些結(jié)構(gòu)進行樣式化，提取數(shù)據(jù)或其它操作。關(guān)鍵點：有了DOM，我們就可以用JS很有針對性地對頁面

28、文檔進行操作。關(guān)于DOM的重要的知識點：DOM元素屬性childNodes返回當前元素所有子元素的數(shù)組firstChild返回當前元素的第一個下級子元素nextSibling返回緊跟在當前元素后面的元素nodeValue指定表示元素值的讀/寫屬性parentNode返回元素的父節(jié)點previousSibling返回緊鄰當前元素之前的元素DOM元素遍歷用方法：getElementById(id)獲取有指定惟一ID屬性值文檔中的元素getElementsByTagName(name)返回當前元素中有指定標記名的子元素的數(shù)組hasChildNodes）返回一個布爾值，指示元素是否有子元素getAtt

29、ribute(name)返回元素的屬性值，屬性由name指定動態(tài)創(chuàng)建內(nèi)容時所用的DOM屬性和方法document.createElement(tagName)文檔對象上的createElement方法可以創(chuàng)建由tagName指定的元素。如果以串div作 為方法參數(shù)，就會生成一個div元素document.createTextNode(text)文檔對象的createTextNode方法會創(chuàng)建一個包含靜態(tài)文本的節(jié)點 .appendChild(childNode)appendChild方法將指定的節(jié)點增加到當前元素的子節(jié)點列表（作為一個新的子節(jié)點）。例如，可以增加一個option元素，作為sele

30、ct元素的子節(jié)點.insertBefore(newNode, targetNode)這個方法將節(jié)點newNode作為當前元素的子節(jié)點插到targetNode元素前面.removeAttribute(name)這個方法從元素中刪除屬性name .removeChild(childNode)這個方法從元素中刪除子元素childNode.replaceChild(newNode, oldNode)這個方法將節(jié)點oldNode替換為節(jié)點newNodeXML 定義：XML，即：Extensible Markup Language（可擴展的標記語言）。XML是一套定義語義標記的規(guī)則，這些標記將文檔分成許多

31、部件并對這些部件加以標識。它也是元標記語言，即定義了用于定義其他與特定領(lǐng)域有關(guān)的、語義的、結(jié)構(gòu)化的標記語言的句法語言。關(guān)鍵點：HTML定義了一套固定的標記，而XML可以自行定義這些標記。示例：<?xml version="1.0" encoding="UTF-8"?> /這行告訴解析器和瀏覽器，這個文件應(yīng)該按照XML的規(guī)則進行解析<books> <book> <isbn>7-111-2568-3/AP.4028</isbn> <name>圍城</name> <aut

32、hor>錢鐘書</author> </book> <book> <isbn>11-111-15470-3/CP.4028</isbn> <name>三國演義</name> <author>羅貫中</author> </book> <book> <isbn>55-871-15470-3/BP.4028</isbn> <name>千年智慧書</name> <author>巴爾塔沙-葛拉西安</au

33、thor> </book></books>這里列出的都是DOM XML比較重要的知識點，目的在于給你一個大體感受。正如前面交待的那樣，你需要查閱更為系統(tǒng)的資料來掌握DOM XML。我在這里就不贅述他們各自的詳細的語法了它們各自在Ajax中的功能在前面已有交待了，這里也不再贅述了。 實例講解Now,let's conbine all the elements by showing a DEMO.現(xiàn)在我們把前面講到的XMLHttpRequest+JS+CSS+DOM+XML+PHP+MySQL通過實現(xiàn)一個具體功能把它們聯(lián)合起來用目標：在輸入框中輸入字符時，如果

34、與數(shù)據(jù)庫中數(shù)據(jù)的前幾位相同，則把這個數(shù)據(jù)顯示出來,如果無法滿足條件，則不顯示任何新的信息。（表面看起來的效果就像你在GOOGLE搜索時的那樣。）示例說明：這個例子是模仿查找書籍，需要用到的文件有：  webUser.htm用戶操作的頁面，負責引入JS文件，表單輸入，指定更新的信息所在區(qū)域。  request.js異步發(fā)送請求，以及對響應(yīng)數(shù)據(jù)進行處理和指定更新的信息顯示方式，其中包含MLHttpRequest+DOM+CSS;  response.php服務(wù)端操作，包含從數(shù)據(jù)庫中取回請求數(shù)據(jù)，并把這些數(shù)據(jù)以XML格式返回，需要：PHP+

35、MySQL+XML我們來看一下最終效果：（這只是個示例，數(shù)據(jù)庫僅有五本書：三國演義，三國志，三重門，千年一嘆，千年智慧書。）窗體頂端請輸入你要查找的書籍名稱：開始：<一>首先在MySQL里建立一張表：book_tb(實際應(yīng)用中還有更多的字段包含更多的信息)book_idtitle1三國演義2三國志3三重門4千年一嘆5千年智慧書<二>webUser.htm:(主體內(nèi)容) <script language=javascript src=request.js><script><form><input type=text size=15

36、 maxlength=10 onkeyup="search(this.value);"></form> <table><tbody id="showHere"></tbody></table><二>request.js: /首先創(chuàng)建XMLHttpRequest對象，創(chuàng)建方法與前同，這里不再顯示。 function search(title) xmlHttp=GetXmlHttpObject(); if (xmlHttp=null) alert ("Browser do

37、es not support HTTP Request") return url="response.php" url=url+"?title="+title; url=url+"&sid="+Math.random(); xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange=stateChanged; xmlHttp.send(null); /這里的解釋你可以查看前面講過的。 function stateChanged() if (xm

38、lHttp.readyState=4) if(xmlHttp.status=200) clearResults(); /不滿足要求時需要把已有的數(shù)據(jù)清除 xmlResults();/對回調(diào)的數(shù)據(jù)進行處理，注意這兩個函數(shù)調(diào)用的順序不能反過來 function clearResults() var tBody = document.getElementById("showHere"); tBody.removeChild(tBody.childNodes0); function xmlResults() var results = xmlHttp.responseXML;/獲取從服務(wù)器返回來的XML格式數(shù)據(jù) var books = null; var title= "" var books=results.getElementsByTagName("book"); for(var i=0;i<books.length;i+) title=booksi.firstChild.nodeValue; domTitle(title);/使用DOM對數(shù)據(jù)進行處理