Ajax
Ajax是Asynchronous JavaScript and XML的缩写，意为异步JavaScript和XML。它是一种基于原生XMLHttpRequest对象实现的异步请求技术，可以在不刷新页面的情况下向服务器发送请求并获取响应结果。Ajax不仅可以使用XML格式的数据，也可以使用JSON、HTML、文本等多种格式。
Ajax的优点在于可以在不刷新页面的情况下实现数据的异步加载，使得用户可以更快地获取数据和更流畅地浏览页面，同时也减轻了服务器的负担。Ajax的请求和响应处理需要手动设置请求头、请求参数和回调函数等，使用起来较为繁琐。
Ajax的使用过程一般包括以下步骤：
1. 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
2. 设置请求参数和请求头信息
xhr.open('GET', '/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
3. 监听响应状态变化，并处理响应数据
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
其中，readyState表示请求的状态，0表示未初始化，1表示已连接，2表示已发送，3表示已接收部分数据，4表示已接收所有数据。status表示响应的状态码，200表示请求成功。 通过设置onreadystatechange回调函数来处理异步请求的响应结果。
4. 发送请求
xhr.send();
需要注意的是，Ajax的请求可能会被浏览器的跨域安全机制所限制，需要在服务器端进行CORS（跨域资源共享）配置或使用JSONP等技术来实现跨域请求。
Axios
Axios是一个基于Promise的HTTP客户端库，可以用于浏览器和Node.js环境中发送异步请求并处理响应数据。Axios具有以下特点：
- 支持浏览器和Node.js环境；
- 支持Promise API；
- 支持请求和响应拦截器；
- 支持取消请求；
- 支持客户端防止CSRF（跨站请求伪造）攻击。
Axios的使用非常简单。首先需要在项目中引入Axios库：
import axios from 'axios';
然后，可以使用Axios发送HTTP请求：
axios.get('/api/data')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
Axios支持的请求方法有get、post、put、patch、delete等，可以通过传入一个配置对象来设置请求参数、请求头信息等：
axios({
method: 'post',
url: '/api/data',
data: {
name: 'John',
age: 30
},
headers: {
'Content-Type': 'application/json'
}
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error);
});
Axios还支持请求和响应拦截器，可以在请求和响应过程中对数据进行预处理或处理错误：
// 请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log('请求拦截器');
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log('响应拦截器');
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
最后，Axios还支持取消请求，可以在需要取消请求的时候调用cancel方法：
// 创建一个取消请求的实例
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 发送请求
axios.get('/api/data', {
cancelToken: source.token
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
if (axios.isCancel(error)) {
console.log('请求已取消');
} else {
console.log(error);
}
});
// 取消请求
source.cancel('取消请求');
Fetch
Fetch是JavaScript的一种新的网络请求API，可以用于发送HTTP请求并处理响应数据。Fetch基于Promise实现，支持跨域请求和FormData数据上传等功能，比传统的XMLHttpRequest（XHR）对象更加简单和易用。
Fetch使用非常简单，可以通过fetch方法发送HTTP请求：
fetch('/api/data')
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.log(error);
});
上面的代码中，fetch方法发送了一个GET请求，返回一个Promise对象。当Promise对象resolve时，通过response.json()方法可以将响应数据解析成一个JSON对象。当Promise对象reject时，通过catch方法可以处理错误。
Fetch也支持POST请求、设置请求头、发送FormData等功能：
const formData = new FormData();
formData.append('name', 'John');
formData.append('age', 30);
fetch('/api/data', {
method: 'POST',
body: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(error) {
console.log(error);
});
除此之外，Fetch还支持跨域请求和请求和响应拦截器等功能。要发送跨域请求，只需要在服务器端设置Access-Control-Allow-Origin头部。
需要注意的是，Fetch的一些特性在不同的浏览器中实现有所不同，需要进行兼容性测试。同时，在使用Fetch时也需要注意一些安全问题，如CSRF攻击等。
三者区别
Ajax、Axios 和 Fetch 都是用于从客户端向服务器发送异步 HTTP 请求的工具，它们之间的详细区别如下：
-
实现方式：Ajax 是一种使用 XMLHttpRequest 对象发送请求的技术，适用于各种浏览器，但使用起来相对繁琐。Axios 和 Fetch 都是基于 Promise 封装的网络请求库，可以在浏览器和 Node.js 环境中使用，相对于 Ajax 更加现代化和易于使用。
-
语法和易用性：Axios 和 Fetch 的语法比 Ajax 更加简洁易用，并提供了更多的内置功能，如拦截请求和响应、转换请求和响应数据等。相较而言，Axios 更易于使用，提供了更多的配置选项，例如设置请求头、设置超时时间等。而 Fetch 虽然语法也很简单，但使用起来可能比 Axios 复杂一些，例如处理跨域请求等。
-
功能支持：Axios 和 Fetch 支持跨域请求，支持拦截请求和响应、转换请求和响应数据、取消请求等功能。Axios 还提供了丰富的配置选项，如设置请求头、设置超时时间、设置响应类型等。而 Ajax 的功能相对较少，只支持基本的请求和响应。
-
性能和兼容性：Axios 和 Fetch 在性能方面相当接近，但 Fetch 会更加轻量级一些。Axios 在主流浏览器中都有良好的兼容性，但在一些老旧浏览器上可能需要引入 polyfill 进行兼容。Fetch 在 IE 和 Safari 中的支持程度较差，需要使用 polyfill 进行兼容。Ajax 在各种浏览器中都有良好的兼容性，但是可能会出现一些兼容性问题。
4905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
