看完這篇還不會AJAX,我就.....

ajax從入門到精通

背景

“JavaScript 對我們而已能力有限”，我們目前所瞭解到的 Web 所提供的 API 都只停留在“單機遊戲”的階段。

例如：

無法在實現用戶登錄功能時，當用戶輸入郵箱地址顯示用戶對應的頭像
無法在實現用戶註冊功能時，當用戶輸入郵箱或者用戶名就提示是否存在
無法在實現留言板功能時，實時看到最新的用戶留言

思考：爲什麼做不到這些呢？

在此之前，我們可以通過以下幾種方式讓瀏覽器發出對服務端的請求，獲得服務端的數據：

地址欄輸入地址，回車，刷新
特定元素的 href 或 src 屬性
表單提交

這些方案都是我們無法通過或者很難通過代碼的方式進行編程（對服務端發出請求並且接受服務端返回的響應），如果我們可以通過 JavaScript 直接發送網絡請求，那麼 Web 的可能就會更多，隨之能夠實現的功能也會更多，至少不再是隻能開發“單機遊戲”。

對 XXX 進行編程指的就是用代碼的方式操作它。

Google Suggest

AJAX（Asynchronous JavaScript and XML），最早出現在 2005 年的 Google Suggest，是在瀏覽器端進行網絡編程（發送請求、接收響應）的技術方案，它使我們可以通過 JavaScript 直接獲取服務端最新的內容而不必重新加載頁面。讓 Web 更能接近桌面應用的用戶體驗。

AJAX (Asynchronous Javascript And XML)

說白了，AJAX 就是瀏覽器提供的一套 API，可以通過 JavaScript 調用，從而實現通過代碼控制請求與響應。實現通過 JavaScript 進行網絡編程。

至於 XML：最早在客戶端與服務端之間傳遞數據時所採用的數據格式就是 XML。

能力不夠 API 湊。

應用場景總結

對於每一個未知的技術，我們在瞭解了過後第一反應就是在什麼情況下用？

按需獲取數據
對用戶數據校驗
自動更新頁面內容
提升用戶體驗，無刷新的體驗

快速上手

AJAX API 中核心提供的是一個 XMLHttpRequest 類型，所有的 AJAX 操作都需要使用到這個類型。

使用 AJAX 的過程可以類比平常我們訪問網頁過程

// 1. 創建一個 XMLHttpRequest 類型的對象 —— 相當於打開了一個瀏覽器
var xhr = new XMLHttpRequest()
// 2. 打開與一個網址之間的連接 —— 相當於在地址欄輸入訪問地址
xhr.open('GET', '/time')
// 3. 通過連接發送一次請求 —— 相當於回車或者點擊訪問發送請求
xhr.send(null)
// 4. 指定 xhr 狀態變化事件處理函數 —— 相當於處理網頁呈現後的操作
xhr.onreadystatechange = function () {
  // 通過 xhr 的 readyState 判斷此次請求的響應是否接收完成
  if (this.readyState === 4) {
    // 通過 xhr 的 responseText 獲取到響應的響應體
    console.log(this.responseText)
  }
}

注意：涉及到 AJAX 操作的頁面不能使用文件協議訪問（文件的方式訪問）

readyState

由於 readystatechange 事件是在 xhr 對象狀態變化時觸發（不單是在得到響應時），也就意味着這個事件會被觸發多次，所以我們有必要了解每一個狀態值代表的含義：

readyState	狀態描述	說明
0	UNSENT	代理（XHR）被創建，但尚未調用 `open()` 方法。
1	OPENED	`open()` 方法已經被調用，建立了連接。
2	HEADERS_RECEIVED	`send()` 方法已經被調用，並且已經可以獲取狀態行和響應頭。
3	LOADING	響應體下載中， `responseText` 屬性可能已經包含部分數據。
4	DONE	響應體下載完成，可以直接使用 `responseText`。

時間軸

var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0
// 初始化 請求代理對象

