JS AJAX完全指南（一）：从原生XHR到axios，再到JSON Server模拟数据

前言

AJAX是现代前端开发中与服务器交互的核心技术。本文将从AJAX基础概念讲起，系统讲解HTTP协议、原生XMLHttpRequest发送GET请求、axios库的使用、GET请求参数传递、数据渲染实战以及JSON Server搭建模拟接口。掌握这些内容，你将具备完整的前后端数据交互能力。

一、原生AJAX介绍

1.1 什么是AJAX

AJAX全称为 Asynchronous JavaScript And XML（异步的JS和XML）。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势是：无刷新获取数据，按需请求，提高网站性能。

特性

说明

1.2 AJAX的特点

优点

优点

说明

缺点

缺点

说明

二、HTTP与HTTPS

2.1 基本概念

协议

全称

说明

2.2 HTTP与HTTPS的区别

对比项

HTTP

HTTPS

三、HTTP状态码

3.1 常见状态码速查表

状态码

含义

说明

3.2 状态码分类

分类

范围

含义

四、原生XMLHttpRequest发送GET请求

4.1 基本步骤

// 绑定事件
btn.onclick = function() {
// 1. 创建对象
const xhr = new XMLHttpRequest();

// 2. 初始化：设置请求方法和URL（可加参数）
xhr.open("GET", "http://127.0.0.1:8000/server?a=100&b=200&c=300");

// 3. 发送
xhr.send();

// 4. 事件绑定：处理服务端返回的结果
xhr.onreadystatechange = function() {
// 判断服务端返回了所有结果
if (xhr.readyState === 4) {
// 判断响应状态码（2xx表示成功）
if (xhr.status >= 200 && xhr.status < 300) {
// 处理结果：响应行、响应头、响应体
result.innerHTML = xhr.response;
}
}
};
};

4.2 事件监听处理响应结果

xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // 请求完成
if (xhr.status >= 200 && xhr.status < 300) { // 请求成功
// 处理服务器返回的结果
console.log(xhr.response);
}
}
};

4.3 readyState状态说明

状态值

说明

4.4 响应结果处理

xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// 响应行
console.log(xhr.status); // 状态码
console.log(xhr.statusText); // 状态字符串

// 响应头
console.log(xhr.getAllResponseHeaders()); // 所有响应头

// 响应体
console.log(xhr.response); // 响应体内容
result.innerHTML = xhr.response; // 设置页面内容
}
}
};

五、使用axios发送AJAX请求

5.1 三种处理异步结果的方式

方式一：回调函数

axios.get("http://localhost:3002/user").then(
// 成功回调
(res) => {
console.log(res.data);
},
// 失败回调
(err) => {
console.log(err);
}
);

方式二：链式调用

axios.get("http://localhost:3002/user")
.then((res) => {
// 处理成功
console.log(res.data);
})
.catch((err) => {
// 捕获失败
console.log(err.message);
});

方式三：async/await（ES6推荐）

async function getData() {
try {
let res = await axios.get("http://localhost:3002/user");
console.log(res.data);
} catch (error) {
console.log(error);
}
}

5.2 三种方式对比

方式

优点

缺点

六、axios GET请求参数传递

6.1 URL直接传参

// 直接在URL中添加查询参数
let res = await axios.get("http://localhost:3001/list?name=孙悟空");

6.2 使用params对象传参（推荐）

let res = await axios.get("http://localhost:3001/list", {
params: { // params为固定属性名
id: 4
}
});

6.3 两种方式对比

方式

写法

适用场景

七、数据渲染实战案例

7.1 类封装实现数据获取和渲染

class DataRenderer {
constructor(url, containerSelector) {
this.url = url;
this.container = document.querySelector(containerSelector);
this.init();
}

async init() {
try {
const data = await this.fetchData();
this.render(data);
} catch (error) {
console.error('数据获取失败:', error);
}
}

async fetchData() {
const response = await axios.get(this.url);
return response.data;
}

render(data) {
// 根据数据结构渲染到页面
this.container.innerHTML = `
<h3>${data.name}</h3>
<p>年龄: ${data.age}</p>
<p>性别: ${data.sex}</p>
<p>地址: ${data.address}</p>
`;
}
}

// 使用示例
const renderer = new DataRenderer(
'http://localhost:3002/user',
'#app'
);

八、JSON Server配置说明

8.1 什么是JSON Server

json-server​ 是一个能让前端人员在本地搭建JSON服务的工具，用于模拟后端数据接口。

特性

说明

GitHub地址：GitHub – typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously) · GitHub

npm地址：https://www.npmjs.com/package/json-server

8.2 功能特性

特性

说明

8.3 package.json脚本配置

{
"scripts": {
"index": "json-server –watch index.json –port 3001",
"db": "json-server –watch db.json –port 3002",
"all": "concurrently \\"npm run index\\" \\"npm run db\\""
}
}

命令

说明

8.4 数据文件结构

用户数据（db.json）

{
"user": {
"name": "jack",
"age": 18,
"sex": "男",
"address": "合肥"
}
}

列表数据（index.json）

{
"list": [
{
"id": "1",
"name": "唐僧",
"age": 20,
"address": "东土大唐"
}
]
}

九、关键知识点总结

9.1 技术栈速查表

技术

说明

适用场景

9.2 注意事项

注意事项

说明

总结

本文系统梳理了AJAX第一部分的完整知识体系：

主题

核心要点

掌握这些内容，你就具备了前后端数据交互的完整能力。下一篇将继续深入AJAX的高级应用，欢迎持续关注！