Ajax的定義與總結

結合一些文檔，探討Ajax究竟神奇在什麼地方。　　

Ajax（即非同步 JavaScript 和 XML）是一種 Web 應用程式開發的手段，它採用用戶端指令碼與 Web 服務器交換資料。所以，不必採用會中斷互動的完整頁面重新整理，就可以動態地更新 Web 頁面。使用 Ajax，可以建立更加豐富、更加動態 Web 應用程式使用者介面，其即時性與可用性甚至能夠接近本機傳統型應用程式。
　　
一、AJAX定義 
　　  AJAX（Asynchronous JavaScript and XML）其實是多種技術的綜合，包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中：
　　 使用XHTML和CSS標準化呈現，使用DOM實現動態顯示和互動，使用XML和XSTL進行資料交換與處理，使用XMLHttpRequest對象進行非同步資料讀取，
 使用Javascript綁定和處理所有資料。

二、現狀與需要解決的問題
　　傳統的Web應用採用同步互動過程，這種情況下，使用者首先向HTTP伺服器觸發一個行為或請求的呼求。反過來，伺服器執行某些任務，再向發出請求的
使用者返回一個HTML頁面。這是一種不連貫的使用者體驗，伺服器在處理請求的時候，使用者多數時間處於等待的狀態，螢幕內容也是一片空白。如：
 
 
　　自從採用超文本作為Web傳輸和呈現之後，我們都是採用這麼一套傳輸方式。當負載比較小的時候，這並不會體現出有什麼不妥。可是當負載比較大，
回應時間要很長，1分鐘、2分鐘……數分鐘的時候，這種等待就不可忍受了。嚴重的，超過回應時間，伺服器乾脆告訴你頁面不可用。另外，某些時候，
我只是想改變頁面一小部分的資料，那為什麼我必須重新載入整個頁面呢？！當軟體設計越來越講究人性化的時候，這麼糟糕的使用者體驗簡直與這種原則
背道而馳。為什麼老是要讓使用者等待伺服器取資料呢？至少，我們應該減少使用者等待的時間。現在，除了程式設計、編碼最佳化和伺服器調優之外，還可以採用AJAX。
三、為什麼使用AJAX
　　與傳統的Web應用不同，AJAX採用非同步互動過程。AJAX在使用者與伺服器之間引入一個中間媒介，從而消除了網路互動過程中的處理-等待-處理-等待缺點。
使用者的瀏覽器在執行任務時即裝載了AJAX引擎。AJAX引擎用JavaScript語言編寫，通常藏在一個隱藏的架構中。它負責編譯使用者介面及與伺服器之間的互動。
AJAX引擎允許使用者與應用軟體之間的互動過程非同步進行，獨立於使用者與網路伺服器間的交流。現在，可以用Javascript調用AJAX引擎來代替產生一個HTTP的
使用者動作，記憶體中的資料編輯、頁面導航、資料校正這些不需要重新載入整個頁面的需求可以交給AJAX來執行。
 
 
　　使用AJAX，可以為ISP、開發人員、終端使用者帶來可見的便捷：
· 減輕伺服器的負擔。AJAX的原則是“按需取資料”，可以最大程度的減少冗餘請求，和響應對伺服器造成的負擔。
· 無重新整理更新頁面，減少使用者心理和實際的等待時間。特別的，當要讀取大量的資料的時候，不用像Reload那樣出現白屏的情況，AJAX使用
XMLHTTP對象發送請求並得到伺服器響應，在不重新載入整個頁面的情況下用Javascript操作DOM最終更新頁面。所以在讀取資料的過程中，使用者所面對的不是白屏，是原來的頁面內容（也可以加一個Loading的提示框讓使用者知道處於讀取資料過程），只有當資料接收完畢之後才更新相應部分的內容。這種更新是瞬間的，使用者幾乎感覺不到。
· 帶來更好的使用者體驗。
· 可以把以前一些伺服器負擔的工作轉嫁到用戶端，利用用戶端閑置的能力來處理，減輕伺服器和頻寬的負擔，節約空間和寬頻租用成本。
· 可以調用外部資料。
· 基於標準化的並被廣泛支援的技術，不需要下載外掛程式或者小程式。
· 進一步促進頁面呈現和資料的分離。
四、誰在使用AJAX
　　在應用AJAX開發上面，Google當仁不讓是表率。Orkut、Gmail、Google Groups、Google Maps、Google Suggest都應用了這項技術。Amazon的A9.com搜尋引擎也採用了類似的技術。
　　微軟也在積極開發更為完善的AJAX應用：它即將推出代號為Atlas的AJAX工具。Atlas的功能超越了AJAX本身，包括整合Visual Studio的調試功能。另外，新的ASP.NET控制項將使用戶端控制項與伺服器端代碼的捆綁更為簡便。Atlas客戶指令碼架構（Atlas Clent Script Framework）也使與網頁及相關項目的互動更為便利。但Visual Studio 2005中並不包含此項功能。
　　微軟最近宣布Atlas客戶指令碼架構將包含如下內容（詳細資料請訪問Atlas計劃網站）：
· 一個可擴充的核心架構，它添加了JavaScript功能：如生命同時期管理、繼承管理、多點傳送處理器和介面管理。
· 一個常見功能的基本類庫，有豐富的字串處理、計時器和運行任務。
· 為HTML附加動態行為的使用者介面架構。
· 一組用來簡化伺服器連通和網路訪問的網路堆棧。
· 一組豐富的使用者介面開發控制項，如：自動完成的文字框、動畫和拖放。
· 處理瀏覽器指令碼行為差異的瀏覽器安全色層面。
　　典型的，微軟將AJAX技術應用在MSN Space上面。很多人一直都對MS Space服務感到很奇怪，當提交回複評論以後，瀏覽器會暫時停頓一下，然後在無重新整理的情況下把我提交的評論顯示出來。這個就是應用了AJAX的效果。試想，如果添加一個評論就要重新重新整理整個頁面，那可真費事。
　　目前，AJAX應用最普遍的領域是GIS-Map方面。GIS的地區搜尋強調快速響應，AJAX的特點正好符合這種需求。
五、用AJAX改進你的設計
　　 AJAX雖然可以實現無重新整理更新頁面內容，但是也不是什麼地方都可以用，主要應用在互動較多、頻繁讀資料、資料分類良好的Web應用中。現在，讓我們舉兩個例子，看看如何用AJAX改進你的設計。

