Ajax請求

前言

前端程序開發之中咱們經常須要使用到ajax請求。本文內容咱們將會詳細的學習咱們的ajax請求的內容。爭取能夠理解的透透的，讓它成爲咱們開發之中的利器。咱們這裏全部的實例都是以IE9以上的（包括IE9）版本爲基礎的，IE9如下的版本就再也不多作闡述。

簡介

爲何會有ajax呢，ajax的全名是Asynchronous Javascript And XML And HTML。意思是異步的js，xml和html。再ajax的技術沒有出現以前呢，咱們的網頁在請求後端的數據以後只能全頁面刷新，這就表示全頁面須要從新加載，這樣將會消耗咱們很大量的資源，而且頁面的展現效果十分的很差。ajax就是爲了處理之一問題而來，其是一種用於快速的建立動態頁面的技術，無需從新加載整個頁面只是對頁面上的部份內容進行動態的更新。這樣將會大大的減小咱們的資源消耗，和用戶的等待時長。

從上面這段話咱們能夠了解到：

1. ajax是異步的，在頁面展現以後須要像後端請求新數據的時候運用到的。
2. ajax是部分網頁內容更新的，無需全局刷新。
3. ajax是一種解決資源浪費的技術，而不是一門新的語言。

因此咱們能夠這樣的去理接ajax。它是一種異步的算法，用於後臺給出的新數據體緩原有數據展現到頁面上的方式。它不是一種新的語言。因此ajax技術能夠有一個流程如此： 請求後臺數據 --> 數據篩選處理 --> dom進行頁面內容的替換展現。

XMLHttpRequest

1. XMLHttpRequest：全部瀏覽器都提供的對象，主要是用於服務端的通訊內容。

XMLHttpRequest是繼承於XMLHttpRequestEventTarget的，而XMLHttpRequestEventTarget繼承與EventTarget的，因此咱們能夠知道XMLHttpRequest是有本身的事件能夠監聽的。並且它不只僅支持http，同時也支持ftp等請求協議的。

咱們先來講一說他的屬性吧：

• readyState：咱們以後要經常接觸到的一個屬性，表示請求狀態碼，請求分爲5種狀態：

  

• response: 返回響應的正文部分，其類型主要是responseType進行控制的，在readyState狀態是4以後能夠進行內容的獲取。

• responseType： 返回響應正文的類型，在請求對象調用open以後能夠進行設置，設置好以後經過send發出，當設置了返回正文類型的時候，若是服務器給定的值不是這一類型的時候，response將會是null。還有就是各一個同步請求設置返回類型的時候會出現InvalidAccessError。咱們來看一下可選類型吧：

  

• responseText：返回一個DOMString屬性的值，若是response不是text或者""，那麼將會報InvalidAccessError。

• responseUrl： 返回序列化的URL，若是URL有錨點，則#以後的內容會被刪除。若是有重定向，responseURL的值是通過屢次重定向以後的最終的URL。

• status：返回響應之中的數字狀態碼，就是那些個200，404等等。

• statusText：對應於status的說明。

• timeout：用於設置請求超時時長。單位是毫秒數。

• withCredentials：布爾類型，它指示了是否該使用相似cookies,authorization headers(頭部受權)或者TLS客戶端證書這一類資格證書來建立一個跨站點訪問控制（cross-site Access-Control）請求。在同一個站點下使用withCredentials屬性是無效的。此外，這個指示也會被用作響應中cookies 被忽視的標示。默認值是false。

接下來是方法一覽：

• abort() : 終止該請求內容，其readyState將會被設置爲0.
• getAllResponseHeaders() ： 返回全部的響應頭。
• getResponseHeaders(name) ：傳遞的是標題頭，返回相應的值。
• open(method, url, [async], [user], [password]) : 激活一個請求，若是激活以後再次調用，做用相似於abort。
• overrideMimeType() : 方法是指定一個MIME類型用於替代服務器指定的類型，使服務端響應信息中傳輸的數據按照該指定MIME類型處理。例如強制使流方式處理爲"text/xml"類型處理時會被使用到，即便服務器在響應頭中並無這樣指定。此方法必須在send方法以前調用方爲有效。主要是用於設置Content-Type 的值啦。
• send(data) ：發送http請求，方法接受一個可選的參數，其做爲請求主體；若是請求方法是 GET 或者 HEAD，則應將請求主體設置爲 null。
• setRequest() : 是設置HTTP請求頭部的方法。此方法必須在 open() 方法和 send() 之間調用。若是屢次對同一個請求頭賦值，只會生成一個合併了多個值的請求頭。若是沒有設置 Accept 屬性，則此發送出send() 的值爲此屬性的默認值*/* 。

最後咱們要來了解一下事件內容：

• onreadyStateChange：監聽readyState改變事件，當readstate改變的時候會自動的調用。
• onabort：當終端當前請求的時候調用。
• onerror：當出現錯誤的時候調用。
• onload：當請求成功完成的時候調用。
• onloadStart：當請求開始的時候調用。
• onloadEnd：當請求不論什麼狀態結束都會調用。
• onProgress：當請求還有更多數據接受的時候調用。

說了這麼多怎麼能夠沒有一個完整的例子，代碼伺候：

ajax: (method, URL) => {
    let request = new XMLHttpRequest();

    request.onreadystatechange = (e) => {
      if(request.readyState === request.UNSENT){
        console.log("尚未調用open方法");
      }
      else if(request.readyState === request.OPENED){
        request.timeout = 2000 //設置請求超時時長
        request.withCredentials = true //設置跨域受權
        request.overrideMimeType('text/plain') //設置MIME類型
        // request.setRequestHeader(header, value) 能夠設置請求頭的信息內容。
        request.responseType = "text"
      }
      else if(request.readyState === request.HEADERS_RECEIVED){
        console.log("已經獲取了響應頭部")
      }
      else if(request.readyState === request.LOADING){
        console.log("還在讀取返回體內容")
      }
      else if(request.readyState === request.DONE){
        console.log(request.status)
        console.log(request.response)
        console.log(request.responseText)
        console.log(request.responseXML)
      }
    }

    request.onloadstart = (e) => {
      console.log("loadstart 觸發了")
    }

    request.onload = (e) => {
      console.log(request.responseURL);
    }

    request.onloadend = (e) => {
      console.log("loadend 觸發了")
    }

    request.onerror = (err) => {
      console.log(err);
    }

    request.onabort = (e) => {
      console.log('請求已經終止');
    }

    request.ontimeout = () => {
      console.log('請求已經超時了')
    }

    request.open(method, URL)
    request.send()
    return request;
}
複製代碼

咱們使用mock.js來模擬請求。

結束

本駢文站針對ajax作了一個基礎講解，以後的跨與問題等等咱們將會統一的在後面的跨域問題總綱之中進行學習總結，望共同窗習共同進步，拜拜