系統 - Web 2.0中AJAX技術應用詳解

[psac]

今年互連網上比較火熱的話題當然是關於WEB2.0的應用，其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的縮寫。 它並不是一門新的語言或技術，它實際上是幾項技術按一定的方式組合在一在同共的協作中發揮各自的作用，它包括：使用XHTML和CSS標準化呈現；使用DOM實現動態顯示和交互；使用XML和XSLT進行資料交換與處理；使用XMLHttpRequest進行異步資料讀取；最後用JavaScript綁定和處理所有資料。

　　Ajax的工作原理相當於在用戶和服務器之間加了—個中間層，使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端，利於客戶端閒置的處理能力來處理，減輕服務器和帶寬的負擔，從而達到節約ISP的空間及帶寬租用成本的目的。

　　我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應用：

　　(1)用文本字元串的方式返回服務器的響應來驗證網易通行證帳號是否存在；

　　(2)以XMLDocument對像方式返迴響應來驗證金山通行證帳號是否存在；

　　首先，我們需要用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求， XMLHttpRequest 類首先由Internet Explorer以ActiveX對像引入，被稱為XMLHTTP。 後來Mozilla﹑Netscape﹑Safari 和其他瀏覽器也提供了XMLHttpRequest類，不過它們創建XMLHttpRequest類的方法不同。

　　對於Internet Explorer瀏覽器，創建XMLHttpRequest 方法如下：

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");

　　由於在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致，為了更好的相容不同版本的Internet Explorer瀏覽器，因此我們需要根據不同版本的Internet Explorer瀏覽器來創建XMLHttpRequest類，上面代碼就是根據不同的Internet Explorer瀏覽器創建XMLHttpRequest類的方法。

　　對於Mozilla﹑Netscape﹑Safari等瀏覽器，創建XMLHttpRequest 方法如下：

xmlhttp_request = new XMLHttpRequest();

　　如果服務器的響應沒有XML mime-type header，某些Mozilla瀏覽器可能無法正常工作。 為了解決這個問題，如果服務器響應的header不是text/xml，可以調用其它方法修改該header。

xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');

　　在實際應用中，為了相容多種不同版本的瀏覽器，一般將創建XMLHttpRequest類的方法寫成如下形式：

try{
　if( window.ActiveXObject ){
　　for( var i = 5; i; i-- ){
　　　try{
　　　　if( i == 2 ){
　　　　　xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
　　　　}else{
　　　　　xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
　　　　}
　　　xmlhttp_request.setRequestHeader("Content-Type","text/xml");
　　　xmlhttp_request.setRequestHeader("Content-Type","gb2312");
　　　break;
　　}
　　catch(e){
　　　xmlhttp_request = false;
　　}
　}
}else if( window.XMLHttpRequest ){
　xmlhttp_request = new XMLHttpRequest();
　if (xmlhttp_request.overrideMimeType) {
　　xmlhttp_request.overrideMimeType('text/xml');
　}
}
}catch(e){ xmlhttp_request = false; }

　　在定義了如何處理響應後，就要發送請求了。可以調用HTTP請求類的open()和send()方法，如下所示：

xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null);

　　open()的第一個參數是HTTP請求方式—GET，POST或任何服務器所支持的您想調用的方式。 按照HTTP規範，該參數要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。

　　第二個參數是請求網頁面的URL。

　　第三個參數設置請求是否為異步模式。如果是TRUE，JavaScript函數將繼續執行，而不等待服務器響應。這就是"AJAX"中的"A"。

[psac]

Web開發者不會注意到由 「AJAX（Asynchronous JavaScript And XML）」所帶來的激情。不費力氣就能創建像Google Suggest那樣的智慧式網站或者像Gmail那樣基於Web的應用程式，這在很大程度上要歸功於這種技術。 然而，伴隨著AJAX應用程式的發展，我們發現了它的一些不足之處，我們發現它的安全漏洞也在逐漸變大，就像慢慢地把基於AJAX的站點放入了一顆定時炸彈中。

　　AJAX的好處

　　在當年「Web應用程式」的美好時代，事情非常簡單。你填寫了一個表單，點擊「提交」按鈕，然後當前螢幕就消失了，等待一小會兒後你就轉入到了下一個網頁面。今天的狀況已經不是這樣的了，用戶需要的是一種就像任何桌面應用程式那樣流暢、快捷和人性化的Web體驗。

　　AJAX經常是和DHTML（Dynamic HTML）一起協作的，它的順利執行需要允許網頁中的JavaScript代碼和web服務器在後台無縫通訊。比方說，當你開始在Google Suggest的搜索框中輸入東西時，web網頁面就和服務器在後台開始交換資料，然後會給出一些你可能需要的詞條等。所有的這一切都不需要網頁面重新整理或者按下任何按鈕。同樣這也就是像Gmail那樣的應用程式怎麼能對實時拼寫檢查做的那麼好的原因。

　　AJAX怎樣工作

　　AJAX複雜的原理已經超出了今天所要闡述的範圍，這裡只簡單描述一下。你的網頁面上的JavaScript代碼能夠在不依賴於用戶的情況下和你的Web服務器取得聯繫。這裡面起核心作用的就是JavaScript的XMLHttpRequest對象，這個對象能夠被就像用戶敲擊鍵盤或者時鐘事件在後台或者異步觸發（也就是術語異步JavaScript和XML）。