例子1：資料校正
　　在輸入form表單內容的時候，我們通常需要確保資料的唯一性。因此，常常在頁面上提供“唯一性校正”按鈕，讓使用者點擊，開啟一個校正小視窗；或者等form提交到伺服器端，由伺服器判斷後在返回相應的校正資訊。前者，window.open操作本來就是比較耗費資源的，通常由window. showModalDialog代替，即使這樣也要彈出一個對話方塊；後者，需要把整個頁面提交到伺服器並由伺服器判斷校正，這個過程不僅時間長而且加重了伺服器負擔。而使用AJAX，這個校正請求可以由XMLHttpRequest對象發出，整個過程不需要彈出新視窗，也不需要將整個頁面提交到伺服器，快速又不加重伺服器負擔。例子2：按需取資料-串聯功能表
　　以前，為了避免每次對菜單的操作引起的重載頁面，不採用每次調用背景方式，而是一次性將串聯功能表的所有資料全部讀取出來並寫入數組，然後根據使用者的操作用JavaScript來控制它的子集項目的呈現，這樣雖然解決了操作響應速度、不重載頁面以及避免向伺服器頻繁發送請求的問題，但是如果使用者不對菜單進行操作或只對菜單中的一部分進行操作的話，那讀取的資料中的一部分就會成為冗餘資料而浪費使用者的資源，特別是在菜單結構複雜、資料量大的情況下（比如菜單有很多級、每一級菜又有上百個項目），這種弊端就更為突出。
　　現在應用AJAX，在初始化頁面時我們唯讀出它的第一級的所有資料並顯示，在使用者操作一級菜單其中一項時，會通過Ajax向後台請求當前一級項目所屬的二級子功能表的所有資料，如果再繼續請求已經呈現的二級菜單中的一項時，再向後面請求所操作二級功能表項目對應的所有三級菜單的所有資料，以此類推……這樣，用什麼就取什麼、用多少就取多少，就不會有資料的冗餘和浪費，減少了資料下載總量，而且更新頁面時不用重載全部內容，只更新需要更新的那部分即可，相對於幕後處理並重載的方式縮短了使用者等待時間，也把對資源的浪費降到最低。
例子3：讀取外部資料
　　AJAX可以調用外部資料，因此，可以對一些開發的資料比如XML文檔、RSS文檔進行二次加工，實現資料整合或者開發應用程式。六、AJAX的缺陷
　　AJAX不是完美的技術。使用AJAX，它的一些缺陷不得不權衡一下：
· AJAX大量使用了Javascript和AJAX引擎，而這個取決於瀏覽器的支援。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支援，Mozilla雖然也支援AJAX，但是提供XMLHttpRequest的方式不一樣。所以，使用AJAX的程式必須測試針對各個瀏覽器的相容性。
· AJAX更新頁面內容的時候並沒有重新整理整個頁面，因此，網頁的後退功能是失效的；有的使用者還經常搞不清楚現在的資料是舊的還是已經更新過的。這個就需要在明顯位置提醒使用者“資料已更新”。
· 對流媒體的支援沒有FLASH、Java Applet好。
一些手持功能（如手機、PDA等）現在還不能很好的支援Ajax。
七、AJAX開發
　　到這裡，已經可以清楚的知道AJAX是什麼，AJAX能做什麼，AJAX什麼地方不好。如果你覺得AJAX真的能給你的開發工作帶來改進的話，那麼繼續看看怎麼使用AJAX吧。
7.1、AJAX應用到的技術
　　AJAX涉及到的7項技術中，個人認為Javascript、XMLHttpRequest、DOM、XML比較有用。

