目錄
認識AJAX
AJAX是什么
為什么AJAX這么重要
AJAX牛在哪
基于XMLHttpRequest實作AJAX
XMLHttpRequest是什么
xhr物件
如何通過xhr設定HTTP請求
xhr.open方法
xhr.setRequestHeader方法
xhr.send方法
小結
如何通過xhr監聽異步的HTTP回應
xhr.readyState屬性和xhr.onreadystatechange事件處理程式屬性
小結
如何通過xhr獲取HTTP回應狀態碼和回應頭
xhr.status屬性和xhr.statusText屬性
xhr.getRespnseHeader方法和xhr.getAllResponseHeaders方法
小結
如何通過xhr獲取HTTP回應體
xhr.response屬性、xhr.responseText屬性、xhr.responseXML屬性
xhr.overrideMimeType方法
xhr.responseType屬性
驗證xhr.response和xhr.responseType，以及HTTP回應頭中Content-Type之間關系
小結
使用XMLHttpRequest發起AJAX請求
發起GET請求
發起POST請求
決議AJAX回應體
認識AJAX
AJAX是什么
AJAX（Asynchronous Javascript And XML）即 異步的JavaScript和XML，
瀏覽器使用 JavaScript 發起異步的HTTP請求，從服務器獲得 XML 格式資料，并利用同樣基于JavaScript的DOM操作，將從XML中決議出來得資料更新至當前網頁的對應部分，而不用重繪整個網頁，
為什么AJAX這么重要
在沒有AJAX技術前，當網頁加載完畢后，就只能通過網頁重繪發起同步的HTTP請求，
可能會有人發出疑問：網頁重繪如何發出HTTP請求？
1、單純重繪網頁，其實就是向服務器端發送了一個HTTP GET請求，請求的是當前網頁，即真的是重繪網頁
2、通過form表單發起GET或POST請求，當提交form表單時，form表單默認會跳轉到一個新頁面發起HTTP GET或POST請求
我們用form表單發起HTTP POST請求來舉例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://127.0.0.1/api/reguser" method="post" enctype="application/json">
<input type="text" name="username"></input>
<input type="password" name="password"></input>
<input type="password" name="repassword"></input>
<button>提交</button>
</form>
</body>
</html>
可以發現form表單提交后，會跳轉到一個新的網頁中，在新網頁重繪時就會觸發HTTP POST請求，
另外，我們從form表單跳轉的新網頁可以看出，瀏覽器將服務器的HTTP回應訊息體直接當成了網頁內容渲染了，
而實際情況中，服務器會回傳一個HTML檔案給瀏覽器渲染，
這就意味著每次瀏覽器發起的HTTP請求，都需要服務器回應一個HTML檔案，哪怕瀏覽器只是請求更新當前網頁中的區域資料，也需要服務器將對應資料更新到相同HTML中，然后再將HTML回傳給瀏覽器，
所以：這種基于網頁重繪發起HTTP請求的方式給服務器增加了很大的壓力，
而對于瀏覽器來說，每次就算只需要一點點新資料，都需要等待服務器回應一個新生成的網頁，并且是同步等待，在等待期間，網頁操作被阻塞，對于用戶來說體驗也不好，另外，瀏覽器每次都要重新渲染新網頁，對于瀏覽器來說壓力也很大，
所以：這種基于網頁重繪發起HTTP請求的方式給瀏覽器也造成了很大的壓力，
AJAX牛在哪
基于JavaScript發起HTTP請求
【解決了：網頁加載后，只能靠網頁重繪發起HTTP請求】
可以發起異步的HTTP請求，即使服務器還沒有回應，網頁操作也不會被阻塞
【解決了：網頁重繪發起HTTP請求后，且未收到服務器HTTP回應前，網頁操作被阻塞，用戶體驗差的問題】
服務器只需要回應關鍵資料，而不需要回應無關資料給瀏覽器，瀏覽器收到資料后，利用JavaScript的DOM操作其更新到網頁的區域，此時瀏覽器的渲染作業會減輕，
【解決了：每次都需要服務器將新資料插入HTML，并回傳新生成的HTML給瀏覽器，再由瀏覽器重新整體渲染新生成的HTML】
基于XMLHttpRequest實作AJAX
XMLHttpRequest是什么
到了2021年，基本上所有瀏覽器都提供了一個內置的JavaScript類（建構式）XMLHttpRequest，該類默認掛載在window物件下
在瀏覽器的除錯視窗的Network面板中，我們也可以過濾出基于XHR（XMLHttpRequest的縮寫）發起的ajax請求
而XMLHttpRequest其實就是用來實作AJAX的，
我們知道AJAX的作用是發起異步的HTTP請求，而一個HTTP請求包含：
請求URL，請求行（請求方法，資源標識，HTTP版本），請求頭，空行，請求體
其中紅色部分是必須要開發者指定的，其余部分都可以間接獲取到，
所以XMLHttpRequest想要實作AJAX，則必須：
1、至少要有指定HTTP請求URL，HTTP請求方法，HTTP請求頭，HTTP請求體的入口
2、實作異步
xhr物件
XMLHttpRequest實作AJAX的所有操作都是基于其實體物件的，
var xhr = new XMLHttpRequest()如何通過xhr設定HTTP請求
xhr.open方法
gai該方法支持傳入五個引數，依次是 method，url， async, user, password，較為常用是前三個引數
第一個引數method，就是HTTP請求方法，如GET，POST
第二個引數url，就是HTTP請求URL
第三個引數async，就是指是否異步發送，默認為true，即異步發送，設為false的話，則表示同步發送
最后兩個引數user,password，用于身份認證，
xhr.open('post', 'http://127.0.0.1/api/reguser', true)xhr.setRequestHeader方法
該方法用于設定HTTP請求頭，有兩個引數，第一個引數是請求頭欄位名，第二個是請求頭欄位值，
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencode')xhr.send方法
該方法用于設定HTTP請求體，只有一個引數，接收的資料作為HTTP請求體，資料必須是字串型別的，如果不是字串型別，則會被強轉成字串型別，
另外字串資料也有格式要求，需要和請求頭的Content-Type指定的型別匹配，如
| Content-Type | 說明 | 字串資料樣例 |
| application/x-www-form-urlencode | 查詢字串格式 | "key1=value1&key2=value2" |
| application/json | JSON字串格式 | "{'key1':value1, 'key2':value2}" |
| text/plain | 純文本字串格式 | "123" |
另外，需要注意的是，GET請求一般不需要設定HTTP請求體，因為GET請求引數都加載URL中，而POST請求需要設定HTTP請求體，
xhr.send('username=張三&password=123123&repassword=123123')小結
通過xhr.open，xhr.setRequestHeader，xhr.send已經完成了一個HTTP請求的設定：請求URL，請求方法，請求頭，請求體，并且可以指定HTTP請求是同步發起，還是異步發起，
如果是同步發起HTTP請求，則接收HTTP回應時直接使用同步代碼接收即可，但是程序中，會造成網頁阻塞，用戶體驗不好，
如果時異步發起HTTP請求，則無法使用同步代碼接收異步的HTTP回應，此時XMLHttpRequest提供了基于事件回呼的方式來接收異步HTTP回應，
如何通過xhr監聽異步的HTTP回應
xhr.readyState屬性和xhr.onreadystatechange事件處理程式屬性
xhr物件本身有一個屬性readyState，有五個值，分別對應xhr物件得五種狀態：
0：xhr物件剛被創建，但是還沒有open初始化
1：xhr已經被open初始化，但是還沒有send
2：xhr已經send，但是還沒有收到回應體
3：xhr已經收到部分回應體資料
4：xhr已經收到全部回應體資料
xhr.readyState屬性值會隨著xhr物件狀態得變化而自動改變，
所以只要監聽xhr.readyState的變化，就能準確知道xhr物件什么時候完全接收到回應資料，
xhr物件本身存在一個onreadystatechange事件處理程式屬性，瀏覽器會監聽xhr物件的readystate值的變化，并會觸發對應xhr物件的onreadystatechange事件處理程式，而我們一般只關注xhr.readystate === 4時，即獲取到完整的HTTP回應結果時的事件觸發，
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
// ......
}
}小結
現在已經可以接收到異步的HTTP回應了，
我們知道一個HTTP回應包含：
回應行（HTTP版本，狀態碼，狀態碼描述）、回應頭、空行、回應體
而我們一般只關注紅色部分標記的，所以XMLHttpRequest只會提供紅色部分的HTTP回應，而這些回應資料都被掛載為了xhr物件的屬性和方法，
如何通過xhr獲取HTTP回應狀態碼和回應頭
xhr.status屬性和xhr.statusText屬性
xhr.status屬性對應HTTP回應報文的狀態碼，xhr.statusText對應回應報文的狀態碼描述，
我們一般只關注成功的回應，即狀態碼2xx的回應，這些狀態碼表示HTTP請求被服務器成功處理并回傳結果，
另外304表示HTTP請求的資源已被瀏覽器快取，并且服務器確認該資源沒有變動，所以HTTP請求的資源可以直接使用瀏覽器快取中的資源，也可以被視為成功的回應，
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
// ...
}
}
}xhr.getRespnseHeader方法和xhr.getAllResponseHeaders方法
xhr.getRespnseHeader用于獲取指定HTTP回應報文頭欄位的值
xhr.getAllResponseHeaders用于獲取所有HTTP回應報文頭
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
console.log(xhr.getResonseHeader('Content-Type'))
console.log(xhr.getAllResponseHeader())
// ...
}
}
}小結
通過xhr.status,xhr.statusText，以及xhr.getResponseHeader，xhr.getAllResponseHeaders已經可以獲取到HTTP回應的狀態碼及描述，以及回應頭資訊，還有回應體沒有說明如何獲取，
在考慮獲取回應體之前，我們需要思考下，HTTP回應體的資料格式有哪些？
比如JSON格式，比如XML格式，HTML格式，二進制格式，位元組流格式，雖然它們在HTTP回應體中都以文本字串的形式存在，但是我們在處理時，無法直接基于字串獲取資料，只有轉成對應的型別才能有效處理，
如何通過xhr獲取HTTP回應體
xhr.response屬性、xhr.responseText屬性、xhr.responseXML屬性
xhr.response、xhr.responseText、xhr.responseXML都對應于HTTP回應報文中的回應體，
xhr.response用于接收HTTP回應體，但是資料型別不定（可能是JSON型別，HTML對應的DOM元素型別，二進制資料ArrayBuffer型別等....）
xhr.responseText 存放文本格式HTTP回應體,或者沒有值
xhr.responseXML 存放XML或HTML格式的回應體，或者為null
而上述三個屬性是否有值，值得資料型別是什么取決于三點：
1、HTTP回應成功狀態碼
2、HTTP回應報文的回應頭欄位Content-Type 或 設定的xhr.overrideMimeType
3、設定的xhr.responseType值
xhr.overrideMimeType方法
該方法是指定一個MIME型別用于替代服務器指定的型別，使服務端回應資訊中傳輸的資料按照該指定MIME型別處理，此方法必須在send方法之前呼叫方為有效，
如果服務器沒有指定一個
頭, XMLHttpRequest 默認MIME型別為Content-Type"text/xml". 如果接受的資料不是有效的XML，將會出現格”格式不正確“的錯誤，你能夠通過呼叫overrideMimeType()指定各種型別來避免這種情況，
xhr.overrideMimeType('application/json');xhr.responseType屬性
該屬性是一個列舉字串值，用于指定xhr.response的資料型別，可讀可寫，
如果將 responseType 的值設定為空字串，則會使用 text 作為默認值，
需要注意得是xhr.responseType必須在xhr.readyState狀態為0，1，2時設定，不能在3,4時設定，即不能等到已經獲取了部分HTTP回應體之后再設定，
| xhr.responseType列舉值 | 含義 |
| "" | 空的 responseType 字串與默認型別 "text" 相同， |
| "arraybuffer" | response 是一個包含二進制資料的 JavaScript ArrayBuffer， |
| "blob" | response 是一個包含二進制資料的 Blob 物件， |
| "document" | response 是一個 HTML Document 或 XML XMLDocument，根據接收到的資料的 MIME 型別而定 |
| "json" | response 是通過將接收到的資料內容決議為 JSON 而創建的 JavaScript 物件， |
| "text" | response 是 DOMString 物件中的文本 |
xhr.responseType = 'json'驗證xhr.response和xhr.responseType，以及HTTP回應頭中Content-Type之間關系
當 xhr.responseType = '' || 'text' 并且 HTTP回應報文頭中Content-Type: text/html
則 xhr.response中值為文本字串，xhr.responseText中有值，且和xhr.response相同，xhr.responseXML為null
當xhr.responseType = 'document' 且 HTTP回應報文頭中Content-Type:text/html
則xhr.response為DOM元素，xhr.responseText取值報錯，xhr.responseXML有值，且和xhr.response值相同
當 xhr.responseType = 'json' 并且 HTTP回應報文頭中Content-Type: application/json
則 xhr.response中值為Object物件，xhr.responseText，xhr.responseXML取值報錯
小結
前提條件：HTTP回應成功
xhr.responseText 只有在xhr.responseType設定為''或'text'時有值
xhr.responseXML只有在xhr.responseType設定為'document'時有值
而只要 xhr.responseType 和 HTTP回應頭中Content-Type欄位的值匹配，則xhr.response一定有值，
使用XMLHttpRequest發起AJAX請求
發起GET請求
var xhr = new XMLHttpRequest()
xhr.open('get', 'http://127.0.0.1/my/article/list?pagenum=1&pagesize=5')
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
console.log(xhr.response)
}
}
}上面是一個最基本的xhr實作AJAX GET的程序，它有如下特點和注意事項：
1、GET請求的引數通常放在請求URL中，且需要按照請求字串的格式，
如果GET請求將請求引數放在請求體中，則可能會被瀏覽器直接丟棄，或者可能服務器不考慮接收，
如果GET請求引數在URL中不按照請求字串格式，即key1=valule1&key2=value2格式，則瀏覽器和服務器都無法正常決議
2、由于GET請求引數都放在請求URL中，所以沒有請求體，也就不需要設定請求頭中的Content-Type，注意請求頭中的Content-Type設定的是請求體的資料格式
發起POST請求
var xhr = new XMLHttpRequest()
xhr.open('post', 'http://127.0.0.1/my/article/updatecate')
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//xhr.send('id=1&name=時尚&alias=SHISHANG2')
xhr.setRequestHeader('content-type', 'application/json')
xhr.send(JSON.stringify({
id:1,
name:'時尚',
alias:'SHISHANG3'
}))
xhr.onreadystatechange = function(){
if(xhr.readyState === 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
console.log(xhr.response)
}
}
}上面是一個最基本的xhr實作AJAX POST的程序，它有如下特點和注意事項：
1、由于POST請求引數需要放在請求體，所以此時需要設定請求頭中的Content-Type欄位的值，目的是幫助服務器決議請求體內容，
HTTP請求體被服務器接收到后，初始時都是文本字串，從字串中很難決議資料，
而HTTP請求體通常都有特定資料格式，比如JSON格式，XML格式，二進制格式等......，所以發送者是可以知道自己發送的請求體的格式的，那么在請求頭Content-Type中指定好請求體資料格式，這樣服務器就可以快速將字串轉化為對應資料型別，實作快速決議，
但是設定Content-Type的型別一定要和請求體資料格式匹配，如果不匹配就會導致服務器錯誤決議，
2、另外POST請求體的資料格式，需要和Content-Type匹配，常見匹配策略有：
| 請求頭Content-Type | 請求體資料格式 |
| application/x-www-form-urlencode | key1=value1&key2=value2 |
| application/json | {"key1":value1, "key2":value2} |
| text/xml | <key1>value1</key1> |
| multipart/form-data | 有特定分隔符 |
決議AJAX回應體
有兩種決議策略：
1、預先決議
預先決議的意思是，在收到HTTP回應體之前，就已經知道了回應體的資料格式，這種情況很常見，比如我們請求介面資料，通常回應體就是json格式，我們請求HTML檔案，則回應體就是document格式等
此時我們可以通過提前設定 xhr.responseType來指定回應體的資料型別，這樣就可以通過xhr.response直接獲得想要的資料型別了，而不需要手動決議，
但是有時候，可能服務器回應時沒有指定Content-Type，而默認的Content-Type又不符合需求，所以我們需要重置回應體的Content-Type，此時需要通過xhr.overrideMimeType方法來設定回應體的Content-Type，
2、手動決議
就是使用默認的xhr.response，即xhr.responseType = 'text'，此時xhr.response就是文本字符產，我們需要自己呼叫相應方法來決議為想要的資料型別，
肯定有人說了，手動決議不好，不如使用預先決議，但是手動決議存在的意義就是兼容性好，當前部分瀏覽器（IE11）還不支持xhr.responseType的部分列舉值(json)，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/395361.html
標籤：其他