　　如果你在Google Suggest中輸入「ajax」後，就會得到像我輸入後得到的服務器請求一樣：

　　1. http://www.google.com/complete/searc...&js=true&qu=aj
　　2. http://www.google.com/complete/searc...js=true&qu=aja
　　3. http://www.google.com/complete/searc...s=true&qu=ajax

　　在這個術語中的XML部分有一點會引起人們的誤解，其實這一部分是沒有任何意義的。它是從JavaScript對像得來的名字，同時許多AJAX風格的應用程式使用了XML，這個對象能夠就任何事務向服務器發出一個請求。甚至JavaScript代碼本身也能夠被取回和評估。繼續完成我的輸入「ajax example」，將會從Google的服務器產生下面的回應：

sendRPCDone(frameElement, "ajax example", new Array("ajax example", "ajax examples"), new Array("153,000 results", "177,000 results"), new Array(""));

　　這將會給你一些關於強大的AJAX的暗示吧，它具有在執行中（on the fly）把新的JavaScript代碼加入到瀏覽器中的能力。然而，最優化的方法看起來好像束縛了XML協定。舉個例子說明一下，比如Google產生了下面的這個東西：

ajax example
153,000
ajax examples
177,000

　　顯然，你可以在一個合適的表單中解釋這些XML資料，但我們要感謝JavaScript，它確實能夠在一些非常典型的限制條件下和大量討厭的IE bug環境裡非常好的處理XML對象。

　　為了幫助你理解一些Ajax的問題，我在這裡給你介紹一個假想的旅行公司－「時代尖端旅行公司」。由於受到AJAX bug的推動，他們的主要web開發者Max Uptime為了創建一個這樣的應用程式，他決定混合使用AJAX，這樣，他走在時代尖端了。

　　AJAX的問題

　　半數以上的AJAX安全風險來自隱含在服務器中的漏洞。顯然，使用安全編碼技術的好的設計，對於更安全的AJAX大有幫助，我們需要感謝Max熟悉開放萬維網應用安全計劃（the Open Web Application Security Project - OWASP）排名前十的最嚴重web應用程式安全漏洞列表（http://www.owasp.org）。不幸的�...��的因素：

　　1.新的技術：如果Max想把他的站點連接到一個SQL資料庫，他在Google查到了數百萬的例子。AJAX技術，不管這種技術有多年輕，它仍然是出現在採購循環中相對較早的，儘管它只有很少一部分好的例子出現在網路上。為了解決一些難處理的和不必要的複雜問題，這就要求像Max那樣的開發者去自主開發。Max也就不得不編寫服務器端和客戶端的代碼，創建他自己不太確定的協議（特別是對服務器響應來講）。不管這些協議有多好，都將會及時表現在網頁面上。

　　2.非傳統方式的設計：AJAX有一點點不同於傳統設計方式，因為這樣的應用程式是半客戶端半服務端的。在Max的例子裡，他是唯一的開發者，所以他為服務端和客戶端都能夠進行編碼。在同一時間使用兩種不同的語言（特別是在早期階段）進行開發將會產生一些初級的編碼錯誤，因為他要在兩端來回跳躍，對一端來講非常好，但可能在另一端不能夠勝任。即使Max有一個大的開發團隊，安全編碼責任也可能在服務端和客戶端開發小組之間代碼移交的時候發生問題。

　　3.太多的腳本語言：Max憑借他自己的聰明才智決定建立世界上最優秀的旅行登記工具。你從輸入你現在的位置（通過郵政編碼、電話區號或者GPS等等）開始登記，這時候一個AJAX請求就會被立即發送來確定你確切的位置。從那時候開始，螢幕上就會填入你所有可以利用的旅行方式，這一切甚至都是在你決定你想要去什麼地方、你打算什麼時候動身和你打算和誰一同去之前就完成的。 這個螢幕上的單元格和控件都充滿了AJAX驅動，服務器端和客戶端的腳本可能需要超過20個不同的服務器調用。你可以想像一個很小的個體服務器程式，比如findairportsbylocation.aspx 或者 determinemaxbaggageallowancebyairline.php.
　　
　　顯而易見，如果沒有Max的仔細計劃（比如創建多功能的「重載」JavaScript函數和服務器腳本），每一次設計他都需要創建超過40個獨立的部分。更多的編程意味著會產生更多的錯誤和bug，意味著需要更多的時間去編寫、管理、測試和更新代碼。不僅如此，因為在客戶端的JavaScript代碼中應用了大量的這種腳本，他們在正式的程式測試中也容易變得很健忘。

　　4.確定小部分的AJAX不會引起危害：這個站點是一個計劃出行的站點，但是Max考慮的是它將立刻為你提供一個顯示精確位置的衛星視圖，並且把你所要到達目的地的天氣情況也提供給你。AJAX最大的誘惑之一看起來好像是直到最後一刻它還在進行其它的操作，就像一個講解員在那裡解說一樣，為了AJAX使用了AJAX。當Max開始嘗試他的新想法時，他會逐漸嘗試增加更多新的功能，完全忽視測試的需要。

[psac]

Ajax並不神秘：揭下各種Ajax控件和類庫的小褲衩