A、XMLHttpRequest對象
　　XMLHttpRequest是XMLHTTP組件的對象，通過這個對象，AJAX可以像傳統型應用程式一樣只同伺服器進行資料層面的交換，而不用每次都重新整理介面，也不用每次將資料處理的工作都交給伺服器來做；這樣既減輕了伺服器負擔又加快了響應速度、縮短了使用者等待的時間。
　　IE5.0開始，開發人員可以在Web頁面內部使用XMLHTTP ActiveX組件擴充自身的功能，不用從當前的Web頁面導航就可以直接傳輸資料到伺服器或者從伺服器接收資料。,Mozilla1.0以及NetScape7則是建立繼承XML的代理類XMLHttpRequest；對於大多數情況，XMLHttpRequest對象和XMLHTTP組件很相似，方法和屬性類似，只是部分屬性不同。
XMLHttpRequest對象初始化：
<script language=”javascript”>
var http_request = false;
//IE瀏覽器
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");
//Mozilla瀏覽器
http_request = new XMLHttpRequest();
</script>
　　XMLHttpRequest對象的方法：
方法 描述 
abort() 停止當前請求 
getAllResponseHeaders() 作為字串返回完整的headers 
getResponseHeader("headerLabel") 作為字串返回單個的header標籤 
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設定未決的請求的目標 URL，方法，和其他參數 
send(content) 發送請求 
setRequestHeader("label", "value") 設定header並和請求一起發送 
　　XMLHttpRequest對象的屬性：
屬性 描述 
onreadystatechange 狀態改變的事件觸發程序 
readyState 對象狀態(integer):   0 = 未初始化  1 = 讀取中 2 = 已讀取 3 = 互動中 4 = 完成 
responseText 伺服器處理序返回資料的文本版本 
responseXML 伺服器處理序返回資料的相容DOM的XML文檔對象 
status 伺服器返回的狀態代碼, 如：404 = "檔案未找到" 、200 ="成功" 
statusText 伺服器返回的狀態文本資訊 

B、Javascript
　　 Javascript一直被定位為用戶端的指令碼語言，應用最多的地方是表單資料的校正。現在，可以通過Javascript操作XMLHttpRequest，來跟資料庫打交道。

C、DOM
　　 DOM（Document Object Model）是提供給HTML和XML使用的一組API，提供了檔案的表述結構，並可以利用它改變其中的內容和可見物。指令碼語言通過DOM才可以跟頁面進行互動。Web開發人員可操作及建立檔案的屬性、方法以及事件都以對象來展現。比如，document就代表頁面對象本身。

D、XML
　　通過XML（Extensible Markup Language），可以規範的定義結構化資料，是網上傳輸的資料和文檔符合統一的標準。用XML表述的資料和文檔，可以很容易的讓所有程式共用。