AJAX總結(jié)（三），XMLHttpRequest對象

DrizzleX 發(fā)布于2019-08-20 13:42 / 1153人閱讀

摘要：包括對象的本質(zhì)，請求和響應(yīng)。下例為小張發(fā)送給大元的便條，存儲為。表的值常量值含義尚未調(diào)用已經(jīng)調(diào)用接收到頭信息接收到響應(yīng)主體響應(yīng)完成為了監(jiān)聽事件，請把事件處理函數(shù)設(shè)置為對象的屬性。響應(yīng)包狀態(tài)碼，響應(yīng)頭和響應(yīng)主體。

前言

博主博客：Stillwater的博客
知乎專欄：前端汪汪
本文為作者原創(chuàng)轉(zhuǎn)載請注明出處：

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

??這篇文章介紹了XMLHttpRequest對象相關(guān)知識。包括：XMLHttpRequest對象的本質(zhì)，Http請求和Http響應(yīng)。

一、XMLHttpRequest對象的本質(zhì)

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

XMLHttpRequest = XML + Http + Request 。

什么是XML？

??XML設(shè)計(jì)用來傳送及攜帶數(shù)據(jù)信息，不用來表現(xiàn)或展示數(shù)據(jù)，HTML語言則用來表現(xiàn)數(shù)據(jù)，所以XML用途的焦點(diǎn)是它說明數(shù)據(jù)是什么，以及攜帶數(shù)據(jù)信息。XML被廣泛用來作為跨平臺之間交互數(shù)據(jù)的形式，主要針對數(shù)據(jù)的內(nèi)容。
??例如，XML定義結(jié)構(gòu)、存儲信息、傳送信息。下例為小張發(fā)送給大元的便條，存儲為XML。這XML文檔僅是純粹的信息標(biāo)簽，這些標(biāo)簽意義的展開依賴于應(yīng)用它的程序。


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

什么是Http？

??超文本傳輸協(xié)議（英文：HyperText Transfer Protocol，縮寫：HTTP）是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議。設(shè)計(jì)HTTP最初的目的是為了提供一種發(fā)布和接收HTML頁面的方法。本文后面會詳細(xì)介紹AJAX技術(shù)相關(guān)的Http知識。

什么是Request？

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

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

是一個可以發(fā)送Http請求，處理Http響應(yīng)，與服務(wù)器之間進(jìn)行異步交換數(shù)據(jù)的對象，其核心是Http。

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

二、Http請求

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

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

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

請求頭（可選）

請求主體（可選）

創(chuàng)建XMLHttpRequest對象之后，發(fā)起Http請求的下一步是調(diào)用XMLHttpRequest對象的open()方法去指定這個請求的兩個必要部分：請求方法和URL。

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

open()的第一個參數(shù)指定Http請求方法，通常用大寫字母來匹配Http協(xié)議。open()的第二個參數(shù)是URL，是請求的主要內(nèi)容。如果有請求頭的話，請求進(jìn)程的下一個步驟是設(shè)置它。例如，POST請求需要“Content-type”。

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

使用XMLHttpRequest發(fā)起Http請求的最后一步是指定請求主體（可選）并向服務(wù)器發(fā)送它。使用send()方法像如下這樣做：

request.send(null);

GET請求沒有主體，所以應(yīng)該傳遞null或省略這個參數(shù)。

Http請求的各部分有指定順序：請求方法和URL首先到達(dá)，然后是請求頭，最后是請求主體。調(diào)用XMLHttpRequest方法的順序必須匹配Http請求的順序。例如：setRequestHeader()方法的調(diào)用必須在open()方法之后，send()方法之前，否則將拋出異常。

例：用POST方法發(fā)送純文本給服務(wù)器

function postMessage(msg){
    var request = new XMLHttpRequest();    //創(chuàng)建新請求
    request.open("POST","/log.php");       //用POST向服務(wù)器端發(fā)送腳本
    request.setRequestHeader("Content-type","text/plain;charset=UTF-8");        //請求頭設(shè)置
    request.send(msg);              //把msg作為請求主體發(fā)送
    }                               //由于沒有指定響應(yīng)函數(shù)，所以我們將忽略任何響應(yīng)

