Ajax的原生方法

簡介

Ajax, 是使用XMLHttpRequest對象與服務器進行通訊。它能夠發送和接收各類格式的信息，包括JSON，XML，HTML和文本文件。它有如下兩個功能：

• 在不從新加載頁面的狀況下向服務器發出請求
• 接收並處理來自服務器的數據

---

步驟 1 建立XMLHttpRequest對象

if (window.XMLHttpRequest) { // 新瀏覽器...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // 舊瀏覽器
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

---

步驟 2 爲XMLHttpRequest對象分配處理函數

方法1 分配函數

httpRequest.onreadystatechange = nameOfTheFunction;

方法2 分配匿名函數

httpRequest.onreadystatechange = function () {};

---

步驟 3 經過open( ),send( )做出HTTP請求

httpRequest.open('GET', '[http://www.example.org/some.file](http://www.example.org/some.file)', true);
httpRequest.send();

open( ) 方法

參數1 HTTP請求的方法 GET、 POST、 HEAD 等，需大寫
參數2 發送請求的URL
參數3 異步選項

send( ) 方法

若是使用POST方法，則send的參數爲想要發送到服務器的任何數據

---

步驟 4 處理服務器響應

1.檢查請求狀態

if (httpRequest.readyState === 4) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

請求狀態代碼

• 0（未初始化）或（請求未初始化）
• 1（加載）或（創建服務器鏈接）
• 2（已加載）或（請求收到）
• 3（交互式）或（處理請求）
• 4（完成）或（請求完成，響應準備就緒）

2.檢查HTTP響應代碼

經過檢查200OK響應代碼，區分AJAX調用是否成功

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

3.進行數據操做

在檢查請求的狀態和響應的HTTP狀態代碼以後，能夠使用服務器發送的數據進行任何所需的操做。

httpRequest.responseText - 以文本字符串的形式返回服務器響應
httpRequest.responseXML- 做爲XMLDocument能夠使用JavaScript DOM函數遍歷的對象返回響應