目錄
- 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，由請求開始即 onl oadstart 開始算起，當達到 xhr.timeout 所設定時間請求還未結束即 onl oadend，則觸發此事件 |
| onerror | 在請求程序中，若發生 Network error 則會觸發此事件（若發生 Network error 時，上傳還沒有結束，則會先觸發 xhr.upload.onerror，再觸發 xhr.onerror ；若發生 Network error 時，上傳已經結束，則只會觸發 xhr.onerror ），注意，只有發生了網路層級別的例外才會觸發此事件，對于應用層級別的例外，如回應回傳的 xhr.statusCode 是 4xx 時，并不屬于 Network error ，所以不會觸發 one rror 事件，而是會觸發 onl oad 事件， |
請求正常時，事件觸發順序
- 觸發 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 或 one rror]
- xhr.upload.onloadend
- 觸發 xhr.onprogress 事件
- 觸發 xhr.[onabort 或 ontimeout 或 one rror] 事件
- 觸發 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547534.html
標籤：JavaScript