Ajax（Asynchronous JavaScript and XML）和 Fetch 都是用于在客户端和服务器之间进行数据交互的技术，但它们有一些关键的区别。让我们详细介绍这些区别，并举例说明它们的用法。
1. XMLHttpRequest (Ajax):
特点：
- 老的技术： XMLHttpRequest 是一个比较古老的技术，自2005年以来就存在于浏览器中。
- 基于事件的异步： 它使用事件处理程序来处理异步请求，通常需要编写回调函数。
- 不支持 Promise： XMLHttpRequest 不支持 Promise，因此处理异步操作可能会变得复杂。
示例：
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();
2. Fetch API:
fetch 是 JavaScript 中用于发起网络请求的现代 API，它提供了一种简单、强大且灵活的方式来获取和发送数据。下面是 fetch 的详细介绍：
基本用法：
fetch(url, options)
.then(response => {
// 处理响应
})
.catch(error => {
// 处理错误
});
url：表示要请求的资源的 URL。options（可选）：一个配置对象，用于指定请求的方法、头部信息、请求体等。
特点和优势：
-
Promise 风格：
fetch返回一个 Promise，使异步请求和响应处理更加清晰和简单。您可以使用.then()处理成功的响应，使用.catch()处理错误。 -
现代 API：
fetch是现代 JavaScript 标准的一部分，它提供了更简洁、可读性更高的 API，相比传统的 XMLHttpRequest 更易于使用。 -
支持跨域请求：
fetch默认启用了跨域资源共享（CORS），允许您发起跨域请求。这对于与不同域上的 API 进行通信非常有用。 -
更多的配置选项： 通过
options参数，您可以配置请求的方法、头部信息、请求体、认证信息等，以满足各种需求。 -
流式处理响应： 您可以通过流式处理响应数据，而不需要等待整个响应加载完成。这对于处理大型数据或流媒体非常有用。
-
支持 JSON：
fetch默认处理 JSON 数据，您可以使用.json()方法解析 JSON 响应。
示例：
发送 GET 请求：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('请求失败', error);
});
发送 POST 请求：
const formData = new FormData();
formData.append('username', 'user123');
formData.append('password', 'pass456');
fetch('https://api.example.com/login', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('请求失败', error);
});
发送带头部信息的请求：
fetch('https://api.example.com/data', {
headers: {
'Authorization': 'Bearer myToken',
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('请求失败', error);
});
fetch 是现代 Web 开发中非常重要的一部分，它提供了更多灵活性和性能优势，但也需要开发者熟悉其 API 和一些异步编程的概念。请注意，fetch 在某些情况下需要处理错误，如网络连接问题或响应状态码不成功的情况。
