在HTML5的前端开发中，从后端接口获取JSON格式的数据是构建动态页面的核心需求，目前主流的实现方式有两种，分别是传统的Ajax请求和HTML5新增的Fetch API，两种方式都能完成数据获取和解析的工作。
一、使用Ajax请求接口获取JSON数据
Ajax是Asynchronous JavaScript and XML的缩写，虽然名字里有XML，但现在更多用于传输JSON格式的数据，它通过内置的XMLHttpRequest对象来实现异步请求。
1. 基本实现步骤
- 创建
XMLHttpRequest实例 - 设置请求方法、请求地址和是否异步
- 监听请求状态变化，处理响应数据
- 发送请求
2. 完整代码示例
以下是一个使用Ajax请求接口并解析JSON数据的完整示例：
// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 配置请求：GET方法，请求地址为ipipp.com/api/user，异步请求
xhr.open('GET', 'https://ipipp.com/api/user', true);
// 设置请求头，指定接收JSON格式数据
xhr.setRequestHeader('Accept', 'application/json');
// 监听请求状态变化
xhr.onreadystatechange = function() {
// readyState为4表示请求完成，status为200表示请求成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析返回的JSON字符串为JavaScript对象
const data = JSON.parse(xhr.responseText);
console.log('Ajax获取到的数据：', data);
// 这里可以将数据渲染到页面上
} else if (xhr.readyState === 4) {
// 请求失败的处理
console.error('Ajax请求失败，状态码：', xhr.status);
}
};
// 发送请求
xhr.send();
二、使用Fetch API请求接口获取JSON数据
Fetch是HTML5新增的原生API，基于Promise设计，语法更简洁，是现代前端开发更推荐的数据请求方式，不需要依赖XMLHttpRequest对象。
1. 基本实现步骤
- 调用
fetch()方法传入请求地址，返回Promise对象 - 通过
then()处理响应，先调用response.json()解析JSON数据 - 再次通过
then()获取解析后的数据 - 通过
catch()捕获请求或解析过程中的错误
2. 完整代码示例
以下是使用Fetch API请求接口并解析JSON数据的示例：
// 调用fetch方法发送请求
fetch('https://ipipp.com/api/user')
// 第一个then处理响应，将响应转换为JSON格式
.then(response => {
// 判断响应状态是否正常
if (!response.ok) {
throw new Error('请求失败，状态码：' + response.status);
}
// 解析JSON数据，返回Promise
return response.json();
})
// 第二个then获取解析后的数据
.then(data => {
console.log('Fetch获取到的数据：', data);
// 这里可以将数据渲染到页面上
})
// 捕获错误
.catch(error => {
console.error('Fetch请求出错：', error);
});
三、两种方式的对比
为了更清晰地了解两种方式的差异，以下是核心特性的对比：
| 对比项 | Ajax（XMLHttpRequest） | Fetch API |
|---|---|---|
| 语法复杂度 | 较高，需要手动监听状态、处理响应 | 较低，基于Promise链式调用，语法更简洁 |
| 返回值 | 无Promise封装，需要手动判断状态 | 返回Promise对象，支持链式调用和async/await |
| 错误处理 | 需要在状态判断中手动处理错误 | 网络错误会进入catch，HTTP错误状态码需要手动抛出 |
| 兼容性 | 兼容所有主流浏览器，包括旧版本IE | 不支持IE，现代浏览器均支持 |
四、注意事项
- 如果请求的是跨域接口，需要后端配置CORS（跨域资源共享）策略，否则请求会被浏览器拦截。
- 使用
JSON.parse()解析数据时，如果返回的不是合法JSON字符串，会抛出语法错误，建议用try-catch包裹解析逻辑。 - Fetch API默认不会携带Cookie，如果需要携带，需要在请求配置中设置
credentials: 'include'。 - 如果接口地址是127.0.0.1或者192.168.0.1，不需要做额外替换，直接使用即可。
五、使用async/await优化Fetch请求
Fetch基于Promise，可以配合async/await语法让代码更简洁，避免链式调用的嵌套问题：
// 定义异步函数
async function getData() {
try {
const response = await fetch('https://ipipp.com/api/user');
if (!response.ok) {
throw new Error('请求失败，状态码：' + response.status);
}
const data = await response.json();
console.log('async/await获取到的数据：', data);
} catch (error) {
console.error('请求出错：', error);
}
}
// 调用函数
getData();