三、Http響應(yīng)

服務(wù)器返回的Http響應(yīng)包含3部分：

數(shù)字和文字組成的狀態(tài)碼，用來顯示請求的成功和失敗

響應(yīng)頭

響應(yīng)主體

我們可以通過XMLHttpRequest對象的屬性和方法來獲取上述響應(yīng)包括的三個部分。

status和statusText屬性以數(shù)字和文本的形式返回Http狀態(tài)碼。

使用getResponseHeader()和getAllResponseHeaders()能查詢響應(yīng)頭。

響應(yīng)主體可以從responseText屬性中得到文本形式的，從responseXML屬性中得到Document形式的。

readyState是一個整數(shù)，指定了Http請求的狀態(tài)。

表：XMLHttpRequest的readyState值

常量	值	含義
UNSENT	0	open()尚未調(diào)用
OPENED	1	open()已經(jīng)調(diào)用
HEADERS_RECEIVED	2	接收到頭信息
LOADING	3	接收到響應(yīng)主體
DONE	4	響應(yīng)完成

為了監(jiān)聽readystatechange事件，請把事件處理函數(shù)設(shè)置為XMLHttpRequest對象的onreadystatechange屬性。

例：獲取Http響應(yīng)的onreadystatechange

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

四、總結(jié)

本文介紹了XMLHttpRequest對象的本質(zhì)是一個可以發(fā)送Http請求，處理Http響應(yīng)，與服務(wù)器之間進(jìn)行異步交換數(shù)據(jù)的對象，其核心是Http。然后介紹了Http請求和響應(yīng)包括的具體內(nèi)容。Http請求包括：方法，URL，請求頭，請求主體。Http響應(yīng)包：狀態(tài)碼，響應(yīng)頭和響應(yīng)主體。

參考文獻(xiàn)：

[1]維基百科
[2]JavaScript權(quán)威指南

云服務(wù)器 GPU云服務(wù)器大學(xué)三年php總結(jié) AJAX核心對象 js ajax對象 XMLHttpRequest

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81196.html

發(fā)表評論

登陸后可評論

0條評論

DrizzleX

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2038·2023-04-26 01:33
pytorch

閱讀 1666·2023-04-26 00:52
#黑五#A400互聯(lián)：全場VPS月付七折，洛杉磯1核1G年付118元，三網(wǎng)聯(lián)通9929線路

閱讀 1047·2021-11-18 13:14
站長必備的6款免費(fèi)FTP服務(wù)器連接軟件（你在使用哪款FTP軟件）

閱讀 5454·2021-09-26 10:18
數(shù)據(jù)庫主機(jī)地址是什么-數(shù)據(jù)庫那個是主機(jī)？

閱讀 2915·2021-09-22 15:52
瀏覽器的工作原理整理

閱讀 1495·2019-08-29 17:15
css布局簡史與決勝未來的第四代css布局技術(shù)

閱讀 3025·2019-08-29 16:11
前端那些典型布局方案

閱讀 1044·2019-08-29 16:11

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

AJAX總結(jié)（三），XMLHttpRequest對象

相關(guān)文章

***AJAX總結(jié)（二），手寫AJAX***

Ajax筆記

***Ajax的全面總結(jié)***

**從0到1學(xué)AJAX，這篇就夠了！（進(jìn)階三）**

**從0到1學(xué)AJAX，這篇就夠了?。ㄟM(jìn)階三）**

發(fā)表評論

0條評論

DrizzleX

男|高級講師

TA的文章

tensorflow

pytorch

#黑五#A400互聯(lián)：全場VPS月付七折，洛杉磯1核1G年付118元，三網(wǎng)聯(lián)通9929線路

站長必備的6款免費(fèi)FTP服務(wù)器連接軟件（你在使用哪款FTP軟件）

數(shù)據(jù)庫主機(jī)地址是什么-數(shù)據(jù)庫那個是主機(jī)？

瀏覽器的工作原理整理

css布局簡史與決勝未來的第四代css布局技術(shù)

前端那些典型布局方案

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

AJAX總結(jié)（三），XMLHttpRequest對象

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

AJAX總結(jié)（三），XMLHttpRequest對象