XMLHttpRequest快餐

2shou 發(fā)布于2019-08-20 17:35 / 1409人閱讀

摘要：一次完整的請(qǐng)求對(duì)于很多對(duì)象來說，都會(huì)有狀態(tài)，事件和方法。其中的狀態(tài)和事件其實(shí)就是對(duì)象的屬性。下載的事件屬于對(duì)象，上傳的事件屬于對(duì)象。事件傳輸被用戶取消。返回所有響應(yīng)頭信息響應(yīng)頭名和值如果響應(yīng)頭還沒接受則返回重寫由服務(wù)器返回的。

XMLHttpRequest可解釋為可擴(kuò)展超文本傳輸請(qǐng)求。它是一個(gè)瀏覽器Api，為客戶端提供了在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的功能。使得Javascript可以進(jìn)行HTTP(S)通信。特點(diǎn)是能在不更新頁面的情況下獲取數(shù)據(jù)，這使得網(wǎng)頁只更新一部分頁面而不會(huì)打擾到用戶。我們常接觸的Ajax的核心就是XMLHttpRequest。

一次完整的XMLHttpRequest請(qǐng)求

對(duì)于很多js對(duì)象來說，都會(huì)有狀態(tài)，事件和方法。其中的狀態(tài)和事件其實(shí)就是對(duì)象的屬性。狀態(tài)大多是一個(gè)值為function的屬性。同樣的，XMLHttpRequest也有這三樣?xùn)|西。

XMLHttpRequest狀態(tài)readyState

XMLHttpRequest有一下5種狀態(tài)：

0——unsent未打開————————————open()方法還未被調(diào)用
1——opened為發(fā)送————————————send()方法還未被調(diào)用
2——HEADERS_RECEIVED已獲取響應(yīng)頭——send()方法已經(jīng)被調(diào)用, 響應(yīng)頭和響應(yīng)狀態(tài)已經(jīng)返回
3——LOADING正在下載響應(yīng)體———————響應(yīng)體下載中; responseText中已經(jīng)獲取了部分?jǐn)?shù)據(jù)
4——DONE請(qǐng)求完成————————————整個(gè)請(qǐng)求過程已經(jīng)完畢

XMLHttpRequest的事件

onreadystatechange()

XMLHttpRequest提供了一個(gè)onreadystatechange事件用于監(jiān)聽XMLHttpRequest狀態(tài)的改變。當(dāng)狀態(tài)改變時(shí)會(huì)觸發(fā)此方法，用于對(duì)不同狀態(tài)下進(jìn)行處理，包括完成后的數(shù)據(jù)處理、發(fā)生錯(cuò)誤時(shí)關(guān)閉請(qǐng)求的處理、請(qǐng)求超時(shí)的處理等。
一個(gè)簡單的例子：

objXMLHttp.onreadystatechange =  processResponse(){
    if(objXMLHttp.readyState == 1){
        alert("XMLHttpRequest對(duì)象開始發(fā)送請(qǐng)求");
    }else if(objXMLHttp.readyState == 2){
        alert("XMLHttpRequest對(duì)象的請(qǐng)求發(fā)送完成");
    }else if(objXMLHttp.readyState == 3){
        alert("XMLHttpRequest對(duì)象開始讀取服務(wù)器的響應(yīng)");
    }else if(objXMLHttp.readyState == 4){
        alert("XMLHttpRequest對(duì)象讀取服務(wù)器響應(yīng)結(jié)束");
        if(objXMLHttp.status == 200){
            //信息已經(jīng)成功返回，開始處理信息
            //先捕獲下所有的請(qǐng)求頭
            var headers = objXMLHttp.getAllResponseHeaders();
            alert("所有的請(qǐng)求頭= "+headers);
            //得到服務(wù)器返回的信息
            var infor = objXMLHttp.responseText;
            alert("服務(wù)器端的響應(yīng) = "+infor);
        }else{
            alert("所請(qǐng)求的服務(wù)器端出了問題");
        }
    }
}

ontimeout
讓請(qǐng)求時(shí)長超過設(shè)定的時(shí)間時(shí)觸發(fā)此方法，可在此方法中關(guān)閉此次請(qǐng)求；

objXMLHttp.timeout = 5000;// 設(shè)定請(qǐng)求最大時(shí)長
objXMLHttp.ontimeout = function() {
    alert("請(qǐng)求超時(shí)！")
    objXMLHttp.abort();//關(guān)閉此次請(qǐng)求
}

