AJAX總結（三），XMLHttpRequest對象

前言

博主博客：Stillwater的博客
知乎專欄：前端汪汪
本文爲做者原創轉載請註明出處：

http://hiztx.top/2017/01/13/a...

---

  這篇文章介紹了XMLHttpRequest對象相關知識。包括：XMLHttpRequest對象的本質，Http請求和Http響應。

1、XMLHttpRequest對象的本質

  爲了更好的理解XMLHttpRequest對象的本質，咱們將其分紅三部分來理解。顧名思義，

XMLHttpRequest = XML + Http + Request 。

什麼是XML？

  XML設計用來傳送及攜帶數據信息，不用來表現或展現數據，HTML語言則用來表現數據，因此XML用途的焦點是它說明數據是什麼，以及攜帶數據信息。XML被普遍用來做爲跨平臺之間交互數據的形式，主要針對數據的內容。
  例如，XML定義結構、存儲信息、傳送信息。下例爲小張發送給大元的便條，存儲爲XML。這XML文檔僅是純粹的信息標籤，這些標籤意義的展開依賴於應用它的程序。

<?xml version="1.0"?>
<小紙條>
 <收件人>大元</收件人>
 <發件人>小張</發件人>
 <主題>問候</主題>
 <具體內容>早啊，飯吃了沒？ </具體內容>
</小紙條>

什麼是Http？

  超文本傳輸協議（英文：HyperText Transfer Protocol，縮寫：HTTP）是互聯網上應用最爲普遍的一種網絡協議。設計HTTP最初的目的是爲了提供一種發佈和接收HTML頁面的方法。本文後面會詳細介紹AJAX技術相關的Http知識。

什麼是Request？

  Request翻譯爲請求，這個你們都知道。可是不少人會誤解，只有用瀏覽器（Chrome，Safari，IE），咱們才能向服務器發送Http請求。這是不對的。咱們換個角度，從服務器的角度思考。當服務器收到全世界各地發來的Http請求的時候，它並不知道屏幕的對面是誰，有多是正在網上衝浪的你，也有可能僅僅是一隻網絡爬蟲，甚至有可能就是咱們編寫的AJAX程序中的XMLHttpRequest對象而已。

  回到咱們的問題，XMLHttpRequest對象的本質是什麼？

是一個能夠發送Http請求，處理Http響應，與服務器之間進行異步交換數據的對象，其核心是Http。

  因此要想深刻理解XMLHttpRequest對象，那就要學習一些Http的知識了。請往下看。

2、Http請求

一個Http請求由4部分組成：

• Http請求方法（GET、POST、DELETE、PUT）

• 正在請求的URL（/home/index.html）

• 請求頭（可選）

• 請求主體（可選）

建立XMLHttpRequest對象以後，發起Http請求的下一步是調用XMLHttpRequest對象的open()方法去指定這個請求的兩個必要部分：請求方法和URL。

request.open("GET",/home/index.html);//請求方法：GET，URL：/home/index.html

open()的第一個參數指定Http請求方法，一般用大寫字母來匹配Http協議。open()的第二個參數是URL，是請求的主要內容。若是有請求頭的話，請求進程的下一個步驟是設置它。例如，POST請求須要「Content-type」。

request.setRequestHeader("Content-type","text/plain");

使用XMLHttpRequest發起Http請求的最後一步是指定請求主體（可選）並向服務器發送它。使用send()方法像以下這樣作：

request.send(null);

GET請求沒有主體，因此應該傳遞null或省略這個參數。

Http請求的各部分有指定順序：請求方法和URL首先到達，而後是請求頭，最後是請求主體。調用XMLHttpRequest方法的順序必須匹配Http請求的順序。例如：setRequestHeader()方法的調用必須在open()方法以後，send()方法以前，不然將拋出異常。

例：用POST方法發送純文本給服務器

function postMessage(msg){
    var request = new XMLHttpRequest();    //建立新請求
    request.open("POST","/log.php");       //用POST向服務器端發送腳本
    request.setRequestHeader("Content-type","text/plain;charset=UTF-8");        //請求頭設置
    request.send(msg);              //把msg做爲請求主體發送
    }                               //因爲沒有指定響應函數，因此咱們將忽略任何響應

3、Http響應

服務器返回的Http響應包含3部分：

• 數字和文字組成的狀態碼，用來顯示請求的成功和失敗

• 響應頭

• 響應主體

咱們能夠經過XMLHttpRequest對象的屬性和方法來獲取上述響應包括的三個部分。

• status和statusText屬性以數字和文本的形式返回Http狀態碼。

• 使用getResponseHeader()和getAllResponseHeaders()能查詢響應頭。

• 響應主體能夠從responseText屬性中獲得文本形式的，從responseXML屬性中獲得Document形式的。

• readyState是一個整數，指定了Http請求的狀態。

表：XMLHttpRequest的readyState值

常量	值	含義
UNSENT	0	open()還沒有調用
OPENED	1	open()已經調用
HEADERS_RECEIVED	2	接收到頭信息
LOADING	3	接收到響應主體
DONE	4	響應完成

爲了監聽readystatechange事件，請把事件處理函數設置爲XMLHttpRequest對象的onreadystatechange屬性。

例：獲取Http響應的onreadystatechange

//發出一個Http GET請求以得到指定URL的內容
//當響應成功到達，驗證它是不是純文本
//若是是，把它傳遞給指定回調函數
function getText(url,callback){
    var request = new XMLHttpRequest();         //建立新請求
    request.open("GET",url);            //指定待獲取的URL
    request.onreadystatechange = funciton(){            //定義事件處理函數
        if (request.readyState===4&&request.status===200{           //若是請求完成，則它是成功的
            var type = request.getResponseHeader("Content-Type");
            if(type.match(/^text/))             //確保響應是文本
                callback(request.responseText);             //把它傳遞給回調函數
            }
        };
        request.send(null)          //當即發送請求
}

4、總結

本文介紹了XMLHttpRequest對象的本質是一個能夠發送Http請求，處理Http響應，與服務器之間進行異步交換數據的對象，其核心是Http。而後介紹了Http請求和響應包括的具體內容。Http請求包括：方法，URL，請求頭，請求主體。Http響應包：狀態碼，響應頭和響應主體。

參考文獻：

[1]維基百科 [2]JavaScript權威指南