Ajax和Fetch都是JavaScript中用于从客户端向服务器发送请求以获取数据的技术，但它们之间存在一些显著的区别。以下是对这两种技术的详细比较：
一、技术基础与实现方式
-
Ajax：
- 基础：Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。
- 实现方式：Ajax通常使用XMLHttpRequest对象来进行请求和响应的处理。这种方式的语法相对较复杂，需要编写更多的代码来处理回调函数和状态。
-
Fetch：
- 基础：Fetch是现代JavaScript中的一个API，提供了对Request和Response对象的通用定义，用于处理网络请求。
- 实现方式：Fetch使用Promise对象来处理异步操作，可以链式调用，使代码更易于理解和维护。Fetch的API风格更加简洁，且功能强大。
二、异步处理与代码风格
-
Ajax：
- 异步处理：Ajax使用回调函数来处理异步操作，这可能导致回调地狱（callback hell）的问题，特别是在复杂的请求链中。
- 代码风格：Ajax的代码风格相对传统，需要手动处理请求和响应的多个方面。
-
Fetch：
- 异步处理：Fetch使用Promise对象来处理异步操作，这使得处理异步请求更为灵活和简洁。可以使用async/await来编写清晰的异步代码，避免了回调地狱的问题。
- 代码风格：Fetch的代码风格更加现代和简洁，易于理解和维护。
三、跨域请求与CORS
-
Ajax：
- 跨域请求：Ajax请求可以跨越不同的域名，但需要适当处理CORS（跨源资源共享）问题。Ajax可以通过JSONP、代理服务器等技术来进行跨域请求。
-
Fetch：
- 跨域请求：Fetch对跨域请求有更严格的限制，因为它遵循了同源策略。如果需要进行跨域请求，需要在服务器端设置适当的CORS头以允许跨域请求。Fetch请求可以自动处理CORS问题，但在某些情况下可能需要额外的配置。
四、其他特点
-
Ajax：
- 灵活性：Ajax可以自定义请求头、请求体、响应格式等，提供了较高的灵活性。
- 兼容性：Ajax在老版本的浏览器中可能存在兼容性问题，但随着现代浏览器的普及，这个问题已经得到了很大的改善。
-
Fetch：
- 自带超时处理：Fetch可以在请求超时后自动中断请求，避免了长时间等待。
- 响应处理：Fetch提供了丰富的方法来处理响应数据，如.json()、.text()、.blob()等，使得处理响应数据更加方便。
用法
fetch 是 JavaScript 中的一个现代且强大的网络请求 API，它提供了一种简单、逻辑清晰的方式来跨网络异步获取资源。fetch 返回一个 Promise，这使得它很容易与 JavaScript 的异步/等待（async/await）语法一起使用。以下是一些基本用法示例：
基本 GET 请求
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 解析 JSON 数据
})
.then(data => {
console.log(data); // 处理数据
})
.catch(error => {
console.error('There was a problem with your fetch operation:', error);
});
使用 async/await
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json(); // 等待 JSON 解析
console.log(data);
} catch (error) {
console.error('There was a problem with your fetch operation:', error);
}
}
fetchData();
POST 请求
fetch('https://api.example.com/data', {
method: 'POST', // 或者 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
key: 'value',
}),
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));
自定义请求头
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Authorization': 'Bearer YOUR_TOKEN_HERE',
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));
注意事项
fetch不会自动处理 JSON 数据，你需要使用.json()方法来解析 JSON 响应体。fetch遵循 CORS（跨源资源共享）策略，如果请求跨域，则必须服务器支持 CORS。fetch抛出的错误不会自动被.catch()捕获，只有请求本身成功（即 HTTP 状态码在 200-299 范围内），但解析响应体（如.json()）时出错，才会被.catch()捕获。因此，通常检查response.ok属性是一个好习惯。fetch的body属性可以是多种类型，如Blob、BufferSource、FormData、URLSearchParams或USVString对象。对于 JSON 数据，需要手动JSON.stringify()转换。
fetch API 提供了灵活的网络请求功能，是现代前端开发中不可或缺的一部分。
html中完整使用fetch的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch Example</title>
</head>
<body>
<h1>Fetch API Example</h1>
<!-- 你可以在这里添加更多的HTML内容 -->
<script>
// 使用async/await语法进行fetch请求
async function fetchData() {
try {
// 发起fetch请求
const response = await fetch('https://api.example.com/data');
// 检查响应是否成功
if (!response.ok) {
throw new Error('Network response was not ok: ' + response.statusText);
}
// 解析JSON响应体
const data = await response.json();
// 处理数据，例如：在控制台中打印
console.log(data);
// 你也可以在这里将数据显示在HTML页面上
// 例如：document.getElementById('someElementId').innerText = JSON.stringify(data);
} catch (error) {
// 捕获并处理任何错误
console.error('There was a problem with your fetch operation:', error);
}
}
// 调用函数
fetchData();
</script>
</body>
</html>
五、总结
Ajax和Fetch各有优缺点，适用于不同的场景。Ajax作为一种传统的技术，在旧的应用和环境中仍然广泛使用，并且具有较高的灵活性。而Fetch作为现代JavaScript中的API，提供了更简洁、功能更强大的方式来处理网络请求，特别适合使用在现代JavaScript应用中。开发者可以根据实际需求和场景选择合适的技术。