onprogress
新版本的XMLHttpRequest(XMLHttpRequest2)對(duì)象，傳送數(shù)據(jù)的時(shí)候，有一個(gè)progress事件，用來返回進(jìn)度信息。
它分成上傳和下載兩種情況。下載的progress事件屬于XMLHttpRequest對(duì)象，上傳的progress事件屬于XMLHttpRequest.upload對(duì)象。

// 定義一個(gè)共用方法
function updateProgress(event) {
　　　　if (event.lengthComputable) {
　　　　　　var percentComplete = event.loaded / event.total;
　　　　}
　　}
// 在兩個(gè)事件上都引用此方法
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;

其中：
event.lengthComputable 長度可計(jì)算（true或false）
event.loaded 接收的字節(jié)數(shù)
event.total 總字節(jié)數(shù)

除了以上事件，XMLHttpRequest還有以下事件，可根據(jù)個(gè)人需要去實(shí)現(xiàn)對(duì)應(yīng)的方法。

　　* load事件：傳輸成功完成。
　　* abort事件：傳輸被用戶取消。
　　* error事件：傳輸中出現(xiàn)錯(cuò)誤。
　　* loadstart事件：傳輸開始。
　　* loadEnd事件：傳輸結(jié)束，但是不知道成功還是失敗。

XMLHttpRequest的其他屬性

除了上面的狀態(tài)和事件，XMLHttpRequest還有一些其他的屬性，用于配置或儲(chǔ)存數(shù)據(jù)。常用的有responseText、responseType、status等

responseType: 設(shè)置響應(yīng)類型，告訴服務(wù)器你期望的響應(yīng)格式（即返回的數(shù)據(jù)格式），默認(rèn)為""代表字符串。可選參數(shù)："arraybuffer"、"blob"、"document"、"json"、"text"
response：響應(yīng)實(shí)體的類型由 responseType 來指定，可以是 ArrayBuffer， Blob， Document， JavaScript 對(duì)象 (即 "json")，或者是字符串。如果請(qǐng)求未完成或失敗，則該值為 null
responseXML：本次請(qǐng)求的響應(yīng)是一個(gè) Document 對(duì)象，如果是以下情況則值為 null：請(qǐng)求未成功，請(qǐng)求未發(fā)送，或響應(yīng)無法被解析成 XML 或 HTML。當(dāng)響應(yīng)為text/xml 流時(shí)會(huì)被解析。當(dāng) responseType 設(shè)置為"document"，并且請(qǐng)求為異步的，則響應(yīng)會(huì)被當(dāng)做 text/html 流來解析
responseText：此次請(qǐng)求的響應(yīng)為文本，或是當(dāng)請(qǐng)求未成功或還未發(fā)送時(shí)為 null

status：該請(qǐng)求的響應(yīng)狀態(tài)（200、404、500等，更多值可參考http://tools.jb51.net/table/h...）

statusText：該請(qǐng)求的響應(yīng)狀態(tài)信息,包含一個(gè)狀態(tài)碼和原因短語 (例如 "200 OK")

timeout：超時(shí)毫秒數(shù)，同步請(qǐng)求不可用。默認(rèn)是0，永不超時(shí)。在 open() 和 send() 之間設(shè)置，超時(shí)會(huì)觸發(fā) xhr 的 timeout 事件

upload：只讀，ajax 上傳對(duì)象

withCredentials： Boolean，是否允許跨域響應(yīng)設(shè)置cookie，默認(rèn)是 false

XMLHttpRequest的方法 open()

初始化一個(gè)請(qǐng)求.此方法可以對(duì)需要請(qǐng)求的url進(jìn)行初始化才操作，包括設(shè)置請(qǐng)求類型、請(qǐng)求連接、是否異步等

open()接收的參數(shù)

XMLHttpRequest.open(method,url,async,user,password);

method: 請(qǐng)求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 如果下個(gè)參數(shù)是非HTTP(S)的URL,則忽略該參數(shù).
url:該請(qǐng)求所要訪問的URL
async: 一個(gè)可選的布爾值參數(shù)，默認(rèn)為true,意味著是否執(zhí)行異步操作
user:用戶名,可選參數(shù),為授權(quán)使用;默認(rèn)參數(shù)為空string
password:密碼,可選參數(shù),為授權(quán)使用;默認(rèn)參數(shù)為空string

