js 原生ajax請求

什么是ajax

所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用於在后台與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

簡單實例：

 

function request() {
    var http = new XMLHttpRequest()      // 創建ajax對象
    http.open("GET","test1.txt",true);   // （規定請求的類型）請求方式 請求地址 同步還是異步
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");  // 請求頭信息
    http.send()                          // （發送請求到服務器）
    ajax.onreadystatechange=function(){  //  請求響應
        if(ajax.readyState == 4 && ajax.status == 200){
            console.log(JSON.parse(ajax.responseText));
        }
    }
  }
  request()  // 調用

 

XMLHttpRequest 對象

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）

var http = new XMLHttpRequest()

open()方法

它接收3個參數：

　　1.method：請求類型，如get、post。

　　2.url：請求地址。

　　3.async：規定當前請求是否異步，默認(不填)是異步的。(true為異步，false為同步)

 

http.open("get","https://api.apiopen.top/recommendPoetry");

 

 

setRequestHeader方法

接下來我們通過setRequestHeader方法設置請求頭。注意：這個方法必須要在open()方法執行之后才能設置。(也就是必須先調用open()方法)。代碼如下：

http.setRequestHeader("Content-type","application/x-www-form-urlencoded");

 

send方法

send方法表示將請求發送到服務器。

當請求類型為post時，send()方法接受一個參數，就是你需要傳給后台的參數。get請求可以不填或者填null

http.send()

 

readyState屬性

readyState是XMLHttpRequest對象中的一個屬性，它存有服務器響應給我們的狀態信息。readyState屬性一共有5個值：

• 0: 請求未初始化（代理被創建，但尚未調用 open() 方法）
• 1: 服務器連接已建立（open方法已經被調用）
• 2: 請求已接收（send方法已經被調用，並且頭部和狀態已經可獲得）
• 3: 請求處理中（下載中，responseText 屬性已經包含部分數據）
• 4: 請求已完成，且響應已就緒（下載操作已完成）

 

onreadystatechange方法

每當readyState屬性改變時，就會觸發onreadystatechange()方法，所以我們可以在這個方法里面去獲取服務器給我們的響應。

當readyState的值等於4的時候，表示請求已經完成，並且服務器已經把結果返回給我們了。

http.onreadystatechange=function(){
   //readyState等於4  並且status等於200(表示請求成功)
  if(ajax.readyState==4 && ajax.status==200){
      console.log(ajax.responseText);//服務器響應的結果
  }  
}

 

responseText和responseXML屬性

responseText：獲得字符串形式的響應數據。

responseXML：獲得XML形式的響應數據。

我們上面使用的是responseText屬性，但一般需要的是json格式數據，我們可以使用JSON.parse()讓字符串轉換成json對象。代碼如下：

http.onreadystatechange=function(){
   //readyState等於4  並且status等於200(表示請求成功)
  if(ajax.readyState==4 && ajax.status==200){
      console.log(JSON.parse(ajax.responseText));//服務器響應的結果
  }  
}