Ajax及其應用

放糖出世發表於2024-03-12

AJAX概述

1、AJAX的定義：非同步的JS和XML，使用XMLHttpRequest物件與伺服器通訊；可以在不重新重新整理頁面的情況下與伺服器通訊，交換資料或更新頁面。

2、概念：AJAX是瀏覽器與伺服器進行資料通訊的技術。

3、工作原理：客戶端傳送請求交給xhr，xhr把請求提交給伺服器進行處理，伺服器響應資料交給xhr物件，xhr物件接收資料，最後由javascript把資料寫到頁面上

4、AJAX請求步驟：①建立XMLHttpRequest例項②傳送HTTP請求③接收伺服器傳回的資料④更新網頁資料

（AJAX只能向同源網址（協議域名埠相同）發出HTTP請求，否則會報錯）

XMLHttpRequest物件

1、XMLHttpRequest物件是AJAX的主要介面；XMLHttpRequest本身是一個建構函式，沒有任何引數

2、readyState: 返回請求的狀態。可能的值有：

  • 0: 物件已建立，但尚未呼叫 open() 方法。

  • 1: open() 方法已被呼叫。

  • 2: send() 方法已被呼叫，請求已發出。

  • 3: 伺服器正在傳送響應資料。

  • 4: 伺服器響應已完全接收。

  • var xhr = new XMLHttpRequest();

if (xhr.readyState === 4) {
  // 請求結束，處理伺服器返回的資料(表示發出的HTTP請求已經成功)
} else {
  // 顯示提示“載入中……”
}

3、responseText: 將響應的文字內容作為字串返回。

4、responseXML: 如果響應的內容型別是 "text/xml" 或 "application/xml"，則將響應作為 XMLDocument 物件返回。

5、status: 返回 HTTP 狀態碼，只有2xx和304的狀態碼錶示成功。

6、statusText: 返回 HTTP 狀態文字，例如 "OK" 或 "Not Found"。

7、responseURL: 屬性是字串，表示傳送資料的伺服器的網址

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/test', true);
xhr.onload = function () {
  // 返回 http://example.com/test
  console.log(xhr.responseURL);
};
xhr.send(null);

方法

  1. open(method, url, async, user, password): 初始化請求引數。
    • method: 請求方法（GET, POST, PUT, DELETE 等）。
    • url: 請求的 URL。
    • async: 是否非同步傳送請求，預設為 true。
    • user: 可選的使用者名稱用於身份驗證。
    • password: 可選的密碼用於身份驗證。
  2. send(data): 傳送請求。如果請求是 POST 型別，那麼 data 將作為請求主體傳送。
  3. setRequestHeader(header, value): 設定請求的 HTTP 頭部資訊。
  4. abort(): 取消當前請求。
  5. getAllResponseHeaders(): 返回所有響應頭資訊。
  6. getResponseHeader(header): 返回特定響應頭的資訊。

事件

1、onreadystatechange：

  • 當 readyState 改變時會觸發此事件。

2、onloadstart：

  • 當請求開始載入時觸發。

3、onprogress：

  • 當請求接收到資料時觸發。

4、onabort：

  • 當請求被取消時觸發。

5、onerror：

  • 當請求遇到錯誤時觸發。

6、onload：

  • 當請求成功完成時觸發。

7、ontimeout：

  • 當請求超時時觸發。

8、onloadend：

  • 當請求結束時觸發（無論請求成功還是失敗）。

相關文章