初识ajax
AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。
主要包含了以下幾種技術：
Ajax（Asynchronous JavaScript + XML）的定義
基于web標準（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）進行動態顯示及交互；
使用 XML 和 XSLT 進行數據交換及相關操作；
使用 XMLHttpRequest 進行異步數據查詢、檢索；
使用 JavaScript 將所有的東西綁定在一起。
與傳統的web應用比較：
傳統的web應用允許用戶填寫表單(form)，當提交表單時就向web服務器發送一個請求。服務器接收并處理傳來的表單，然後返回一個新的網頁。這個做法浪費了許多帶寬，因為在前後兩個頁面中的大部分HTML代碼往往是相同的。由于每次應用的交互都需要向服務器發送請求，應用的響應時間就依賴于服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。
與此不同，AJAX應用可以僅向服務器發送并取回必需的數據，它使用SOAP或其它一些基于XML的web service接口，并在客戶端采用JavaScript處理來自服務器的響應。因為在服務器和瀏覽器之間交換的數據大量減少，結果我們就能看到響應更快的應用。同時很多的處理工作可以在發出請求的客戶端機器上完成，所以Web服務器的處理時間也減少了。
優點和缺點：
使用Ajax的最大優點，就是能在不更新整個頁面的前提下維護數據。這使得Web應用程序更為迅捷地回應用戶動作，并避免了在網絡上發送那些沒有改變過的信息。Ajax不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。
對應用Ajax最主要的批評就是，它可能破壞瀏覽器后退按鈕的正常行為。在動態更新頁面的情況下，用戶無法回到前一個頁面狀態，這是因為瀏覽器僅能記下歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙；用戶通常都希望單擊后退按鈕，就能夠取消他們的前一次操作，但是在Ajax應用程序中，卻無法這樣做。不過開發者已想出了種種辦法來解決這個問題，當中大多數都是在用戶單擊后退按鈕訪問歷史記錄時，通過建立或使用一個隱藏的IFRAME來重現頁面上的變更。（例如，當用戶在Google Maps中單擊后退時，它在一個隱藏的IFRAME中進行搜索，然后將搜索結果反映到Ajax元素上，以便將應用程序狀態恢復到當時的狀態。）
1.一個相關的觀點認為，使用動態頁面更新使得用戶難于將某個特定的狀態保存到收藏夾中。該問題的解決方案也已出現，大部分都使用URL片斷標識符（通常被稱為錨點，即URL中#后面的部分）來保持跟蹤，允許用戶回到指定的某個應用程序狀態。（許多瀏覽器允許JavaScript動態更新錨點，這使得Ajax應用程序能夠在更新顯示內容的同時更新錨點。）這些解決方案也同時解決了許多關于不支持后退按鈕的爭論。
2.進行Ajax開發時，網絡延遲——即用戶發出請求到服務器發出響應之間的間隔——需要慎重考慮。不給予用戶明確的回應，沒有恰當的預讀數據，或者對XMLHttpRequest的不恰當處理，都會使用戶感到延遲，這是用戶不欲看到的，也是他們無法理解的。通常的解決方案是，使用一個可視化的組件來告訴用戶系統正在進行后臺操作并且正在讀取數據和內容。
3.一些手持設備（如手機、PDA等）現在還不能很好的支持Ajax;
4.用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是讓人頭痛的事;
5.Ajax的無刷新重載，由于頁面的變化沒有刷新重載那么明顯，所以容易給用戶帶來困擾――用戶不太清楚現在的數據是新的還是已經更新過的；現有的解決有：在相關位置提示、數據更新的區域設計得比較明顯、數據更新后給用戶提示等;
6.對串流媒體的支持沒有FLASH、Java Applet好;
Ajax的工作原理：
Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。Ajax的工作原理相當于在用戶和服務器之間加了—個中間層，使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務器和帶寬的負擔，從而達到節約ISP的空間及帶寬租用成本的目的。
在創建Web站點時，在客戶端執行屏幕更新為用戶提供了很大的靈活性。下面是使用Ajax可以完成的功能：
1.提升站點的性能，這是通過減少從服務器下載的數據量而實現的。例如，在某購物車頁面，當更新籃子中的一項物品的數量時，會重新載入整個頁面，這必須下載整個頁面的數據。如果使用Ajax計算新的總量，服務器只會返回新的總量值，因此所需的帶寬僅為原來的百分之一。 消除了每次用戶輸入時的頁面刷新。例如，在Ajax中，如果用戶在分頁列表上單擊Next，則服務器數據只刷新列表而不是整個頁面。
2.直接編輯表格數據，而不是要求用戶導航到新的頁面來編輯數據。對于Ajax，當用戶單擊Edit時，可以將靜態表格刷新為內容可編輯的表格。用戶單擊Done之后，就可以發出一個Ajax請求來更新服務器，并刷新表格，使其包含靜態、只讀的數據。
基礎應用：
我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應用：
(1)用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在；
(2)以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在；
首先，我們需要用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求， XMLHttpRequest 類首先由Internet Explorer以ActiveX對象引入，被稱為XMLHTTP。 后來Mozilla﹑Netscape﹑Safari 和其他瀏覽器也提供了XMLHttpRequest類，不過它們創建XMLHttpRequest類的方法不同。
對于Internet Explorer瀏覽器，創建XMLHttpRequest 方法如下：
由于在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致，為了更好的兼容不同版本的Internet Explorer瀏覽器，因此我們需要根據不同版本的Internet Explorer瀏覽器來創建XMLHttpRequest類，上面代碼就是根據不同的Internet Explorer瀏覽器創建XMLHttpRequest類的方法。
對于Mozilla﹑Netscape﹑Safari等瀏覽器，創建XMLHttpRequest 方法如下：
??
如果服務器的響應沒有XML mime-type header，某些Mozilla瀏覽器可能無法正常工作。 為了解決這個問題，如果服務器響應的header不是text/xml，可以調用其它方法修改該header。xmlhttp_request = new XMLHttpRequest(); xmlhttp_request.overrideMimeType('text/xml');
在實際應用中，為了兼容多種不同版本的瀏覽器，一般將創建XMLHttpRequest類的方法寫成如下形式：
在定義了如何處理響應后，就要發送請求了。可以調用HTTP請求類的open()和send()方法，如下所示：
?
xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null);open()的第一個參數是HTTP請求方式—GET，POST或任何服務器所支持的您想調用的方式。 按照HTTP規范，該參數要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。第二個參數是請求頁面的URL。第三個參數設置請求是否為異步模式。如果是TRUE，JavaScript函數將繼續執行，而不等待服務器響應。這就是"AJAX"中的"A"。?
用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求后，接下來要決定當收到服務器的響應后，需要做什么。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設置為要使用的JavaScript的函數名，如下所示：
?
xmlhttp_request.onreadystatechange =FunctionName;?FunctionName是用JavaScript創建的函數名，注意不要寫成FunctionName()，當然我們也可以直接將JavaScript代碼創建在onreadystatechange之后，例如：
?
xmlhttp_request.onreadystatechange = function(){ // JavaScript代碼段 };?首先要檢查請求的狀態。只有當一個完整的服務器響應已經收到了，函數才可以處理該響應。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。
readyState的取值如下：
0 (未初始化)
1 (正在裝載)
2 (裝載完畢)
3 (交互中)
4 (完成)
所以只有當readyState=4時，一個完整的服務器響應已經收到了，函數才可以處理該響應。具體代碼如下：
當readyState=4時，一個完整的服務器響應已經收到了，接著，函數會檢查HTTP服務器響應的狀態值。完整的狀態取值可參見W3C文檔。當HTTP服務器響應的值為200時，表示狀態正常。在檢查完請求的狀態值和響應的HTTP狀態值后，就可以處理從服務器得到的數據了。有兩種方式可以得到這些數據：
(1) 以文本字符串的方式返回服務器的響應
(2) 以XMLDocument對象方式返回響應
實例一： 用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在
首先，我們登陸網易通行證注冊頁面，可以看到檢測用戶名是否存在是將用戶名提交給checkssn.jsp頁面進行判斷，格式為：
reg.163.com/register/checkssn.jsp?username=用戶名
根據上面講到的方法，我們可以利用AJAX技術對網易通行證用戶名進行檢測：
第一步：新建一個基于Xhtml標準的網頁，在區域插入Javascript函數如下：
在區域建立一個文本框，id為163id，再建一個id為messsge的空白區域用來顯示返回字符串(也可以通過Javascript函數截取一部分字符串顯示)：
?
<input type=text id="163id"> <span id="message"></span>這樣，一個基于AJAX技術的用戶名檢測頁面就做好了，不過這個頁面將返回服務器響應生成頁面的所有字符串，當然還可以對返回的字符串進行一些操作，便于應用到不同的需要當中。
實例二： 以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在?
在上面的例子中，當服務器對HTTP請求的響應被收到后，我們會調用請求對象的reponseText屬性。該屬性包含了服務器返回響應文件的內容。現在我們以XMLDocument對象方式返回響應，此時將不再需要reponseText屬性而使用responseXML屬性。首先登陸金山通行證注冊頁面，我們發現金山通行證用戶名的檢測方式為： pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用戶名,并且返回XML數據:
isExistedUid -2
當result值為-1時表示此用戶名已被注冊，當result值為-2時表示此用戶名尚未注冊，因此通過對result值的判斷可以知道用戶名是否被注冊。
對上例代碼進行修改：
改為
var response = xmlhttp_request.responseXML.documentElement; var result = response.getElementsByTagName('result')[0].firstChild.data; //返回result節點數據 if(result ==-2){document.getElementById('message').innerHTML = "用戶名"+document.getElementById('163id').value+"尚未注冊"; }else if(result ==-1){document.getElementById('message').innerHTML = "對不起,用戶名"+document.getElementById('163id').value+"已經注冊"; }?通過以上兩個實例說明了AJAX的客戶端基礎應用，采用的是網易和金山現成的服務器端程序，當然為了開發合適自己頁面的程序，還需要對自己編寫服務器端程序，這設計到程序語言及數據庫的操作，對于有一定程序基礎的讀者一定不是很難的事情。
總結
- 上一篇： 五大弘扬句式
- 下一篇： 数字芯片设计流程之verilog设计