xhr.open('GET', '/time')
console.log(xhr.readyState)
// => 1
// open 方法已經調用，建立一個與服務端特定端口的連接

xhr.send()

xhr.addEventListener('readystatechange', function () {
  switch (this.readyState) {
    case 2:
      // => 2
      // 已經接受到了響應報文的響應頭

      // 可以拿到頭
      // console.log(this.getAllResponseHeaders())
      console.log(this.getResponseHeader('server'))
      // 但是還沒有拿到體
      console.log(this.responseText)
      break

    case 3:
      // => 3
      // 正在下載響應報文的響應體，有可能響應體爲空，也有可能不完整

      // 在這裏處理響應體不保險（不可靠）
      console.log(this.responseText)
      break

    case 4:
      // => 4
      // 一切 OK （整個響應報文已經完整下載下來了）

      // 這裏處理響應體
      console.log(this.responseText)
      break
  }
})

通過理解每一個狀態值的含義得出一個結論：一般我們都是在 readyState 值爲 4 時，執行響應的後續邏輯。

xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
    // 後續邏輯......
  }
}

遵循 HTTP

本質上 XMLHttpRequest 就是 JavaScript 在 Web 平臺中發送 HTTP 請求的手段，所以我們發送出去的請求任然是 HTTP 請求，同樣符合 HTTP 約定的格式：

// 設置請求報文的請求行
xhr.open('GET', '/time')
// 設置請求頭
xhr.setRequestHeader('Accept', 'text/plain')
// 設置請求體
xhr.send(null)

xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
    // 獲取響應狀態碼
    console.log(this.status)
    // 獲取響應狀態描述
    console.log(this.statusText)
    // 獲取響應頭信息
    console.log(this.getResponseHeader('Content-Type')) // 指定響應頭
    console.log(this.getAllResponseHeaders()) // 全部響應頭
    // 獲取響應體
    console.log(this.responseText) // 文本形式
    console.log(this.responseXML) // XML 形式，瞭解即可不用了
  }
}

具體用法

GET 請求

通常在一次 GET 請求過程中，參數傳遞都是通過 URL 地址中的 ? 參數傳遞。

var xhr = new XMLHttpRequest()
// GET 請求傳遞參數通常使用的是問號傳參
// 這裏可以在請求地址後面加上參數，從而傳遞數據到服務端
xhr.open('GET', '/delete?id=1')
// 一般在 GET 請求時無需設置響應體，可以傳 null 或者乾脆不傳
xhr.send(null)
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log(this.responseText)
  }
}

// 一般情況下 URL 傳遞的都是參數性質的數據，而 POST 一般都是業務數據

POST 請求

POST 請求過程中，都是採用請求體承載需要提交的數據。

var xhr = new XMLHttpRequest()
// open 方法的第一個參數的作用就是設置請求的 method
xhr.open('POST', '/add')
// 設置請求頭中的 Content-Type 爲 application/x-www-form-urlencoded
// 標識此次請求的請求體格式爲 urlencoded 以便於服務端接收數 據
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 需要提交到服務端的數據可以通過 send 方法的參數傳遞
// 格式：name=zhangsan&age=18
xhr.send('name=zhangsan&age=18')
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log(this.responseText)
  }
}

同步與異步

關於同步與異步的概念在生活中有很多常見的場景，舉例說明。

同步：一個人在同一個時刻只能做一件事情，在執行一些耗時的操作（不需要看管）不去做別的事，只是等待

異步：在執行一些耗時的操作（不需要看管）去做別的事，而不是等待

xhr.open() 方法第三個參數要求傳入的是一個 bool 值，其作用就是設置此次請求是否採用異步方式執行，默認爲 true，如果需要同步執行可以通過傳遞 false 實現：

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 默認第三個參數爲 true 意味着採用異步方式執行
xhr.open('GET', '/time', true)
xhr.send(null)
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
    // 這裏的代碼最後執行
    console.log('request done')
  }
}
console.log('after ajax')

