HTML5开发中，前后端数据交互需要通过调用后端接口实现，常用的方式包括传统的Ajax和HTML5新增的Fetch API，两种方式都能完成数据请求和传输，适用场景略有不同。
Ajax调用后端接口的方法
Ajax是基于XMLHttpRequest对象实现的异步请求方式，兼容性较好，支持所有主流浏览器。下面分别展示GET和POST请求的传参示例。
1. GET请求传参
GET请求的参数会拼接在URL后面，适合传递少量非敏感数据。
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 拼接请求参数，假设要传递id和name两个参数
var params = "id=1&name=test";
xhr.open("GET", "http://ipipp.com/api/getUser?" + params, true);
// 设置请求完成后的回调
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理返回的数据，假设后端返回JSON格式
var result = JSON.parse(xhr.responseText);
console.log("GET请求返回结果：", result);
}
};
// 发送请求
xhr.send();
2. POST请求传参
POST请求的参数放在请求体中，适合传递大量数据或敏感数据，需要设置请求头指定参数格式。
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ipipp.com/api/addUser", true);
// 设置请求头，指定参数为JSON格式
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var result = JSON.parse(xhr.responseText);
console.log("POST请求返回结果：", result);
}
};
// 传递JSON格式的参数
var postData = {
username: "张三",
age: 20
};
xhr.send(JSON.stringify(postData));
Fetch API调用后端接口的方法
Fetch API是HTML5新增的原生接口，基于Promise设计，语法更简洁，支持异步处理，不过兼容性略差于Ajax，不支持IE浏览器。
1. GET请求传参
// 拼接参数
var params = "page=1&size=10";
fetch("http://ipipp.com/api/getList?" + params, {
method: "GET"
})
.then(response => {
// 判断响应状态是否正常
if (response.ok) {
return response.json();
}
throw new Error("请求失败");
})
.then(data => {
console.log("GET请求返回结果：", data);
})
.catch(error => {
console.error("请求出错：", error);
});
2. POST请求传参
fetch("http://ipipp.com/api/updateUser", {
method: "POST",
// 设置请求头
headers: {
"Content-Type": "application/json;charset=UTF-8"
},
// 传递请求体参数
body: JSON.stringify({
id: 1,
nickname: "新昵称"
})
})
.then(response => response.json())
.then(data => {
console.log("POST请求返回结果：", data);
})
.catch(error => {
console.error("请求出错：", error);
});
两种方式对比
| 对比项 | Ajax | Fetch API |
|---|---|---|
| 兼容性 | 支持所有主流浏览器，包括IE | 不支持IE，现代浏览器支持较好 |
| 语法复杂度 | 语法相对繁琐，需要手动处理状态判断 | 语法简洁，基于Promise，支持链式调用 |
| 错误处理 | 需要在回调中判断状态码 | 只有网络错误才会触发catch，HTTP错误状态码需要手动判断 |
实际开发中，如果需要兼容旧浏览器可以选择Ajax，如果面向现代浏览器且追求更简洁的代码，可以选择Fetch API。两种方式的传参逻辑核心都是根据请求类型将参数放在对应位置，同时匹配后端接口的参数接收格式即可。