Ajax基本概念和原理_ZenDei技術網路在線

什麼是Ajax Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。 Ajax的全稱是Asynchronous JavaScript and XML，即非同步JavaScript+XML。它並不是新的編程語言，而是幾種原有技術的結合體。它由以下幾種技術組合而成，包括： HTML/X ...

什麼是Ajax

Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

Ajax的全稱是Asynchronous JavaScript and XML，即非同步JavaScript+XML。它並不是新的編程語言，而是幾種原有技術的結合體。它由以下幾種技術組合而成，包括：

HTML/XHTML——主要的內容表示語言。
CSS——為XHTML提供文本格式定義。
DOM——對已載入的頁面進行動態更新。
XML——數據交換格式。
XSLT——將XML轉換為XHTML（用CSS修飾樣式）。
XMLHttp——用XMLHttpRequest來和伺服器進行非同步通信，是主要的通信代理。
JavaScript——用來編寫Ajax引擎的腳本語言。

實際上，在Ajax解決方案中這些技術都是可用的，不過只有三種是必須的：HTML/XHTML、DOM以及JavaScript。

XMLHttpRequest對象

當需要非同步與伺服器交換數據時，需要XMLHttpRequest對象來非同步交換。XMLHttpRequest對象的主要屬性有：

onreadystatechange——每次狀態改變所觸發事件的事件處理程式。
responseText——從伺服器進程返回數據的字元串形式。
responseXML——從伺服器進程返回的DOM相容的文檔數據對象。
status——從伺服器返回的數字代碼，如404（未找到）和200（已就緒）。
status Text——伴隨狀態碼的字元串信息。
readyState——對象狀態值。對象狀態值有以下幾個：
- 0 - (未初始化)還沒有調用send()方法
- 1 - (載入)已調用send()方法，正在發送請求
- 2 - (載入完成)send()方法執行完成
- 3 - (交互)正在解析響應內容
- 4 - (完成)響應內容解析完成，可以在客戶端調用了

對於readyState的狀態值，其中“0”狀態是在定義後自動具有的狀態值，而對於成功訪問的狀態（得到信息）我們大多數採用“4”進行判斷。

Ajax的核心就是是JavaScript對象XmlHttpRequest，這個對象為向伺服器發送請求和解析伺服器響應提供了流暢的介面。XmlHttpRequest可以使用JavaScript向伺服器提出請求並處理響應，而不阻塞用戶。

XHR對象由IE5率先引入，在IE5中XHR對象是通過MSXML庫中一個ActiveX對象實現的，根據IE版本不同可能會遇到不同版本XHR對象，而IE7+與其它現代瀏覽器均支持原生的XHR對象，在這些瀏覽器中我們只需使用XMLHttpRequest構造函數就可以構造XHR對象，因此一個瀏覽器相容的創建XHR對象的函數寫法大概是這個樣子：

1 var xmlhttp;
2 if (window.XMLHttpRequest) {
3   // code for IE7+, Firefox, Chrome, Opera, Safari
4   xmlhttp=new XMLHttpRequest();
5 } else {
6   // code for IE6, IE5
7   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
8 }

XMLHttpRequest對象用法

XMLHttpRequest對象有兩個重要方法 open與send。

1 xmlhttp.open("GET","ajax_info.txt",true);
2 xmlhttp.send();

對於open方法，有幾點需要註意：

URL是相對於當前頁面的路徑，也可以似乎用絕對路徑。
open方法不會向伺服器發送真正請求，它相當於初始化請求並準備發送。
只能向同一個域中使用相同協議和埠的URL發送請求，否則會因為安全原因報錯。

真正能夠向伺服器發送請求需要調用send方法，並僅在POST請求可以傳入參數，不需要則發送null，在調用send方法之後請求被髮往伺服器。

請求發往伺服器，伺服器根據請求生成響應（Response），傳回給XHR對象，在收到響應後相應數據會填充到XHR對象的屬性，有四個相關屬性會被填充：

responseText——從伺服器進程返回數據的字元串形式。
responseXML——從伺服器進程返回的DOM相容的文檔數據對象。
status——從伺服器返回的數字代碼，如404（未找到）和200（已就緒）。
status Text——伴隨狀態碼的字元串信息。

在收到響應後第一步是檢查響應狀態，確保響應是否成功返回（狀態為200）。

1 xhr.open('get','default.aspx,false'); //準備同步請求
2 xhr.send();
3 if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
4      //do something
5 }else{
6       //error handler
7 }

上面代碼在發送同步請求的時候沒問題，只有得到響應後才會執行檢查status語句，但是在非同步請求時，JavaScript會繼續執行，不等生成響應就檢查狀態碼，這樣我們不能保證檢查狀態碼語句是在得到響應後執行（實際上也幾乎不可能，伺服器再快一個HTTP請求也不會快過一條JavaScript執行數度），這時候我們可以檢查XHR對象的readyState屬性，該屬性表示請求/響應過程中的當前活動階段，每當readyState值改變的時候都會觸發一次onreadystatechange事件。

我們可以利用這個事件檢查每次readyState變化的值，當為4的時候表示所有數據準備就緒，有一點我們需要註意：必須在open方法之前指定onreadtstatechange事件處理程式。

1 xmlhttp.onreadystatechange=function(){
2   if (xmlhttp.readyState==4 && xmlhttp.status==200){
3     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
4     }
5   }
6 xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
7 xmlhttp.send();

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新伺服器上的文件或資料庫）
向伺服器發送大量數據（POST 沒有數據量限制）
發送包含未知字元的用戶輸入時，POST 比 GET 更穩定也更可靠

一個簡單的 GET 請求：

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

在上面的例子中，可能得到的是緩存的結果。

為了避免這種情況，向 URL 添加一個唯一的 ID：

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

如果希望通過 GET 方法發送信息，向 URL 添加信息：

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

一個簡單 POST 請求：

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據：

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

open() 方法的 url 參數是伺服器上文件的地址：

xmlhttp.open("GET","ajax_test.html",true);

該文件可以是任何類型的文件，比如 .txt 和 .xml，或者伺服器腳本文件，比如 .asp 和 .php （在傳迴響應之前，能夠在伺服器上執行任務）。

非同步 - True 或 False？

XMLHttpRequest 對象如果要用於 AJAX 的話，其 open() 方法的 async 參數必須設置為 true：

xmlhttp.open("GET","ajax_test.html",true);

對於 web 開發人員來說，發送非同步請求是一個巨大的進步。很多在伺服器執行的任務都相當費時。AJAX 出現之前，這可能會引起應用程式掛起或停止。

通過 AJAX，JavaScript 無需等待伺服器的響應，而是：

在等待伺服器響應時執行其他腳本
當響應就緒後對響應進行處理

當使用 async=true 時，規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數：

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();