異步請求之XMLHttpRequest篇

denson 發布于2019-08-21 16:40 / 1057人閱讀

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

XMLHttpRequest 簡介

XMLHttpRequest對象可以實現頁面無刷新來實現與服務端進行數據交互.最先有微軟公司設計，隨后被Google,Mozilla等使用.現在已成為異步請求的標準，幾乎所有的瀏覽器都支持此對象.它支持的異步請求協議包括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實例已經創建.但尚未執行xhr.open()方法.

OPENED: 值為 1,表示xhr.open()已經執行.

HEADS_RECEIVED: 值為 2,表示xhr.send()已經執行,服務端已經獲取到請求頭.

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

DONE: 值為 4,表示整個請求流程已經完成.

onreadystatechange

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

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

            
        }
    }

readyState

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

response

只讀屬性,此屬性返回服務端的響應內容,客戶端可以通過xhr.responseType指定響應內容的類型.

responseText

只讀屬性,此屬性為xhr.response的一個特例,返回的響應內容為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); // 執行到這里會報錯
            
      }else{ // 請求失敗
          console.log(JSON.parse(xhr.response));
      }
    
  }
};
xhr.send();

由于我們指定了xhr.responseType的值為json,獲取響應內容用xhr.response就OK了.

responseType

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

responseURL

返回序列化后的響應URL.

responseXML

返回被轉化為XML格式的響應內容,以下情況將返回null.

請求不成功

還未執行xhr.send()方法

響應內容不能被轉換為XML或者HTML

status

返回響應的狀態碼,請求成功返回的狀態碼為200,狀態碼存在的可能值列表請點擊狀態碼列表查看.

statusText

返回響應的狀態碼對應的文字描述,例如 200 對應 "OK".

timeout

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

ontimeout

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

upload

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

console.log(xhr.uplaod);

withCredentials

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

onprogress,onabort,onerror,onload,onloadend,onloadstart

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

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

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

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

onload:請求執行成功后會觸發此事件處理程序.

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

onloadend:請求完成是觸發此事件處理程序,onload是必須要成功才會調用.

方法 abort()

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

getAllResponseHeaders()

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

getResponseHeader(name)

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

open(method,url,async)

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

參數說明

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

url:請求的路徑.

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

ovverideMimeType(mimetype)

將服務端返回的信息強制轉化為mimetype類型.

send()

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

setRequestHeader()

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

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

兼容性

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

云服務器 GPU云服務器之基礎篇異步請求 js異步請求數據 ajax的異步請求

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

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

前端面試題 -- JS篇

摘要：原始數據類型引用數據類型兩者的區別值存儲方式不同原始數據類型將變量名和值都存儲在棧內存中引用數據類型將變量名存儲在棧內存中，將值存儲在堆內存中，并在棧內存中存儲值的地址，該地址指向堆內存中的值。類型 1.js中有哪些數據類型，并解釋清楚原始數據類型和引用數據類型 js中共有null,undefined, string,number,boolean,object六種數據類型。原始數據...

DangoSky 2019-08-19 18:18 評論0 收藏0
ajax請求相關

摘要：因為請求是異步的，我們無法獲知請求的進度和響應狀態，給我們提供了一個事件，我們可以通過監聽這個時間來關注這種變化，所以下一步是注冊事件。請求還沒有被發送。方法已調用，請求已發送到服務器。到此，請求準備完全完成。上一篇單獨寫的是ajax跨域，這一篇就來詳細說一說ajax，ajax是現代web開發中必不可少的一部分內容，非常基礎也非常重要，這篇總結一下到目前為止我對ajax的理解。什么...

h9911 2019-08-30 14:00 評論0 收藏0
ajax請求相關

摘要：因為請求是異步的，我們無法獲知請求的進度和響應狀態，給我們提供了一個事件，我們可以通過監聽這個時間來關注這種變化，所以下一步是注冊事件。請求還沒有被發送。方法已調用，請求已發送到服務器。到此，請求準備完全完成。上一篇單獨寫的是ajax跨域，這一篇就來詳細說一說ajax，ajax是現代web開發中必不可少的一部分內容，非?；A也非常重要，這篇總結一下到目前為止我對ajax的理解。什么...

SolomonXie 2019-08-26 11:48 評論0 收藏0
ajax請求相關

摘要：因為請求是異步的，我們無法獲知請求的進度和響應狀態，給我們提供了一個事件，我們可以通過監聽這個時間來關注這種變化，所以下一步是注冊事件。請求還沒有被發送。方法已調用，請求已發送到服務器。到此，請求準備完全完成。上一篇單獨寫的是ajax跨域，這一篇就來詳細說一說ajax，ajax是現代web開發中必不可少的一部分內容，非常基礎也非常重要，這篇總結一下到目前為止我對ajax的理解。什么...

Alliot 2019-08-01 18:36 評論0 收藏0
ajax入門

摘要：基于標準被廣泛支持。這樣的類最初是在中作為一個名為的對象引入的。請求還沒有被發送。當為，這個屬性返回目前已經接收的響應部分。由服務器返回的狀態代碼，如表示成功，而表示錯誤。方法取消當前響應，關閉連接并且結束任何未決的網絡活動。前言總括：本文講解了ajax的歷史，工作原理以及優缺點，對XMLHttpRequest對象進行了詳細的講解，并使用原生js實現了一個ajax對象以方便日常開...

Fundebug 2019-08-20 13:51 評論0 收藏0