Ajax

什麼是 AJAX ？

AJAX = 非同步 JavaScript 和 XML。

AJAX 不是新的編程語言，而是一種使用現有標準的新方法

AJAX 是一種用於創建快速動態網頁的技術。

通過在後臺與伺服器進行少量數據交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

XMLHttpRequest 對象

Ajax的核心是JavaScript對象XmlHttpRequest

 1 <script type="text/javascript">
 2             function createXHR(){
 3                 var xhr = null;
 4                 try {
 5                     // Firefox, Opera 8.0+, Safari，IE7+
 6                     xhr = new XMLHttpRequest();
 7                 }
 8                 catch (e) {
 9                     // Internet Explorer 
10                     try {
11                         xhr = new ActiveXObject("Msxml2.XMLHTTP");
12                     }
13                     catch (e) {
14                         try {
15                             xhr = new ActiveXObject("Microsoft.XMLHTTP");
16                         }
17                         catch (e) {
18                             xhr = null;
19                         }
20                     }
21                 }
22                 return xhr;
23             }
24         </script>

XMLHttpRequest對象用法

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

在使用XMLHttpRequest對象時要調用的第一個方法是open方法，調用方式：XMLHttpRequest.open(“get”,”default.aspx”,true); 這段代碼會針對default.aspx頁面發送get請求，關於這段代碼有三點需要註意：

1. URL是相對於當前頁面的路徑，也可以使用絕對路徑

2. 調用open方法並不會真正的發送請求，而是初始化一個請求準備發送

3. 只能向同一個域中使用相同協議和埠的URL發送請求，否則會因為安全原因報錯

要想把請求發往伺服器需要調用send方法，send方法接受一個參數，參數是請求主體要發送的數據，如果不需要發送數據則傳入null，在調用send方法之後請求被髮往伺服器，如下

xhr.send(null);

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

1. responseText：作為響應主體被返回的文本

2. responseXML：如果響應內容的類型是”text/xml”或”application/xml”，這個屬性將保存包含著相應數據的XML文檔

3. status：響應的HTTP狀態（200,404,500等）

4. statusText：HTTP狀態說明

onreadystatechange 事件

當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下麵是 XMLHttpRequest 對象的三個重要的屬性：

在 onreadystatechange 事件中，我們規定當伺服器響應已做好被處理的準備時所執行的任務。

當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：

1 xmlhttp.onreadystatechange=function()
2   {
3   if (xmlhttp.readyState==4 && xmlhttp.status==200)
4     {
5     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
6     }
7   }

我們可以在接受響應之前調用abort方法取消非同步請求：XMLHttpRequest .abort();

註意：

在使用XMLHttpRequest對象的send()方法時，如果使用的是get請求或者不需要發送數據的post請求時，需要使用send(null);

如果想要發送數據數據，則需要使用post請求，先使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據：

1 xmlhttp.open("POST","ajax_test.asp",true);
2 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3 xmlhttp.send("fname=Bill&lname=Gates");