Ajax控件和類庫現在真的太多了，不知不覺中增加了Ajax的神秘性和複雜性，看到版內很多人為此費解和傷神，決定發此貼談談本人對Ajax的觀點，希望能讓大家對Ajax有一個本質的認識。

觀點一：Ajax和服務器端技術毫不相關

嚴格的說，與傳統web開發相比，Ajax是完完全全的客戶端技術。由於很多控件封裝了客戶端和服務器端的通信過程，因此很多問題也因通信而起。事實上，不論何種Ajax技術，服務器端都是返回的一個純文本流，再由客戶端來處理這個文本。這段文本可以是xml格式，也可以是一個Html片段，也可以是一段JavaScript腳本，或者僅是一個字元串。服務器端僅僅是作為一個資料接頭，客戶端使用XMLHttpRequest對像來請求這個網頁面，服務器端在網頁面內寫入結果文本，這個過程和普通的web開發沒有任何區別。所不同的只是，客戶端在異步獲取結果後，不是直接顯示在網頁面，而是由客戶端的Javascript腳本處理後再顯示在網頁面。至於各種控件所謂的能返回DataSet對象，Date對象，或者其他的資料類型，都是封裝了這個處理過程的結果。

觀點二：DOM模型是Ajax最本質的技術

之所以沒有把XMLHttpRequest列為最本質的技術，因為本人覺得它實在是太簡單了，它只是可以讓瀏覽器在後台請求一個網頁面，並將其內容交給JavaScript處理。真正的核心應該是：DOM模型，即文檔對像模型。在DOM模型裡，Html標記都被認為是一個對象，例如：div對象，table對像等等。DOM模型就規定了這些對像所具有的內容、方法和事件。通過這些性質，可以對一個已經顯示於瀏覽器的網頁面進行內容的修改，例如增加節點、修改節點位置，刪除節點等等。而不僅僅是一個innerHTML內容這麼簡單，雖然這是一個很有用的內容。

觀點三：在使用Ajax控件前理解它們的實現

使用Ajax控件的確可以提高效率，但如果你空中樓閣般使用控件，那就得不償失了。從一個控件換到另外一個控件又會有一個漫長的學習曲線。所以應該從底層瞭解其，況且Ajax實在不是什麼高深的技術。其實任何東西的最底層其實都是簡單的，但如果封裝了這些底層的東西，事情會變得複雜和難以理解。以Asp.net為例，它的定制特性可以使得只要在方法前加上[ajax method]類似這樣的標誌就可以稱為一個異步方法，相信這使得Asp.net的Ajax開發顯得更加「高效」或者是「神秘」，而更多的事情則被封裝了。同樣記住一條，任何對服務器端的請求僅僅是返回純文本，我們不一定要依賴於封裝好的處理過程，而完全可以自己來實現。

觀點四：學好JavaScript

在大多數人看來，JavaScript總不是那麼一種正規的語言，隨便copy一段就碰巧能執行，學過c之類的人，一看也能看懂，而且在瀏覽器中常常有腳本錯誤提示，所以潛意識覺得總不能付之以大任。事實上，要學好Ajax，這就完全是一種錯誤的看法。javascript作為一種腳本語言，其語法的確不是很嚴格，但並不妨礙其完成諸多複雜的任務，沒有JavaScript，就沒有Ajax。所以本人強烈建議，學Ajax前，一定要好好研究一番JavaScript，一般來講，如果能順利看懂prototype框架的代碼（如：prototype-1.3.1.js），你的JavaScript水平就基本過關了。同時對DOM模型也可以算有一個基本的瞭解。

觀點五：Ajax點綴：CSS

