JavaScript：Ajax（異步通信技術）

一、Ajax 核心概念

Ajax（Asynchronous JavaScript and XML）是一種異步通信技術，核心特點：

無刷新更新：無需重新加載整個頁面
異步處理：后臺發送/接收數據不阻塞用戶
數據格式：支持 XML/JSON/HTML/純文本
應用場景：表單驗證、實時搜索、無限滾動等

?

二、XMLHttpRequest 工作流程

?三、代碼解析

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax 實戰</title>
</head>
<body><div id="saze"></div><script>// 1. 創建XHR對象const xhr = new XMLHttpRequest();// 2. 配置請求（GET異步）xhr.open("GET","https://mock.mengxuegu.com/mock/67da2f89b3f51e45c0f7bfb1/data_copy/sa",true);// 3. 發送請求（GET無需參數）xhr.send();// 4. 事件監聽（推薦使用onload）xhr.onload = function() {// 狀態碼200表示成功if (xhr.status === 200) {try {// 5. 解析JSON數據const pageData = JSON.parse(xhr.responseText);// 6. 獲取DOM容器const container = document.getElementById('saze');// 7. 高效DOM操作（減少重繪）let htmlContent = '';pageData.data.admain.forEach(user => {htmlContent += `用戶名：${user.username} 密碼：${user.password}<br>`;});container.innerHTML = htmlContent;} catch (e) {console.error("JSON解析失敗:", e);}} else {console.error(`請求失敗，狀態碼：${xhr.status}`);}};// 8. 錯誤處理（網絡層）xhr.onerror = function() {alert("網絡請求發生錯誤");};</script>
</body>
</html>

四、關鍵點詳解

1.XMLHttpRequest 生命周期

readyState?狀態碼：
- 0：未初始化
- 1：open() 已調用
- 2：send() 已調用
- 3：接收響應中
- 4：響應完成（需在此處理數據）

2.HTTP 狀態碼處理

200：成功
201：創建成功
400：客戶端錯誤
401：未授權
404：資源不存在
500：服務器錯誤

六、常見問題排查

跨域錯誤：檢查服務端CORS配置
狀態碼0：通常是網絡斷開或跨域限制
解析錯誤：確保響應是合法JSON
未觸發回調：檢查readyState和status條件

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/91540.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/91540.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/91540.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！