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

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

注釋部分可以單個(gè)放開進(jìn)行測(cè)試.

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){ // 請(qǐng)求成功
        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{ // 請(qǐng)求失敗
          console.log(xhr.response);
      }
    
  }
};
xhr.ontimeout = function(event){
  console.log("請(qǐng)求超時(shí)！");
}
xhr.setRequestHeader("Content-Type","application/json");
xhr.send();

// xhr.abort();  // 中斷請(qǐng)求

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

UNSENT: 值為 0,表示xhr實(shí)例已經(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)獲取到請(qǐng)求頭.

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

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

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

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

            
        }
    }

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

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

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

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){ // 請(qǐng)求成功
          console.log(xhr.responseText); // 執(zhí)行到這里會(huì)報(bào)錯(cuò)
            
      }else{ // 請(qǐng)求失敗
          console.log(JSON.parse(xhr.response));
      }
    
  }
};
xhr.send();

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

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

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

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

請(qǐng)求不成功

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

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

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

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

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

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

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

console.log(xhr.uplaod);

此屬性為一個(gè)布爾值,表示是否將驗(yàn)證信息(例如cookie)傳入到header中.此屬性只針對(duì)跨站請(qǐng)求有效.

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

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

onerror:請(qǐng)求過程中發(fā)生錯(cuò)誤時(shí)出發(fā)此事件處理程序.

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

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

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

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

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

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

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

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

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

url:請(qǐng)求的路徑.

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

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

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

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

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

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