用JavaScript控制CSS其實很簡單，基本上每個DOM對象都有一個style對象，只要把css內容裡的"-"去掉，並讓隨後的字母變為大寫就可以作為內容使用了，例如：element.style.backgroundColor="#f00";在css是：選擇符 {background-color:#f00}

一口氣說這麼多，希望對大家有點用處^_^

[psac]

什麼是Ajax?
Ajax的定義
Ajax不是一個技術，它實際上是幾種技術，每種技術都有其獨特這處，合在一起就成了一個功能強大的新技術。Ajax包括:
XHTML和CSS
使用文檔對像模型(Document Object Model)作動態顯示和交互
使用XML和XSLT做資料交互和操作
使用XMLHttpRequest進行異步資料接收
使用JavaScript將它們綁定在一起
傳統的web應用模型工作起來就像這樣:大部分界面上的用戶動作觸發一個連接到Web服務器的HTTP請求。
服務器完成一些處理---接收資料，處理計算，再訪問其它的資料庫系統，最後返回一個HTML網頁面到客戶端。這是一個老套的模式，自採用超文本作為web使用以來，一直都這樣用, 但看過《The Elements of User Experience》的讀者一定知道，是什麼限制了Web界面沒有桌面軟件那麼好用。
http://www.dvbbs.net/ShowImg.asp?p=/...9410it23_1.png
圖1: 傳統Web應用模型(左)與Ajax模型的比較(右).這種舊的途徑讓我們認識到了許多技術，但它不會產生很好的用戶體驗。當服務器正在處理自己的事情的時候，用戶在做什麼?沒錯，等待。每一個動作，用戶都要等待。
很明顯，如果我們按桌面程式的思維設計Web應用，我們不願意讓用戶總是等待。當界面載入後，為什麼還要讓用戶每次再花一半的時間從服務取資料?實際上，為什麼老是讓用戶看到程式去服務器取資料呢?
Ajax如何不同凡響
通過在用戶和服務器之間引入一個Ajax引擎，可以消除Web的開始-停止-開始-停止這樣的交互過程. 它就像增加了一層機制到程式中，使它響應更靈敏，而它的確做到了這一點。
不像載入一個網頁面一樣，在會話的開始，瀏覽器載入了一個Ajax引擎---採用JavaScript編寫並且通常在一個隱藏frame中。這個引擎負責繪製用戶界面以及與服務器端通訊。Ajax引擎允許用異步的方式實現用戶與程式的交互--不用等待服務器的通訊。所以用戶再不不用打開一個空白視窗，看到等待游標不斷的轉，等待服務器完成後再響應。
http://www.dvbbs.net/ShowImg.asp?p=/...3610it23_2.png
圖 2: 傳統Web應用的同步交互過程(上)和Ajax應用的異步交互過程的比較(下).通常要產生一個HTTP請求的用戶動作現在通過JavaScript調用Ajax引擎來代替. 任何用戶動作的響應不再要求直接傳到服務器---例如簡單的資料校驗，記憶體中的資料編輯，甚至一些網頁面導航---引擎自己就可以處理它. 如果引擎需要從服務器取資料來響應用戶動作---假設它提交需要處理的資料，載入另外的界面代碼，或者接收新的資料---引擎讓這些工作異步進行，通常使用XML, 不用再擔誤用戶界面的交互。

[psac]

用AJAX開發智慧式Web應用程式之基礎篇

　　一. 什麼是AJAX?

　　這個名字代表了異步JavaScript＋XMLHTTPRequest，並且意味著你可以在基於瀏覽器的JavaScript和服務器之間建立套接字通訊。其實AJAX並不是一種新技術，而是已經成功地用於現代瀏覽器中的若幹成功技術的可能性組合。所有的AJAX應用程式實現了一種「豐富的」UI——這是通過JavaScript操作HTML文檔對像模型並且經由XMLHttpRequest實現的精確定位的資料檢索來實現的。典型的示例AJAX應用程式是Google Labs(http://labs.google.com)的Google Maps和Google Suggest。這些應用程式現場監視用戶輸入並且提供實時的網頁面更新。最重要的是，在用戶通過地圖導航或輸入一個查找字元串的同時，這些事件不需要重新整理網頁面。

　　事實上，支持這些令人感到驚訝的應用的技術已經出現一段時間了，儘管它們要求複雜的技能以及使用瀏覽器的技巧。一些專利產品就提供了相似的能力——如Macromedia Flash插件，Java Applets或.NET執行時——在達到實用上已經有一段時間了。把一種可與服務器通話的腳本元件引入到瀏覽器中的思想早在IE 5.0中就已經存在。Firefox和其它流行的瀏覽器也加入到瀏覽器大軍中並以一種內置對像形式支持XMLHTTPRequest。隨著跨平台瀏覽器的出現，這些技術得到了認可並在2004年3月一家稱為Adaptive Path的公司中正式提出了AJAX。

　　簡而言之，由於來自於Google的支持和安裝了一點可用的瀏覽器技術，加上為了一種"更好的用戶體驗"，每個人都在把客戶端技術新增到Web應用程式上。

　　二. AJAX與傳統應用程式的區別

　　一個傳統Web應用程式模型實際上是一種基本的事件——用戶被迫提交表單以實現網頁面交換。也就是說，表單提交和網頁面傳送無法得到保證：還有更壞的情形——用戶需要再次點擊。這與AJAX截然不同-——資料跨過線路而不是完整的HTML網頁面傳輸。這種資料交換是經由特定的瀏覽器對像：XMLHttpRequest實現的；再由適當的邏輯來處理每個資料請求的結果，網頁面的特定區域而不是完整的網頁面被更新。結果是更快的速度，更少的擁擠和更好的訊息傳送控制。

　　傳統型"click-refresh"Web應用程式強迫用戶中斷工作過程而等待網頁面的重裝。通過引入AJAX技術，一個客戶端腳本能夠異步地與服務器通話，而用戶仍能保持輸入資料。除了對用戶透明之外，這樣的異步意味著服務器可以有更多時間來處理請求。

　　傳統Web應用程式把所有的處理代理到服務器並且強迫服務器進行狀態管理。AJAX允許靈活劃分應用程式邏輯以及客戶和服務器之間的狀態管理。這就消除了一種"click-refresh"依賴性並且提供更好的服務器可伸縮性。當該狀態存儲在客戶端，你就不必跨越服務器來維持會話或儲存/結束狀態-其使用期限是由客戶端來定義的。

　　三. AJAX——分佈式的MVC

　　儘管AJAX應用程式依靠JavaScript來實現描述層，然而處理能力和知識庫仍然存在於服務器上。此時，AJAX應用程式大量的與J2EE服務器通訊——把資料輸入/輸出Web服務和servlets。具有基於AJAX的描述層的J2EE應用程式和標準J2EE應用程式之間的區別首先在於，MVC是通過線路分佈的。通過使用AJAX，視圖是本機的，而模型和控制器是分佈式的——這使得開發者能夠靈活地決定哪些部件會是基於客戶端的。具體地說，本機視圖通過巧妙地操作HTML DOM而產生圖形；控制器局部地處理用戶輸入並且根據開發者的判斷擴展到服務器的處理——經由HTTP請求(Web服務，XML/RPC或其它)實現；模型的遠端部分是根據客戶端需要而下載的以達到實時更新客戶端網頁面；並且狀態是在客戶端收集的。

　　在以後的AJAX文章中，我們將比較深入地討論這裡的每一種元件並提供有關它們聯合在一起進行應用的示例。現在，先不多說，讓我們詳細地分析一個簡單的AJAX示例。

　　四. 郵政區號校驗和查詢

　　我們將創建一個包含三個INPUT字段（Zip，City和State）的HTML網頁面。我們將保證，只要用戶輸入郵政區號的前三個數位，該網頁面上的字段就會用第一個匹配的狀態值填充。一旦用戶輸入了所有五位郵政區號數，我們將立即決定和填充相應的城市。如果郵政區號無效（在服務器的資料庫沒有找到），那麼我們將把郵政區號的邊界設置為紅色。這樣的可視化線索有助於用戶並且在現代瀏覽器中已經成為一種標準（作為一實例，當Firefox找到一個HTML網頁面中的匹配關鍵字時，它會高亮與你在瀏覽器查找域輸入的內容一致的部分）。

　　讓我們首先創建一個簡單的包含三個INPUT字段的HTML：zip，city和state。請注意，一旦一個字元輸入進郵政區號字段域中，即調用方法zipChanged()。JavaScript函數zipChanged()(見下)在當zip長度為3時調用函數updateState()，而在當zip長度為5時調用函數up-dateCity()。而updateCity()和updateState()把大部分的工作代理到另一個函數ask()。

Zip:＜input id="zipcode" type="text" maxlength="5" onKeyUp="zipChanged()"
style="width:60"/＞
City: ＜input id="city" disabled maxlength="32" style="width:160"/＞
State:＜input id="state" disabled maxlength="2" style="width:30"/＞
＜script src="xmlhttp.js"＞＜/script＞
＜script＞
var zipField = null;
function zipChanged(){
zipField = document.getElementById("zipcode")
var zip = zipField.value;
zip.length == 3?updateState(zip):zip.length == 5?updateCity(zip):"";
}
function updateState(zip) {
　var stateField = document.getElementById("state");
　ask("resolveZip.jsp?lookupType=state&zip="+zip， stateField， zipField);
}
function updateCity(zip) {
　var cityField = document.getElementById("city");
　ask("resolveZip.jsp? lookupType=city&zip="+zip， cityField， zipField);
}
＜/script＞

　　函數ask()與服務器進行通訊並分配一個回調函數來處理服務器的響應（見下列代碼）。後面，我們將分析具有雙重特點的resolveZip.jsp的內容-它根據zip字段中的字元數查找city或state訊息。重要的是，ask()使用了具有異步特點的XmlHttpRequest，這樣填充state和city字段或著色zip字段邊界就可以不必減慢資料入口而得以實現。首先，我們調用request.open()-它用服務器打開套接字頻道，使用一個HTTP動詞(GET或POST)作為第一個參數並且以資料提供者的URL作為第二個參數。request.open()的最後一個參數被設置為true-它指示該請求的異步特性。注意，該請求還沒有被提交。隨著對request.send()的調用，開始提交-這可以為POST提供任何必要的有效載荷。在使用異步請求時，我們必須使用request.onreadystatechanged內容來分配請求的回調函數。(如果請求是同步的話，我們應該能夠在調用request.send之後立即處理結果，但是我們也有可能阻斷用戶，直到該請求完成為止。)

HTTPRequest = function () {
　var xmlhttp=null;
　try {
　　xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
　} catch (_e) {
　　try {
　　　xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
　　} catch (_E) { }
　}
　if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
　　try {
　　　xmlhttp = new XMLHttpRequest();
　　} catch (e) {
　　　xmlhttp = false;
　　}
　}
　return xmlhttp;
}

function ask(url， fieldToFill， lookupField) {
　var http = new HTTPRequest();
　http.open("GET"， url， true);
　http.onreadystatechange = function (){ handleHttpResponse(http， fieldToFill，lookupField)};
　http.send(null);
}

function handleHttpResponse(http， fieldToFill， lookupField) {
　if (http.readyState == 4) {
　　result = http.responseText;
　　if ( -1 != result.search("null") ) {
　　　lookupField.style.borderColor = "red";
　　　fieldToFill.value = "";
　　} else {
　　　lookupField.style.borderColor = "";
　　　fieldToFill.value = result;
　　}
　}
}

　　為ask()所使用的HttpRequest()函數(見上)是一跨瀏覽器的XMLHTTPRequest的一個實例的構造器；稍後我們將分析它。到目前為止，請注意對於handleResponse()的調用是如何用一匿名函數包裝的-這個函數是function(){handleHttpResponse(http，fieldToFill， lookupField)}。

　　該函數的代碼是動態創建的並且在每次我們給http.onreadstatechange內容賦值時被編譯。結果，JavaScript創建一個指向上下文（所有的變數都可以存取正在結束的方法-ask()）的指針。這樣以來，匿名函數和handleResponse()就能夠被保證充分存取所有的上下文宿主的變數，直至到匿名函數的參考被垃圾資源回收筒收集為止。換句話說，無論何時我們的匿名函數被調用，它都能無縫地參考request，fieldToFill和lookupField變數，就像它們是全局的一樣。而且，每次ask()調用都將創建環境的一個獨立拷貝，並且此時這些變數中儲存有該函數將結束時的值。

　　現在，讓我們分析一下函數handleResponse()。既然它能夠在請求處理的不同狀態下啟動，那麼該函數將忽略所有的情形-除了該請求處理完成之外-這相應於request.readyState內容等於4("Completed")。此時，該函數讀取服務器的響應文本。與它的名字所暗示的相反，XmlHttpRequest的輸入和輸出都不必限於XML格式。特別地，我們的resolveZip.jsp(見源碼中的列表1)返回普通文本。如果返回值為"unknown"，那麼該函數將假定郵政區號是無效的並且把查找字段(zip)邊界顏色置為紅色。否則，返回值被用於填充字段state或city，並且zip的邊界被賦予一種預設顏色。

　　XMLHttpRequest-傳輸對像

　　讓我們返回到我們的XMLHTTPRequest的跨瀏覽器實現。最後一個列表包含一個HttpRequest()函數-它向上相容於IE5.0和Mozilla 1.8/FireFox。為簡化起見，我們只創建一個微軟XMLHTTPRequest對象，而且如果創建失敗，我們假定它是Firefox/Mozilla。

　　該函數的核心是XMLHTTPRequest-這是一個本機瀏覽器對象，它為包括HTTP協議的任何東西與服務器之間的通訊提供方便。它允許指定任何HTTP動詞，頭部和有效載荷，並且能夠以異步或同步方式工作。不需要下載也不需要安裝任何插件-儘管在IE的情形下，XMLHTTPRequest是一個整合到瀏覽器內部的ActiveX。因而，"Run ActiveX Control and Plugins"預定IE權限應該正好適合使用它。

　　最重要的是，XMLHTTPRequest允許一個到服務器的RPC風格的編程查詢而不需要任何網頁面重新整理。它以一種可預測的，可控制的方式來實現此-提供了到HTTP協議的所有細節的完整存取-包括頭部和資料的任何定制格式。在以後的文章中，我們將向你展示其它一些業界協議-你可以在這些傳輸協議（如Web服務和XML-RPC）之上執行-它們極大地簡化大規模應用程式的開發和維護。

[psac]

在AJAX開發中整合資料庫技術
一、引言

　　如今，有相當多的Web應用程式，如Backpack，Blinksale和Gmail，都把資料庫技術與AJAX整合到一起。 通過提供與資料庫通訊而不用重新整理瀏覽器這種強有力的技術，這種整合對web應用程式和用戶體驗產生巨大的影響-這意味著，在用戶繼續其它交互的同時可以實現實時的資料傳輸。

　　本文將集中討論上述技術整合機理。同時提供了完整的參考源碼。這個示例是一個簡單的職務記錄應用程式，其中每個職務包含一個標題，描述和日期-允許用戶新增、編輯和刪除職務。所有這些都是你與資料庫記錄資料打交道時的基本操作，但是這個應用程式更進了一步。一個職務可以變化成一個可編輯的表單-它將被從資料庫中加以儲存或刪除，以及以其新狀態顯示而不需要重新整理瀏覽器並中斷用戶操作。

　　在本文中，我假定你已經初步瞭解AJAX、MySQL和PHP，或一類似的服務器端語言。如果你還沒有創建過XML HTTP Request對象，那麼可以先參考我的文章「怎樣使用AJAX」。下面，首先讓我們討論資料庫的問題。

　　二、創建資料庫

　　你需要做的第一件事是創建資料庫表來為這些職務存儲資料。我創建了一個叫informit_ajax的MySQL表-它擁有ID，title，description和date字段-這些都是在本文中不斷重複出現的變數。下面是創建該表的代碼：

CREATE TABLE ′informit_ajax′ (
′id′ int(11) NOT NULL auto_increment,
′date′ datetime NOT NULL default '0000-00-00 00:00:00',
′description′ longtext NOT NULL,
′title′ varchar(100) NOT NULL default '',
PRIMARY KEY (′id′)
) TYPE=MyISAM;

　　你可以用任何MySQL查詢工具或開發應用程式所用的語言來執行這段代碼。一旦準備好資料庫，接下來就需要創建向PHP後台發出請求的前端文件。

　　三、發出請求

　　這裡的索引HTML文件是一簡單的資料佔位符-它將被從資料庫中加以分析。該文件包含到JavaScript和CSS文件的參考；還包含一個發出首次請求的onload處理器和三個div標籤：

　　· Layout-用於把網頁面內容居中

　　· loading-在被請求的資料載入期間載入消息，它將為HTTPRequest對像所接收

　　· posts-用於顯示每一個分析後的職務資料

＜head＞
＜title＞How to Integrate a Database with AJAX＜/title＞
＜link href="css/layout.css" rel="stylesheet" type="text/css" /＞
＜script src="js/request.js"＞＜/script＞
＜script src="js/post.js"＞＜/script＞
＜/head＞
＜body onload="javascript:makeRequest('services/post.php?method=get');"＞
＜div id="layout" align="center"＞
＜div id="posts"＞＜/div＞
＜p＞＜input type="button" value="add a post" onmousedown="javascript:makeRequest('services/post.php?method=save');" /＞＜/p＞
＜p＞＜div id="loading"＞＜/div＞＜/p＞
＜/div＞

＜/body＞

　　當網頁面裝載時產生第一個請求。這個請求發送一個get查詢到一個我們稍後會創建的PHP類；但是首先我們需要為請求的響應創建分析方法。JavaScript請求文件負責處理所有的基礎工作，例如創建對象，發送請求以及檢查準備狀態等。當從Request對像收到響應時，我用這個JavaScript職務文件來處理這些職務的HTML產生。onResponse方法是相當強壯的，因為它以文本和表單兩種版本處理每個職務的HTML網頁面產生，並且把它們放置到它們自己定制的div標籤中；這樣以來，我們就可以容易地在用戶交互期間定位它們。通過這種方法，我們可以在每個職務的文本和表單版本之間進行切換-這可以通過點擊一個"edit this post"鏈接來實現。下面是針對每個職務創建的HTML網頁面的代碼，你可以在本文相應的下載源文件中看到完整的方法實現。

var html = "＜div class='post' id='post_"+ i +"' "+ postDisplay +"＞"
+ "＜div class='title' id='title_"+ i +"'＞"+ _title +"＜/div＞"
+ "＜div class='description' id='description_"+ i +"'＞"+ _description +"＜/div＞"
+ "＜div class='date' id='date_"+ i +"'＞"+ _date +"＜/div＞"
+ "＜a href=\"javascript:toggle('"+ i +"');\"＞edit this post＜/a＞
"
+ "＜/div＞"
+ "＜div class='post' id='formPost_"+ i +"' "+ formPostDisplay +"＞"
+ "＜div class='title'＞＜input type='text' name='title' id='formTitle_"+ i +"' size='60' value='"+ _title +"'＞＜/div＞"
+ "＜div class='description'＞＜textarea type='text' id='formDescription_"+ i +"' wrap='virtual' cols='60' rows='15'＞"+ _description +"＜/textarea＞＜/div＞"
+ "＜div class='date'＞"+ _date +"＜/div＞"
+ "＜input type='button' name='cancel' value='cancel' onclick=\"javascript:toggle('"+ i +"');\"＞"
+ "＜input type='button' name='delete' value='delete this post' onclick=\"javascript:deletePost("+ _id +");\"＞"
+ "＜input type='button' name='submit' value='save this post' onclick=\"javascript:saveNewPost("+ _id +","+ i +");\"＞"
+ "＜/div＞"
+ "＜p＞"nbsp;＜/p＞";

　　每個職務的文本版本簡單地顯示標題，描述和日期以及一個"edit this post"鏈接。每個職務的表單版本有三個按鈕：

　　·"cancel"按鈕-簡單地把職務的狀態切換回文本版本。

　　·"delete this post"按鈕-把當前職務的ID發送給PHP對像以從資料庫中把它刪除。

　　·"save this post"按鈕-允許用戶把新的或編輯過的職務儲存到服務器。

　　處理服務器端請求通訊的核心方法有onResponse，saveNewPost，deletePost和getPost方法；還有存儲當前正操作的職務索引的一個getter和一個setter方法。這些getter/setter方法把當前索引值提供給這些核心方法，這樣正確的職務就可以用基於該索引的正確訊息進行更新。下面是針對每個核心方法（不包括onResponse，因為我們以前觀察過它的功能)的簡短描述和代碼示例：