setRequestHeader()

給指定的HTTP請(qǐng)求頭賦值.在這之前,你必須確認(rèn)已經(jīng)調(diào)用 open() 方法打開了一個(gè)url.

該方法接收兩個(gè)參數(shù)，一個(gè)是頭名稱一個(gè)是對(duì)應(yīng)的值

//兩個(gè)參數(shù)均為字符串
XMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312")

對(duì)應(yīng)的headers有哪些可以查閱：

http://tools.jb51.net/table/h...

send()

發(fā)送請(qǐng)求. 如果該請(qǐng)求是異步模式(默認(rèn)),該方法會(huì)立刻返回. 相反,如果請(qǐng)求是同步模式,則直到請(qǐng)求的響應(yīng)完全接受以后,該方法才會(huì)返回.

send()方法接收一個(gè)參數(shù)，表示請(qǐng)求發(fā)出時(shí)的請(qǐng)求體

XMLHttpRequest.send(data);

該參數(shù)也可以是一下幾種形式：ArrayBuffer、Blob 、Document 、DOMString、FormData。

abort()

如果請(qǐng)求已經(jīng)被發(fā)送,則立刻中止請(qǐng)求，此方法多用于超時(shí)的請(qǐng)求情況，在請(qǐng)求已發(fā)送但還未完成的這段過程中都可以調(diào)用此方法

XMLHttpRequest.abort();

getResponseHeader()

獲取XMLHttpRequest的對(duì)應(yīng)傳入的響應(yīng)頭，如果傳入的響應(yīng)頭不存在或響應(yīng)頭還沒被接受,則返回null。

XMLHttpRequest.getResponseHeader(ResponseHeaderKay);

getAllResponseHeader()

返回所有響應(yīng)頭信息(響應(yīng)頭名和值), 如果響應(yīng)頭還沒接受,則返回null

overrideMimeType()

重寫由服務(wù)器返回的MIME type。這個(gè)可用于, 例如，強(qiáng)制把一個(gè)響應(yīng)流當(dāng)作“text/xml”來處理和解析,即使服務(wù)器沒有指明數(shù)據(jù)是這個(gè)類型。注意，這個(gè)方法必須在send()之前被調(diào)用。

XMLHttpRequest.overrideMimeType(DOMString mimetype);

一個(gè)標(biāo)準(zhǔn)的XMLHttpRequest請(qǐng)求

step 1： 創(chuàng)建一個(gè)XMLHttpRequest對(duì)象

var objXMLHttp;
// 創(chuàng)建XMLHttpRequest對(duì)象
function createXMLHttpRequest(){
    //對(duì)于Firefox,Opera等遵守DOM 2規(guī)范的瀏覽器
    if(window.XMLHttpRequest){
        objXMLHttp = new XMLHttpRequest();
    }
    //對(duì)于IE瀏覽器
    else{
        //將IE瀏覽器不同的XMLHttp實(shí)現(xiàn)聲明為數(shù)組
        var MSXML = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
        //依次對(duì)每個(gè)XMLHttp創(chuàng)建XMLHttpRequest對(duì)象
        for(var i = 0; n< MSXML.length; i++){
            try{
                //微軟發(fā)布的是ActiveX控件
                objXMLHttp = new ActiveXObject(MSXML[i]);
                //如果正常創(chuàng)建XMLHttpRequest對(duì)象就使用break跳出循環(huán)
                break;
            }catch(e){
                alert("創(chuàng)建XMLHttpRequest對(duì)象失敗");
            }
        }
    }    
}

step 2: 封裝一個(gè)POST請(qǐng)求方法

/**
 * 通過post方式提交
 * 接收三個(gè)參數(shù)，分別是請(qǐng)求路徑，請(qǐng)求體,是否異步
 * */
function postSend(url,data,async){
     // 默認(rèn)async為true
     if(typeof async === "undefined") {
         async = true;
     }
    //調(diào)用剛才定義的方法，初始化XMLHttpRequest對(duì)象
    createXMLHttpRequest();
    //打開與服務(wù)器的連接，使用post方式
    objXMLHttp.open("POST", url, async);
    //post方式需要設(shè)置請(qǐng)求消息頭
    objXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //設(shè)置處理響應(yīng)的回調(diào)函數(shù)
    objXMLHttp.onreadystatechange = onChange;
    //發(fā)送請(qǐng)求并設(shè)置參數(shù)，參數(shù)的設(shè)置為param=value的形式
    objXMLHttp.send(data);
}

