Ajax基本概念和原理

什麼是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方法，有幾點須要注意：

1. URL是相對於當前頁面的路徑，也能夠彷佛用絕對路徑。
2. open方法不會向服務器發送真正請求，它至關於初始化請求並準備發送。
3. 只能向同一個域中使用相同協議和端口的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();