Ajax及其應用_ZenDei技術網路在線

（目錄） Ajax 工作原理 Ajax Ajax 是前後端非同步交互的工具，非同步更新，ajax 包含 XMLHttpRequests 對象（非同步地與伺服器交換數據，AJAX 核心） JavaScript/DOM（信息顯示/交互） CSS（給數據定義樣式） XML 或 JSON（作為轉換數據的格式）工 ...

Ajax 工作原理
XMLHttpRequests 對象
用法

Ajax 工作原理

Ajax

Ajax 是前後端非同步交互的工具，非同步更新，ajax 包含 XMLHttpRequests 對象（非同步地與伺服器交換數據，AJAX 核心）
JavaScript/DOM（信息顯示/交互）
CSS（給數據定義樣式）
XML 或 JSON（作為轉換數據的格式）

工作原理
具體操作流程

首先通過 PHP 頁面將資料庫中的數據取出
取出後轉成 json 格式的字元串，後利用 ajax 把字元串返還給前端
再利用 json.parse 解析通過迴圈添加到頁面上
反之，前端的數據可以利用 ajax 提交到後臺
但後臺沒有辦法直接將這些數據插入到資料庫中，所以要先提交到 PHP 頁面上
最後再由 PHP 將數據插入到資料庫中

實現 Ajax 基本步驟

創建 XMLHttpRequest 對象,即創建一個非同步調用對象.

const xhr=new XMLHttpRequest();

創建一個新的 HTTP 請求,並指定該 HTTP 請求的方法、URL 及驗證信息.

xhr.open(method,url,flag,name,password)

設置響應 HTTP 請求狀態變化的函數.

xhr.onreadystatechange=function(){//設置響應http請求狀態變化的事件
console.log("請求過程",xhr.readyState);
if(xhr.readyState==4){//判斷非同步調用是否成功，若成功開始局部更新數據
console.log("狀態碼為：",xhr.status);
if(xhr.status==200){
	console.log("非同步調用返回的數據為：",xhr.responseText);
}else{//若果非同步調用未成功，彈出警告框，並顯示錯誤代碼
alert("erro:HTTP狀態碼為：",xhr.status);
}

}

}

發送 HTTP 請求.

xhr.send()

獲取非同步調用返回的數據.
使用 JavaScript 和 DOM 實現局部刷新.

XMLHttpRequests 對象

無刷新更新頁面

屬性

屬性名稱	說明
onreadystatechange	設置回調函數，(作為 readyStates 屬性值改變時的事件處理程式)用於指定狀態改變時所觸發的事件處理器
readyState	用於獲取請求狀態的屬性：0-未初始化；1-正在載入（已初始化）；2-已載入（請求發送完成）；3-交互中（開始讀取響應）；4-完成（讀取響應結束）
status	用於描述當前請求的 HTTP 狀態碼的屬性。（僅當 readyState 的值為 3 或 4 時，status 屬性才可用）常用值舉例：200——正確返回；404——找不到訪問對象
statusText	用於描述 HTTP 狀態的代碼文本。（僅當 readyState 的值為 3 或 4 時，statusText 屬性才可用）
responseText	以文本形式獲取響應值。當 readyState 值為 0,1,2 時，responseText 為空字元串；當 readyState 值為 3 時，responseText 為還未完成的響應信息；當 readyState 值為 4 時，responseText 為響應信息。
responseXML	以 XML 形式獲取響應值，並且解析為 DOM 對象返回。用於當接收到完整的 HTTP 響應時（readyState 值為 4 時）描述 XML 響應，若 readyState 的值不為 4.它取值為 null

方法

方法	具體功能
open("method","URL",["asyncFlag"],["userName"],["password"])	建立對伺服器的調用。參數可以是 GET、POST、PUT 或 DELET[^1]:rest 動詞規範：GET（查詢）：獲取資源；POST（創建）：創建資源；PUT（修改）：更新資源；DELET（刪除）：刪除資源。URL 參數是相對 URL 或絕對 URL。剩餘三個參數（可選擇）分別是：是否非同步（預設非同步，true），用戶名，密碼
send(content)	向伺服器發送請求。如果請求聲明為非同步，該方法將立即返回，否則將等到接收到響應為止
abort()	停止當前請求
setRequestsHeader("header","value")	把指定首部設置為所提供的值。在設置任何首部之前必須先調用 open()。設置 header 並和請求一起發送（'POST'方法一定要）
getAllResponseHeaders()	以字元串形式返回完整的 HTTP 頭部信息
getRequestHeader("header")	以字元串的形式返回指定的 HTTP 頭部信息

