異步請求之XMLHttpRequest篇

denson 發(fā)布于2019-08-21 16:40 / 1071人閱讀

摘要：簡介對象可以實現(xiàn)頁面無刷新來實現(xiàn)與服務(wù)端進行數(shù)據(jù)交互最先有微軟公司設(shè)計，隨后被等使用現(xiàn)在已成為異步請求的標(biāo)準(zhǔn)，幾乎所有的瀏覽器都支持此對象它支持的異步請求協(xié)議包括，，為便于介紹后面我們將的實例對象稱作實例注釋部分可以單個放開進行測試請求成功

XMLHttpRequest 簡介

XMLHttpRequest對象可以實現(xiàn)頁面無刷新來實現(xiàn)與服務(wù)端進行數(shù)據(jù)交互.最先有微軟公司設(shè)計，隨后被Google,Mozilla等使用.現(xiàn)在已成為異步請求的標(biāo)準(zhǔn)，幾乎所有的瀏覽器都支持此對象.它支持的異步請求協(xié)議包括HTTP，file，ftp.為便于介紹,后面我們將XMLHttpRequest的實例對象稱作xhr.

實例

注釋部分可以單個放開進行測試.

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc&page=1&per_page=10";

xhr.open(method, url, true);
xhr.responseType = "json";

// xhr.timeout = 1000;
// xhr.overrideMimeType("text/xml");
xhr.onreadystatechange = function () {
  
  if(xhr.readyState === xhr.DONE) {
      if(xhr.status === 200){ // 請求成功
        console.log(xhr.response);
      // console.log(JSON.parse(xhr.responseText));
      // console.log(xhr.upload);
      
        //console.log(xhr.responseXML);
      //console.log(xhr.responseURL);
      //console.log(xhr.status);
      //console.log(xhr.statusText);
      //console.log("Content-Type:",xhr.getResponseHeader("Content-Type"));
      //console.log(xhr.responseURL);
      //console.log(xhr.getAllResponseHeaders());    
      }else{ // 請求失敗
          console.log(xhr.response);
      }
    
  }
};
xhr.ontimeout = function(event){
  console.log("請求超時！");
}
xhr.setRequestHeader("Content-Type","application/json");
xhr.send();

// xhr.abort();  // 中斷請求

屬性 UNSENT,OPEND,HEADERS_RECEIVED,LOADING,DONE

這五個屬性的值代表xhr.readyState可能存在的值

UNSENT: 值為 0,表示xhr實例已經(jīng)創(chuàng)建.但尚未執(zhí)行xhr.open()方法.

OPENED: 值為 1,表示xhr.open()已經(jīng)執(zhí)行.

HEADS_RECEIVED: 值為 2,表示xhr.send()已經(jīng)執(zhí)行,服務(wù)端已經(jīng)獲取到請求頭.

LOADING: 值為 3,表示正在接受xhr.responseText,通俗講就是正在獲取服務(wù)端返回的數(shù)據(jù).

DONE: 值為 4,表示整個請求流程已經(jīng)完成.

onreadystatechange

從詞面意思可以了解到此屬性為事件處理程序,當(dāng)xhr.readyState屬性發(fā)生變化時，觸發(fā)此事件.

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === xhr.DONE){
            if(xhr.status === 200){
                console.log("請求成功!");
            }else{
                console.log("請求失敗!");
            }

            
        }
    }

readyState

只讀屬性,表示整個異步請求中的狀態(tài),其存在五個可能的值.

response

只讀屬性,此屬性返回服務(wù)端的響應(yīng)內(nèi)容,客戶端可以通過xhr.responseType指定響應(yīng)內(nèi)容的類型.

responseText

只讀屬性,此屬性為xhr.response的一個特例,返回的響應(yīng)內(nèi)容為text類型.如果指定了xhr.responseType為非text類型,則讀取此屬性時會報錯.

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc&page=1&per_page=10";

xhr.open(method, url, true);
xhr.responseType = "json";
xhr.onreadystatechange = function () {

  if(xhr.readyState === xhr.DONE) {
      if(xhr.status === 200){ // 請求成功
          console.log(xhr.responseText); // 執(zhí)行到這里會報錯
            
      }else{ // 請求失敗
          console.log(JSON.parse(xhr.response));
      }
    
  }
};
xhr.send();

由于我們指定了xhr.responseType的值為json,獲取響應(yīng)內(nèi)容用xhr.response就OK了.

responseType

responseType定義響應(yīng)內(nèi)容(即xhr.response)的類型,其值為枚舉類型,分別為:arraybuffer,blob,document,json,text.如果傳入的值為空字符串,則默認為text.

responseURL

返回序列化后的響應(yīng)URL.

responseXML

返回被轉(zhuǎn)化為XML格式的響應(yīng)內(nèi)容,以下情況將返回null.

請求不成功

還未執(zhí)行xhr.send()方法

響應(yīng)內(nèi)容不能被轉(zhuǎn)換為XML或者HTML

status

返回響應(yīng)的狀態(tài)碼,請求成功返回的狀態(tài)碼為200,狀態(tài)碼存在的可能值列表請點擊狀態(tài)碼列表查看.

