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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！