　　· 下面的saveNewPost方法通過收集並把表單輸入值發送給PHP對像來儲存新的職務並且把getPost方法設置為onreadystatechange的回叫方法：

function saveNewPost(_id, _index){
　var newDescription = document.getElementById("formDescription_"+ _index).value;
　var newTitle = document.getElementById("formTitle_"+ _index).value;
　setIndex(_index);
　sendRequest("services/post.php?method=save"id="+ _id +""title="+ newTitle +""description="+ newDescription, getPost);
}

　　· 下面的getPost方法是一個回調方法-它負責當從PHP對像收到響應時更新單獨的職務：

function getPost(){
　if(checkReadyState(request)) {
　　var response = request.responseXML.documentElement;
　　var _title = response.getElementsByTagName('title')[getIndex()].firstChild.data;
　　var _description = response.getElementsByTagName('description')[getIndex()].firstChild.data;
　　var _date = response.getElementsByTagName('date')[getIndex()].firstChild.data;

　　document.getElementById("title_"+ getIndex()).innerHTML = _title;
　　document.getElementById("description_"+ getIndex()).innerHTML = _description;
　　document.getElementById("date_"+ getIndex()).innerHTML = _date;
　　toggle(getIndex());
　}
}

　　· 下面的deletePost方法把當前索引作為一個請求發送給PHP對象，這最終將刪除資料庫中的記錄並以更新的職務進行響應：

function deletePost(_id){
　sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
}

　　令人驚訝的是，最複雜的部分已經結束了。下面讓我們分析最為關鍵的部分-資料庫交互。

[psac]

Ajax核心：XMLHTTP元件相關技術資料



一、資料庫遠端管理技術

基於互連網的廣域網現代應用中的一個重要環節是資料庫遠端監控。首先簡單回顧一下互連網上的資料庫遠端管理技術的發展過程和方式：

早期通過編寫CGI-BIN程式模塊進行資料庫遠端管理。但CGI-BIN的執行速度慢，維護很不方便，現在已經基本被棄用。

這幾年使用元件對像模型(Component Object Model, COM)的應用非常多，效果也很好。但如果使用的是第三方服務器(筆者的網站就是建立在第三方的虛擬主機上)，服務器方往往因為保密或其它商業原因不允許用戶註冊自己的元件。

近年來由微軟公司推出的.NET平台和SUN公司的J2EE平台都是非常高檔的資料庫遠端管理與服務平台。都能提供優質的多層(n-Tier)應用服務。 其中，.NET的簡單對像訪問協議(Simple Object Access Protocol, SOAP)使用超文本傳輸協議(Hypertext Transfer Protocol, HTTP)和擴展標記語言(Extensible Markup Language, XML)技術實現跨系統(例如Windows - Linux)的通訊服務方式已經廣為開發商接受和使用。許多大型應用，例如企業資源計劃(Enterprise resource planning, ERP)等都建立在這樣的大型平台之上。 但對於中小型應用，比如一個網站的建設和維護，這種大型應用平台就顯得有些尾大不掉，開銷也過於龐大。

曾經在互連網技術和Java技術方面一度落後的微軟公司在XML應用開發則走在了前頭。她的XML解析器(MSXML)中的XMLHTTP協議是一個非常方便實用的客戶/服務通訊管道。綜合運用XMLHTTP以及ActiveX資料對像(ActiveX Data Objects, ADO/ADOX)可以簡單方便地實現資料庫遠端管理。

二、資料庫遠端管理體系

資料庫遠端管理的任務流程是：

1、客戶端向服務端發出資料庫結構和資料的查詢或修改指令。

2、服務端接受並執行有關指令並向客戶端返回結果。

3、客戶端接受並顯示服務端返回的指令執行結果。

實現資料庫遠端管理的二個主要關鍵環節是：

1、客戶端與服務端之間的指令上傳和結果下傳的資料通道，由XMLHTTP協議實現。

2、服務端前沿與資料庫之間的指令傳送和結果返回，由起著中間層作用的ADO/ADOX接頭完成。

三、XMLHTTP的使用

顧名思義，XMLHTTP是個傳送XML格式資料的超文本傳輸協議。

實際上，XMLHTTP的資料傳輸過程更為靈活一些：

它上傳的指令可以是XML格式資料，也可以是字元串，流，或者一個無符號整數數組。還可以是URL的參數。

它下達的結果可以是XML格式資料，也可以是字元串，流，或者一個無符號整數數組。

詳情可參閱文末鏈接。

客戶端調用XMLHTTP的過程很簡單，只有5個步驟：

1、創建XMLHTTP對像

2、打開與服務端的連接，同時定義指令發送方式，服務網頁(URL)和請求權限等。

客戶端通過Open命令打開與服務端的服務網頁的連接。與普通HTTP指令傳送一樣，可以用"GET"方法或"POST"方法指向服務端的服務網頁。

3、發送指令。

4、等待並接收服務端返回的處理結果。

5、釋放XMLHTTP對像

XMLHTTP方法

Open bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword

bstrMethod：資料傳送方式，即GET或POST。

bstrUrl：服務網頁的URL。

varAsync：是否同步執行。預設為True，即同步執行，但只能在DOM中實施同步執行。應用中一般將其置為False，即異步執行。

bstrUser：用戶名，可省略。

bstrPassword：用戶口令，可省略。

Send varBody

varBody：指令集。可以是XML格式資料，也可以是字元串，流，或者一個無符號整數數組。也可以省略，讓指令通過Open方法的URL參數代入。

setRequestHeader bstrHeader, bstrValue

bstrHeader：HTTP 頭(header)

bstrValue：HTTP 頭(header)的值

如果Open方法定義為POST，可以定義表單方式上傳xmlhttp.setRequestHeader "Content-Type", "application/x-www-form-urlencoded"

XMLHTTP內容

onreadystatechange：在同步執行方式下獲得返回結果的事件句柄。只能在DOM中調用。

responseBody：結果返回為無符號整數數組。

responseStream：結果返回為IStream流。

responseText ：結果返回為字元串。

responseXML：結果返回為XML格式資料。

下面是本文附件源程式中的一個應用示例：

Function GetResult(urlStr)

Dim xmlHttp

Dim retStr

Set xmlHttp = CreateObject("Msxml2.XMLHTTP") '創建對像

On Error Resume Next '出錯處理

xmlHttp.Open "POST", urlStr, False '用POST方式打開連接，異步執行。

xmlHttp.setRequestHeader "Content-Type", "application/x-www-form-urlencoded" '上傳表單

xmlHttp.Send '發送指令

If Err.Number = 0 Then '如果連接正確

retStr = xmlHttp.responseText '等待並獲得服務端返回的結果字元串

Else

retStr = "Url not found" '否則返回出錯訊息

End If

Set xmlHttp = nothing '釋放對像

GetResult = retStr '返回結果

End Function

GetResult()函數帶入一個服務網頁的URL參數，把上傳的指令安放在URL後面的參數上，如：

urlStr = "server.asp?cmd=" & cmd & "&db=" & db & "table=" & table

cmd：執行方式，例如查詢，修改，刪除等等。

db：服務端資料庫名

table：服務端表名

然後提交指令，等待並接收返回的處理結果。結果以字元串方式返回。最後由函數調用者處理並顯示結果。