AJAX總結（三），XMLHttpRequest對象

DrizzleX 發布于2019-08-20 13:42 / 1151人閱讀

摘要：包括對象的本質，請求和響應。下例為小張發送給大元的便條，存儲為。表的值常量值含義尚未調用已經調用接收到頭信息接收到響應主體響應完成為了監聽事件，請把事件處理函數設置為對象的屬性。響應包狀態碼，響應頭和響應主體。

前言

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

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

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

一、XMLHttpRequest對象的本質

??為了更好的理解XMLHttpRequest對象的本質，我們將其分成三部分來理解。顧名思義，

XMLHttpRequest = XML + Http + Request 。

什么是XML？

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


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

什么是Http？

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

什么是Request？

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

??回到我們的問題，XMLHttpRequest對象的本質是什么？

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

??所以要想深入理解XMLHttpRequest對象，那就要學習一些Http的知識了。請往下看。

二、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作為請求主體發送
    }                               //由于沒有指定響應函數，所以我們將忽略任何響應

三、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)          //立即發送請求
}

四、總結

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

參考文獻：

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

GPU云服務器云服務器大學三年php總結 AJAX核心對象 js ajax對象 XMLHttpRequest

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81196.html

AJAX總結（二），手寫AJAX

摘要：創建對象指定響應函數打開連接指定請求發送請求創建響應函數注第三步是使用對象的方法，字面意思是打開的意思，即打開連接。前言博主博客：Stillwater的博客知乎專欄：前端汪汪本文為作者原創轉載請注明出處：http://hiztx.top/2017/01/12/a... 在前端面試的時候經常會有如下情景。AJAX會嗎？能不能手寫個AJAX？第一個問題可以參見我的另一篇博客，AJAX...

娣辯孩 2019-08-20 13:41 評論0 收藏0
Ajax筆記

摘要：本文主要是我學習的筆記，不涉及到原理，只是記錄如何使用。成功的含義取決于方法資源已被提取并在消息正文中傳輸。是請求鏈接到服務器，服務器響應錯誤后服務器返回瀏覽器的狀態碼。是指響應時間，開始請求到接收到響應開始處理的時間，單位為。本文主要是我學習ajax的筆記，不涉及到原理，只是記錄如何使用。如果有錯歡迎各位大佬指出。提前先轉一篇寫的非常全面的博客你真的會使用XMLHttpReques...

macg0406 2019-08-23 13:48 評論0 收藏0
Ajax的全面總結

摘要：實現流程創建對象打開請求地址，初始化數據發送請求數據監聽回調函數狀態收到服務器返回的應答結果。請求完成后回調函數請求成功或失敗時均調用。 Ajax在前端開發中有著舉足輕重的地位，關于Ajax的使用和注意事項一直是一個重要的話題，借此機會，本文希望對Ajax做一個全面的總結，徹底揭開Ajax的神秘面紗。一.什么是Ajax Ajax(Asynchronous JavaScript and...

lookSomeone 2019-08-20 18:54 評論0 收藏0
從0到1學AJAX，這篇就夠了！（進階三）

摘要：一定在發送請求之前注冊不管同步或者異步為了讓這個事件可以更加可靠一定觸發，一定是先注冊了解同步模式即可，切記不要使用同步模式。至此，我們已經大致了解了的基本。一種數據描述手段，基本現在的項目不用了，淘汰的原因數據冗余太多。什么是ajax？ AJAX 就是瀏覽器提供的一套 API，可以通過 JavaScript 調用，從而實現通過代碼控制請求與響應。實現網絡編程 1、使用 AJAX 的...

CoderDock 2019-08-23 15:32 評論0 收藏0
從0到1學AJAX，這篇就夠了！（進階三）

摘要：一定在發送請求之前注冊不管同步或者異步為了讓這個事件可以更加可靠一定觸發，一定是先注冊了解同步模式即可，切記不要使用同步模式。至此，我們已經大致了解了的基本。一種數據描述手段，基本現在的項目不用了，淘汰的原因數據冗余太多。什么是ajax？ AJAX 就是瀏覽器提供的一套 API，可以通過 JavaScript 調用，從而實現通過代碼控制請求與響應。實現網絡編程 1、使用 AJAX 的...

microelec 2019-07-01 11:24 評論0 收藏0