step 3： 封裝一個(gè)監(jiān)聽請(qǐng)求狀態(tài)的方法

/**
 * 設(shè)定的回調(diào)函數(shù)
 * */
function onChange(){
    //響應(yīng)完成且響應(yīng)正常
    if(objXMLHttp.readyState == 1){
        alert("XMLHttpRequest對(duì)象開始發(fā)送請(qǐng)求");
    }else if(objXMLHttp.readyState == 2){
        alert("XMLHttpRequest對(duì)象的請(qǐng)求發(fā)送完成");
    }else if(objXMLHttp.readyState == 3){
        alert("XMLHttpRequest對(duì)象開始讀取服務(wù)器的響應(yīng)");
    }else if(objXMLHttp.readyState == 4){
        alert("XMLHttpRequest對(duì)象讀取服務(wù)器響應(yīng)結(jié)束");
        if(objXMLHttp.status == 200){
            //信息已經(jīng)成功返回，開始處理信息
            //先捕獲下所有的請(qǐng)求頭
            var headers = objXMLHttp.getAllResponseHeaders();
            alert("所有的請(qǐng)求頭= "+headers);
            //得到服務(wù)器返回的信息
            var infor = objXMLHttp.responseText;
            alert("服務(wù)器端的響應(yīng) = "+infor);
        }else{
            alert("所請(qǐng)求的服務(wù)器端出了問題");
        }
    }
}

step 4: 調(diào)用Post請(qǐng)求

    var data = {
        id: "123456",
        name: "拉普拉斯的魔女"
    }
    Postsend("https://baidu.com/book/IT",data,true)；

參考：

http://www.cnblogs.com/shenli...
http://www.ruanyifeng.com/blo...
https://developer.mozilla.org...

云服務(wù)器 GPU云服務(wù)器中國快餐 XMLHttpRequest XMLHttpRequest介紹 XMLHttpRequest實(shí)例

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83705.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

2shou

男|高級(jí)講師

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

TA的文章

搬瓦工：雙十一優(yōu)惠來襲，全年最便宜，11% 優(yōu)惠，循環(huán)折扣，續(xù)費(fèi)不漲價(jià)，終身 8.9 折！

閱讀 3968·2021-11-11 10:58
數(shù)字基礎(chǔ)設(shè)施開源操作系統(tǒng)歐拉全新發(fā)布

閱讀 3341·2021-09-26 09:46
移動(dòng)端網(wǎng)頁布局適配rem方案小結(jié)

閱讀 1922·2019-08-30 15:55
【Amaple教程】3. 模板指令與狀態(tài)數(shù)據(jù)（state）

閱讀 987·2019-08-30 13:52
Python requests 安裝與開發(fā)

閱讀 1955·2019-08-29 13:11
《Python web開發(fā)》筆記一：網(wǎng)頁開發(fā)基礎(chǔ)

閱讀 3036·2019-08-29 11:27
call/apply/bind區(qū)別圖解

閱讀 1526·2019-08-26 18:18
vue輕量級(jí)后臺(tái)管理系統(tǒng)基礎(chǔ)模板

閱讀 2648·2019-08-23 14:17

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

XMLHttpRequest快餐

相關(guān)文章

Promise快餐

Tensorflow快餐教程(5) - 范數(shù)

Tensorflow快餐教程（3）- 向量

發(fā)表評(píng)論

0條評(píng)論

2shou

男|高級(jí)講師

TA的文章

搬瓦工：雙十一優(yōu)惠來襲，全年最便宜，11% 優(yōu)惠，循環(huán)折扣，續(xù)費(fèi)不漲價(jià)，終身 8.9 折！

數(shù)字基礎(chǔ)設(shè)施開源操作系統(tǒng)歐拉全新發(fā)布

移動(dòng)端網(wǎng)頁布局適配rem方案小結(jié)

【Amaple教程】3. 模板指令與狀態(tài)數(shù)據(jù)（state）

Python requests 安裝與開發(fā)

《Python web開發(fā)》筆記一：網(wǎng)頁開發(fā)基礎(chǔ)

call/apply/bind區(qū)別圖解

vue輕量級(jí)后臺(tái)管理系統(tǒng)基礎(chǔ)模板

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

XMLHttpRequest快餐

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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