AJAX 全称为 "Asynchronous JavaScript and XML"（异步 JavaScript 和 XML），是一种创建交互式网页应用的技术。Axios 是一个基于 promise 的 HTTP 库，它在浏览器和 node.js 中都可以使用。
以下是一些常见的AJAX和Axios的使用方法和代码示例：
- 使用AJAX发送GET请求：
// 使用原生JavaScript发送AJAX GET请求
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();
- 使用Axios发送GET请求：
// 使用Axios发送GET请求
axios.get('https://api.example.com/data')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
- 使用AJAX发送POST请求：
// 使用原生JavaScript发送AJAX POST请求
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send(JSON.stringify({
key: 'value'
}));
- 使用Axios发送POST请求：
// 使用Axios发送POST请求
axios.post('https://api.example.com/data', {
key: 'value'
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
- 使用Axios处理响应数据：
// 使用Axios处理响应数据
axios.get('https://api.example.com/data')
.then(function (response) {
// 处理响应数据
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
- 使用Axios取消请求：
// 使用Axios取消请求
var cancel;
axios.get('https://api.example.com/data', {
cancelToken: new axios.CancelToken(function executor(c) {
cancel = c;
})
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
// 在需要取消请求的时候调用cancel方法
cancel();
- 使用Axios设置请求超时：
// 使用Axios设置请求超时
axios.get('https://api.example.com/data', {
timeout: 1000
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
以上代码示例展示了如何使用AJAX和Axios发送GET和POST请求，处理响应数据，取消请求，以及设置请求超时。Axios相对于原生AJAX来说，更加现代和简洁，提供了更