如果採用同步方式執行，則代碼會卡死在 xhr.send() 這一步：

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', '/time', false)
// // 同步方式 執行需要 先註冊事件再調用 send，否則 readystatechange 無法觸發
// xhr.onreadystatechange = function () {
//   if (this.readyState === 4) {
//     // 這裏的代碼最後執行
//     console.log('request done')
//   }
// }
xhr.send(null)
// 因爲 send 方法執行完成 響應已經下載完成
console.log(xhr.responseText)
console.log('after ajax')

演示同步異步差異。

瞭解同步模式即可，切記不要使用同步模式。

至此，我們已經大致瞭解了 AJAX 所的提供的基本 API 。

XMLHttpRequest API 總結

屬性

readyState xhr的狀態 4 響應體接收完畢
status 獲取狀態碼
responseText 獲取響應體，文本格式
responseXML 獲取響應體，xml格式
onreadystatechange 事件，當xhr.readyState屬性發生改變觸發

方法

open(method, url, async) 設置請求的方式，請求的路徑，同步 false/異步 true
send(requsetBody) 發送請求(體)
setRequestHeader(key, value) 設置請求頭
getResponseHeader(key) 獲取響應頭

響應數據格式

提問：如果希望服務端返回一個複雜數據，該如何處理？

關心的問題就是服務端發出何種格式的數據，這種格式如何在客戶端用 JavaScript 解析。

XML

一種數據描述手段

老掉牙的東西，簡單演示一下，不在這裏浪費時間，基本現在的項目不用了。

淘汰的原因：數據冗餘太多

JSON

也是一種數據描述手段，類似於 JavaScript 字面量方式

服務端採用 JSON 格式返回數據，客戶端按照 JSON 格式解析數據。

注意：

不管是 JSON 也好，還是 XML，只是在 AJAX 請求過程中用到，並不代表它們與 AJAX 之間有必然的聯繫，它們只是數據協議罷了。

不管服務端是採用 XML 還是採用 JSON 本質上都是將數據返回給客戶端。

服務端應該根據響應內容的格式設置一個合理的 Content-Type。

緩存問題

緩存問題指的是：多次 AJAX GET 請求同一個 URL 得到的結果是相同的，目前絕大多數瀏覽器已經沒有這個問題了，只有早期的 IE 瀏覽器存在這個問題

var xhr = new XMLHttpRequest()
xhr.open('GET', '/time')
xhr.send(null)
xhr.onreadystatechange = function () {
  if (this.readyState !== 4) return
  console.log(this.responseText)
  // => 每次得到的結果都是相同的
}

解決方案

URL 加戳

這個辦法的核心就是讓瀏覽器認爲每次請求的地址都是不同的。

不同的 querystring 會被瀏覽器認爲是不同的地址，瀏覽器會忽略客戶端緩存。

var xhr = new XMLHttpRequest()
xhr.open('GET', '/time?t=' + Date.now())
xhr.send(null)
xhr.onreadystatechange = function () {
  if (this.readyState !== 4) return
  console.log(this.responseText/ =>
}

jQuery 中的 AJAX

jQuery 中有一套專門針對 AJAX 的封裝，功能十分完善，經常使用，需要着重注意。

看完這篇還不會AJAX,我就.....

ajax從入門到精通

背景

Google Suggest

AJAX (Asynchronous Javascript And XML)

應用場景總結

快速上手

readyState

時間軸

遵循 HTTP

具體用法

GET 請求

POST 請求

同步與異步

XMLHttpRequest API 總結

屬性

方法

響應數據格式

XML

JSON

緩存問題

解決方案

URL 加戳

jQuery 中的 AJAX

win11關閉自動檢測病毒刪文件

千兆寬帶實際網速能到達多少？

學習Java不迷茫一張Java思維導圖送於你

看完這篇還不會AJAX,我就.....

你會在CentOS中安裝MySQL嗎？

MySQL知識梳理總結

帶你理解面向過程與面向對象

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結