前後端資料互動(二)——原生 ajax 請求詳解

前端人發表於2021-09-05
後端

一、ajax介紹

ajax 是前後端互動的重要手段或橋樑。它不是一個技術，是一組技術的組合。

ajax ：a：非同步；j：js；a：和；x：服務端的資料。

ajax的組成：

  • 非同步的 js 事件
  • 其他 js (處理解析資料)
  • XMLHttpRequest 物件
  • 資料(txt、json、xml、html)

通過後臺與伺服器進行少量資料交換，ajax可以使網頁實現非同步更新。也就是在不需要重新載入整個網頁的情況下，能夠更新部分網頁的技術。傳統的網頁不使用ajax，如果需要更新內容，必須重新載入整個頁面。

前後端資料互動(二)——原生 ajax 請求詳解

 

ajax請求原理：建立一個網路請求物件 -> 傳送連線請求 -> 傳送請求資料 -> 檢查網路請求物件的狀態 -> 如果響應成功了 -> 瀏覽器接收返回資料並更新網頁。接下來詳細介紹物件的建立以及它的方法。

二、建立 XMLHttpRequest 物件

XMLHttpRequest 物件，用於後臺與伺服器之間的資料交換，意味著可以在不載入整個網頁的情況下，更新部分內容或資料。現代瀏覽器基本都支援，但是低版本的IE不支援，如果我們考慮IE相容問題建立物件的時候需要相容建立。

考慮相容時建立的物件：

var xhr ;
if( window.XMLHttpRequest ){ //檢查瀏覽器是否支援XMLHttpRequest
 xhr = new XMLHttpRequest()
}else{
 xhr = new ActiveXObject("Microsoft.XMLHTTP") //相容IE6  IE5
}

三、XMLHttpRequest的方法

3.1、open( )

設定請求的型別、請求介面、是否非同步處理。

使用語法：open( method , url , async )

  • method：設定網路請求的型別，常用的 get 和 post
  • url：設定請求的介面也就是伺服器的地址
  • async：true時表示非同步，false表示同步

3.2、send( )

將請求傳送到伺服器。

使用語法：send( string )

  • string，只用在請求方式是post時，傳送給伺服器的資料。資料是鍵值對格式的，如："name=jack&pwd=1234"

使用傳送方式不同的時候，傳輸資料新增方式也不同，所以我們介紹下分別為post和get時，資料是如何傳送的？

3.3、提交方式

  • 使用 get 方式提交

get傳送請求時，需要傳給後臺的資料通過url來傳遞，多個引數之間使用 & 符號連線，使用時如下：

xhr.opn( "GET" , "1.php?name=hello&age=world" , true )
xhr.send()
  • 使用 post 方式提交

使用 post 方式傳送請求時，使用send來傳送資料，有時需要設定資料格式，類似表單那樣，此時可通過 setRequestHeader 設定傳送的資料格式

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

Content-type常見型別：

  • text/plain 純文字，基本不怎麼用
  • application/x-www-form-urlcoded 鍵值對格式傳值，多個引數使用&連線
  • multipart/form-data 定界符，分隔各個資料，經常用於上傳檔案

四、readyState 屬性

readyState 存有 XMLHttpRequest 的狀態，它的值從 0-4 發生變化，分別代表的意義：

  • 0：請求初始化，物件剛剛建立
  • 1：伺服器已連線
  • 2：已傳送，send發放已呼叫
  • 3：已接收，此時只接收了響應(response)頭部分
  • 4：已接收，此時接收響應(response)體資訊

每當 readyState 狀態值發生改變時會，就會觸發 onreadystatechange 事件，對應著每個狀態值就會被觸發五次。當狀態值為 4 時表示網路請求響應完畢，就可以獲取返回的值。

xhr.onreadystateChange = function(){
 if( xhr.readyState==4 ){
  if( xhr.status>=200 && xhr.status<300 || xhr.status==304 ){
   console.log("請求成功",xhr.responseXML)
  }else{
   console.log("請求失敗")
  }
 }
}

五、響應資訊

通常我們需要獲取伺服器返回的資訊，然後對我們的網頁做相對應的結果展示，通常使用 XMLHttpRequest 的 responseText 或 responseXML 屬性。

responseText ---> 獲取到的是字串形式。接收到可直接使用，無需轉換。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML ---> 獲取到 XML 形式的資料。使用時需要解析，如：

<person>
 <name>小米粒</name>
 <age>18</age> 
</person> 
解析時：
document.getElementsByTagName("name")[0]

responseXML 目前已被 json 取代，所以作為了解就好。

六、ajax例項

var xhr ;
if( window.XMLHttpRequest ){
 xhr = new XMLHttpRequest()
}else{
 xhr = new ActiveXObject("Microsoft.XMLHTTP") //相容IE6  IE5
}
xhr.open('GET','1.txt',true)
xhr.send()
xhr.onreadystatechange = function(){
 if(xhr.readyState==4){
  if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
   console.log("請求成功",xhr.response) // 請求成功 abc
  }else{
   console.log("請求失敗")
  }
 }
}

 

1.txt 文件內容為 abc。所以返回的結果也是abc

相關文章