statusText

返回響應(yīng)的狀態(tài)碼對應(yīng)的文字描述,例如 200 對應(yīng) "OK".

timeout

設(shè)置請求的超時毫秒數(shù)，當(dāng)請求的時長超出了響應(yīng)的毫秒數(shù),請求會自動中斷.如果是在IE瀏覽器中,該屬性的設(shè)置需要在open()方法之后和send()方法之前.

ontimeout

此屬性為請求超時的事件處理程序,請求超時，觸發(fā)此方法.

upload

只讀屬性,返回一個對象，對象包含了該xhr可以觸發(fā)的事件.

console.log(xhr.uplaod);

withCredentials

此屬性為一個布爾值,表示是否將驗證信息(例如cookie)傳入到header中.此屬性只針對跨站請求有效.

onprogress,onabort,onerror,onload,onloadend,onloadstart

這些屬性是xhr的事件處理程序.

onprogress:可能會在請求的過程中多次調(diào)用,在監(jiān)測文件上傳進度時可以使用此屬性.

onerror:請求過程中發(fā)生錯誤時出發(fā)此事件處理程序.

onabort:請求中斷會觸發(fā)此事件處理處理程序.

onload:請求執(zhí)行成功后會觸發(fā)此事件處理程序.

onloadstart:請求開始時觸發(fā)此事件處理程序.

onloadend:請求完成是觸發(fā)此事件處理程序,onload是必須要成功才會調(diào)用.

方法 abort()

中斷當(dāng)前請求,當(dāng)執(zhí)行xhr.send()后此方法才能生效.

getAllResponseHeaders()

返回響應(yīng)的header信息(String 類型)，以CRLF分割.如果沒有接收到響應(yīng)頭,則返回null.

getResponseHeader(name)

獲取某個header屬性的值,name參數(shù)為需要獲取屬性值的key.如果header對象不存在此屬性或者獲取header對象失敗,則返回null.

open(method,url,async)

初始化請求,要執(zhí)行請求必選先執(zhí)行此方法.

參數(shù)說明

method:HTTP(s)請求方法,例如GET,POST,PUT,DELETE .

url:請求的路徑.

async:是否為異步請求,一般情況我們這個參數(shù)會傳true.

ovverideMimeType(mimetype)

將服務(wù)端返回的信息強制轉(zhuǎn)化為mimetype類型.

send()

發(fā)送請求,如果請求類型為異步請求,send()方法的返回值會立即返回.

setRequestHeader()

設(shè)置HTTP請求頭.此方法需要在open()之后和send()之前執(zhí)行.如果設(shè)置了不被支持的屬性,請求可能會報錯.

    var xhr = new XMLHttpRequest();
    xhr.setRequestHeader("Content-Type","application/json");

兼容性

以上提到的屬性和方法在IE7+,Chorme,Firefox等主流瀏覽器都兼容，其中onprogress,onabort,onerror,onload,onloadend,onloadstart等事件處理程序在IE下需IE10+才能正常運行.

云服務(wù)器 GPU云服務(wù)器之基礎(chǔ)篇異步請求 js異步請求數(shù)據(jù) ajax的異步請求

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

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

發(fā)表評論

登陸后可評論

0條評論

denson

男|高級講師

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

TA的文章

pacificrack黑五優(yōu)惠：混合服務(wù)器3折，低至$30/月，E5-2650v2/16G/240G

閱讀 2567·2021-11-22 12:05
學(xué)stm32有機會進大公司嗎？如何選擇？

閱讀 3453·2021-10-14 09:42
舍利云：日本vps電信聯(lián)通CN2移動直連2核2G內(nèi)存5M帶寬28.8元起

閱讀 1686·2021-07-28 00:15
自適應(yīng)和響應(yīng)式

閱讀 1989·2019-08-30 11:08
【學(xué)習(xí)筆記】CSS深入理解之float

閱讀 1487·2019-08-29 17:31
snippet,讓你編碼效率翻倍

閱讀 932·2019-08-29 16:42
JS 1-數(shù)據(jù)類型

閱讀 2340·2019-08-26 11:55
javascript 數(shù)組的常用方法

閱讀 2119·2019-08-26 11:49

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

資訊專欄INFORMATION COLUMN

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

異步請求之XMLHttpRequest篇

相關(guān)文章

前端面試題 -- JS篇

ajax請求相關(guān)

ajax請求相關(guān)

ajax請求相關(guān)

ajax入門

發(fā)表評論

0條評論

denson

男|高級講師

TA的文章

pacificrack黑五優(yōu)惠：混合服務(wù)器3折，低至$30/月，E5-2650v2/16G/240G

學(xué)stm32有機會進大公司嗎？如何選擇？

舍利云：日本vps電信聯(lián)通CN2移動直連2核2G內(nèi)存5M帶寬28.8元起

自適應(yīng)和響應(yīng)式

【學(xué)習(xí)筆記】CSS深入理解之float

snippet,讓你編碼效率翻倍

JS 1-數(shù)據(jù)類型

javascript 數(shù)組的常用方法

最新活動

資訊專欄INFORMATION COLUMN

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

異步請求之XMLHttpRequest篇

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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