事件

事件	觸發條件
onreadystatechange	當 xhr.readyState 改變時觸發；但 xhr.readyState 由非 0 值變為 0 時不觸發。
onloadstart	調用 xhr.send()方法後立即觸發，若 xhr.send()未被調用則不會觸發此事件。
onprogress	xhr.upload.onprogress 在上傳階段（即 xhr.send()之後，xhr.readyState=2 之前）觸發，每 50ms 觸發一次；xhr.onprogress 在下載階段（即 xhr.readyState=3 時）觸發，每 50ms 觸發一次
onload	當請求完成時觸發，此時 xhr.readyState=4
onloadend	當請求結束（包括請求成功和請求失敗）時觸發
onabort	當調用 xhr.abort()後觸發
ontimeout	xhr.timeout 不等於 0，由請求開始即 onloadstart 開始算起，當達到 xhr.timeout 所設置時間請求還未結束即 onloadend，則觸發此事件
onerror	在請求過程中，若發生 Network error 則會觸發此事件（若發生 Network error 時，上傳還沒有結束，則會先觸發 xhr.upload.onerror，再觸發 xhr.onerror ；若發生 Network error 時，上傳已經結束，則只會觸發 xhr.onerror ）。註意，只有發生了網路層級別的異常才會觸發此事件，對於應用層級別的異常，如響應返回的 xhr.statusCode 是 4xx 時，並不屬於 Network error ，所以不會觸發 onerror 事件，而是會觸發 onload 事件。

請求正常時，事件觸發順序

觸發 xhr.onreadystatechange (之後每次 readyState 變化時，都會觸發一次)
觸發 xhr.onloadstart //上傳階段開始：
觸發 xhr.upload.onloadstart
觸發 xhr.upload.onprogress
觸發 xhr.upload.onload
觸發 xhr.upload.onloadend //上傳結束，下載階段開始：
觸發 xhr.onprogress
觸發 xhr.onload
觸發 xhr.onloadend

發生 abort / timeout / error 時事件觸發順序

觸發 xhr.onreadystatechange 事件，此時 readystate 為 4
如果上傳階段還沒有結束，則依次觸發以下事件：

xhr.upload.onprogress
xhr.upload.[onabort 或 ontimeout 或 onerror]
xhr.upload.onloadend

觸發 xhr.onprogress 事件
觸發 xhr.[onabort 或 ontimeout 或 onerror] 事件
觸發 xhr.onloadend 事件

用法

（以 JSONPlaceHolder 為數據服務）
這個案例使用 XMLHttpRequest 對象發起了一個 GET 請求，
獲取了 JSONPlaceholder 的用戶信息數據，並將其解析為 JavaScript 對象，
然後生成了一個簡單的用戶列表，用於展示用戶的姓名、郵箱和網站地址。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Ajax 示例</title>
  </head>
  <body>
    <ul id="users"></ul>
    <script>
        /*這個案例使用 XMLHttpRequest 對象發起了一個 GET 請求，
        獲取了 JSONPlaceholder 的用戶信息數據，並將其解析為 JavaScript 對象，
        然後生成了一個簡單的用戶列表，用於展示用戶的姓名、郵箱和網站地址。*/
      const xhr = new XMLHttpRequest();
      xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
      xhr.onload = function () {
        if (xhr.status === 200) {
          const users = JSON.parse(xhr.responseText);
          const listItems = users
            .map(
              (user) =>
                `<li><strong>${user.name}</strong> (${user.email}) - ${user.website}</li>`
            )
            .join("");
          document.getElementById("users").innerHTML = listItems;
        } else {
          console.error(xhr.statusText);
        }
      };
      xhr.onerror = function () {
        console.error("發生了錯誤");
      };
      xhr.send();
    </script>
  </body>
</html>