深入理解Ajax原理

1.  概念

ajax 的全稱是AsynchronousJavaScript and XML，其中，Asynchronous 是非同步意思，它有別於傳統web開發中採用的同步的方式。

2.  理解同步非同步

非同步傳輸是面向字元的傳輸，它的單位是字元；而同步傳輸是面向位元的傳輸，它的單位是楨，它傳輸的時候要求接受方和發送方的時鐘是保持一致的。

舉個例子來說同步和非同步，同步就好像我們買樓一次性支付，而非同步就是買樓分期付款。所以當我們把這種生活中的概念化解釋轉移到理解Ajax非同步上來就發現，它是通過這樣一種非同步方式來讓使用者更加收益，也就是說可以讓使用者的有更好的體驗性。其實這也是Ajax的意義所在。

 

3.  通過分析XmlHttpRequest來理解Ajax的原理

Ajax的原理簡單來說通過XmlHttpRequest對象來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。要清楚這個過程和原理，我們必須對 XMLHttpRequest有所瞭解。

 

XMLHttpRequest是ajax的核心機制，是一種支援非同步請求的技術。簡單的說，也就是javascript可以及時向伺服器提出請求和處理響應，而不阻塞使用者。達到無重新整理的效果。

所以要想理解Ajax原理就要先理解XMLHttpRequest的工作原理。

  首先，我們先來看看XMLHttpRequest這個對象的屬性。

 

通過上面對XMLHttpRequest對象的理解，我們通過一個樣本來看它的工作原理：

這是一個驗證input標籤是不是為空白的一個Ajax的樣本：

function validate(field) {<br /> if (trim(field.value).length != 0) {<br />var xmlHttp = null;<br />//表示當前瀏覽器不是ie,如ns,firefox<br />if(window.XMLHttpRequest) {<br /> xmlHttp = new XMLHttpRequest();<br />} else if (window.ActiveXObject) {<br /> xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br />}<br />var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();</p><p>//佈建要求方式為GET，佈建要求的URL，設定為非同步提交<br />xmlHttp.open("GET", url, true);</p><p>//將方法地址複製給onreadystatechange屬性<br />//類似於電話號碼<br />xmlHttp.onreadystatechange=function() {<br />//Ajax引擎狀態為成功<br />if (xmlHttp.readyState == 4) {<br /> //HTTP協議狀態為成功<br /> if (xmlHttp.status == 200) {<br />if (trim(xmlHttp.responseText) != "") {<br /> //alert(xmlHttp.responseText);<br /> document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"<br />}else {<br /> document.getElementById("spanUserId").innerHTML = "";<br /> }<br /> }else {<br /> alert("請求失敗，錯誤碼=" + xmlHttp.status);<br /> }</p><p> };</p><p>//將設定資訊發送到Ajax引擎<br />xmlHttp.send(null);<br /> } else {<br />document.getElementById("spanUserId").innerHTML = "";<br /> }<br />}<br />

首先建立一個XMLHttpRequest對象，之後javaspcript方法檢查XMLHttpRequest的整體狀態並且保證它已經完成（readyStatus=4），即資料已經發送完畢。然後根據伺服器的設定詢問請求狀態，如果一切已經就緒（status=200），那麼就執行下面需要的操作。

 

對於XmlHttpRequest的兩個方法，open和send，其中open方法指定了：

a、向伺服器提交資料的類型，即post還是get。

b、請求的url地址和傳遞的參數。

c、傳輸方式，false為同步，true為非同步。預設為true。如果是非同步通訊方式(true)，客戶機就不等待伺服器的響應；如果是同步方式(false)，客戶機就要等到伺服器返回訊息後才去執行其他動作。

之後調用Send方法用來發送請求。

 

  通過這個樣本我們看到Ajax 基本上就是把 JavaScript 技術和XMLHttpRequest對象放在 Web 表單和伺服器之間。當使用者向伺服器請求時，資料發送給一些 JavaScript 代碼而不是直接發送給伺服器。JavaScript代碼在幕後發送非同步請求,然後伺服器將資料返回 JavaScript 代碼，後者決定如何處理這些資料,它可以迅速更新表單資料。這就是Ajax的原理所在。

4.  用圖來理解Ajax原理