'# JS中的Ajax发送请求获取数据流程
一、背景与问题
在现代Web开发中，Ajax技术已成为实现动态页面交互的核心手段。通过JavaScript发起异步HTTP请求，可以实现页面局部刷新、实时数据更新等场景。但随着业务复杂度提升，开发者常遇到以下问题：
- 传统XMLHttpRequest与Fetch API的使用差异
- 跨域请求的配置难题
- 异步操作的回调地狱问题
- 网络请求的性能瓶颈
- 安全漏洞的潜在风险
本文将深入解析Ajax请求的底层机制，结合实际开发场景，探讨最佳实践与常见陷阱。
二、基本原理
1. 网络请求生命周期
浏览器发起Ajax请求时，会经历以下阶段：
- 建立TCP连接（三次握手）
- 发送HTTP请求头（包括User-Agent、Accept等）
- 服务器处理请求并返回响应头
- 传输响应体数据
- 建立TCP连接（四次挥手）
2. 事件循环机制
JavaScript的异步处理依赖事件循环，当调用XMLHttpRequest.open()时，浏览器会将请求放入任务队列，等待事件循环处理。Fetch API则基于Promise实现，通过微任务队列处理响应。
3. HTTP协议基础
理解Content-Type、Accept、Cache-Control等头信息对请求性能至关重要。例如：
GET /api/data HTTP/1.1
Host: example.com
Content-Type: application/json
Accept: application/json
Cache-Control: no-cache三、环境准备
# 安装Node.js环境
# 创建项目结构
mkdir ajax-demo
cd ajax-demo
npm init -y
npm install express四、核心实现
1. XMLHttpRequest基础用法
// 基础GET请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('Response:', JSON.parse(xhr.responseText));
}
};
xhr.send();关键点解析：
open()方法的第三个参数控制同步/异步readyState属性有5种状态：0-4status属性包含HTTP状态码（200/404/500等）
2. Fetch API用法
// 异步GET请求
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
})
.then(data => console.log('Fetch Response:', data))
.catch(error => console.error('Fetch Error:', error));关键点解析：
- 返回Promise对象，支持链式调用
response.ok判断HTTP状态码是否在200-299范围response.json()将响应体解析为JSON对象
3. POST请求示例
// 表单数据提交
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => console.log('POST Response:', data));关键点解析：
- 必须设置
Content-Type头 body需要是字符串格式- 需要处理服务器返回的JSON数据
五、完整案例
1. 实时数据展示案例
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Ajax Demo</title>
</head>
<body>
<div id="dataContainer">Loading...</div>
<button id="refreshBtn">Refresh</button>
<script>
async function fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
if (!response.ok) throw new Error('Network response was not ok');
const data = await response.json();
document.getElementById('dataContainer').textContent = JSON.stringify(data, null, 2);
} catch (error) {
console.error('Fetch error:', error);
document.getElementById('dataContainer').textContent = 'Error loading data';
}
}
document.getElementById('refreshBtn').addEventListener('click', fetchData);
fetchData();
</script>
</body>
</html>2. 服务端模拟响应（Node.js）
// server.js
const express = require('express');
const app = express();
const PORT = 3000;
app.get('/posts/:id', (req, res) => {
const id = req.params.id;
const data = {
id: parseInt(id),
title: `Post ${id}`,
body: 'This is a sample post',
userId: 1
};
res.json(data);
});
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}`);
});六、源码解析
1. Fetch API源码结构（简化版）
// fetch.js
function fetch(url, options) {
return new Promise((resolve, reject) => {
const request = new XMLHttpRequest();
request.open(options.method || 'GET', url, true);
request.onload = function() {
if (request.status >= 200 && request.status < 300) {
resolve(JSON.parse(request.responseText));
} else {
reject(new Error(`HTTP error! status: ${request.status}`));
}
};
request.onerror = function() {
reject(new Error('Network error'));
};
request.send(options.body);
});
}关键点：
- 使用XMLHttpRequest实现底层网络请求
- 通过Promise封装异步操作
- 自动处理响应数据解析
七、进阶使用
1. 请求头配置与身份验证
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Authorization': 'Bearer YOUR_TOKEN',
'X-Requested-With': 'XMLHttpRequest'
},
credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data));2. 自定义请求拦截器（使用Axios）
// axios-interceptor.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com'
});
instance.interceptors.request.use(config => {
config.headers['Authorization'] = 'Bearer YOUR_TOKEN';
return config;
});
export default instance;3. 高级错误处理
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.catch(error => {
console.error('Fetch error:', error);
// 可以在此添加全局错误处理逻辑
});八、性能与工程实践
1. 性能优化策略
- 缓存策略：使用
Cache-Control头控制缓存 - 压缩数据：使用Gzip/Deflate压缩传输数据
- 减少请求次数：合并多个请求为一个
- 预加载资源：使用
<link rel="prefetch">预加载资源
GET /data.json HTTP/1.1
Host: example.com
Cache-Control: max-age=3600
Accept-Encoding: gzip, deflate2. 异常处理机制
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Request failed:', error);
// 可以在此添加重试机制或错误日志
}3. 安全注意事项
- 防止CSRF攻击：使用SameSite Cookie属性
- 防范XSS攻击：对返回数据进行过滤
- 数据验证：对所有输入进行校验
- HTTPS加密：确保传输数据加密
GET /secure-data HTTP/1.1
Host: secure.example.com
Content-Type: application/json
Authorization: Bearer YOUR_TOKEN九、常见问题与踩坑
1. 跨域请求问题
错误示例：
fetch('http://localhost:3000/api/data') // 会触发CORS错误解决方法：
服务端添加CORS头：
Access-Control-Allow-Origin: *- 使用代理服务器
使用
fetch的mode选项：fetch('http://localhost:3000/api/data', { mode: 'cors' })
2. 请求头缺失问题
错误示例：
fetch('https://api.example.com/data') // 缺少Content-Type头解决方法：
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})3. 异步回调地狱问题
错误示例：
fetch(url)
.then(data => {
return fetch(anotherUrl);
})
.then(anotherData => {
// 处理数据
});解决方法：
async function fetchData() {
const data = await fetch(url);
const anotherData = await fetch(anotherUrl);
// 处理数据
}十、最佳实践
- 优先使用Fetch API：相比XMLHttpRequest更简洁现代
- 使用async/await：提高代码可读性
- 统一错误处理：创建全局错误处理函数
- 添加超时机制：防止请求卡死
- 使用Axios：对于复杂项目提供更强大的功能
- 配置CORS：确保前后端通信安全
- 添加请求标识：便于调试和日志追踪
十一、总结
Ajax技术作为Web开发的基础能力，其核心在于异步通信与数据交互。本文深入剖析了XMLHttpRequest和Fetch API的实现原理，通过多个代码示例展示了不同场景下的使用方式。在实际开发中，需要根据具体需求选择合适的方案：对于简单场景可使用Fetch API，复杂项目推荐使用Axios。同时要注意处理跨域、安全、性能等常见问题，遵循最佳实践规范。随着Web技术的发展，Ajax技术仍将持续演进，但其核心原理和问题解决思路仍具有重要指导意义。