XMLHttpRequest
(XHR), jQuery 的 AJAX 方法, 和 axios
都是用于在浏览器中发起 HTTP 请求的技术。它们各有特点,并且在不同的时代和场景下被使用。
1.XMLHttpRequest (XHR)
XMLHttpRequest
是最早的浏览器提供的 JavaScript API,用于在浏览器中发起 HTTP 请求。它是一个底层 API,需要手动设置请求参数、发送请求、以及处理响应。虽然它可以用于发送 AJAX 请求,但由于其 API 较为底层和繁琐,很多开发者选择使用更高级的库或框架来简化 HTTP 请求的处理。
1.1 xhr
// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 设置请求的 URL 和方法
xhr.open('GET', 'https://api.example.com/data', true); // 第三个参数为 true 表示异步请求
// 设置请求完成后的回调函数
xhr.onload = function () {
if (xhr.status === 200) { // 请求成功
// 获取响应数据
var response = xhr.responseText;
// 处理响应数据
console.log(response);
} else {
// 处理请求错误
console.error('请求失败:', xhr.status);
}
};
// 设置请求错误时的回调函数
xhr.onerror = function () {
console.error('请求发生错误');
};
// 发送请求
xhr.send();
1.2 fetch()
// 使用 fetch API
fetch('https://api.example.com/data')
.then(response => response)
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
2.jQuery 的 AJAX 方法
随着 jQuery 的流行,jQuery 提供了更简洁、更易用的 AJAX 方法,如 $.get()
, $.post()
, $.ajax()
等。这些方法封装了 XMLHttpRequest
,提供了更高级的接口,使得开发者能够更方便地发起 HTTP 请求,并处理响应。然而,随着现代前端框架和库的兴起,jQuery 在很多项目中逐渐被替代。
$.ajax 的 API
$.ajax 方法接受一个配置对象,该对象可以包含多种属性来定义请求的行为。以下是一些常用的属性:
url: 请求的 URL。
type: 请求类型(GET、POST 等)。
dataType: 预期的服务器响应的数据类型(如 'json', 'xml', 'html' 等)。
data: 要发送到服务器的数据。
success: 请求成功时调用的回调函数。
error: 请求失败时调用的回调函数。
beforeSend: 发送请求之前调用的函数,可以修改请求的配置。
complete: 请求完成后调用的回调函数,无论成功或失败。
$.ajax({
url: 'https://api.example.com/data',
type: 'GET',
dataType: 'json',
success: function(data) {
console.log('Success:', data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error('Error:', textStatus, errorThrown);
}
});
2.1简写的请求方式
jQuery 还提供了几个简写的 AJAX 方法,这些方法实际上是 $.ajax
的特殊形式,用于处理常见的 HTTP 请求类型。这些简写方法包括:
$.get(url, data, success, dataType)
: 发送 GET 请求。$.post(url, data, success, dataType)
: 发送 POST 请求。$.getJSON(url, data, success)
: 发送 GET 请求并自动将响应解析为 JSON。$.getScript(url, success)
: 加载并执行 JavaScript 文件。
2.2 使用 $.get
$.get('https://api.example.com/data', function(data) {
console.log('Success:', data);
}).fail(function(jqXHR, textStatus, errorThrown) {
console.error('Error:', textStatus, errorThrown);
});
2.3使用 $.post
$.post('https://api.example.com/save', { param1: 'value1', param2: 'value2' }, function(data) {
console.log('Success:', data);
}).fail(function(jqXHR, textStatus, errorThrown) {
console.error('Error:', textStatus, errorThrown);
});
2.4使用 $.getJSON
$.getJSON('https://api.example.com/data.json', function(data) {
console.log('Success:', data);
}).fail(function(jqXHR, textStatus, errorThrown) {
console.error('Error:', textStatus, errorThrown);
});
2.5 jQuery返回的是jqXHR对象
3.Axios
axios
是一个基于 Promise 的 HTTP 客户端,它提供了更现代、更强大、更易于使用的 API。与 XMLHttpRequest
和 jQuery 的 AJAX 方法相比,axios
有以下优势:
- 基于 Promise:
axios
返回一个 Promise 对象,这使得它可以与async/await
语法很好地结合使用,使异步代码更加简洁和易读。 - 支持取消请求:
axios
提供了取消请求的功能,这在某些场景下非常有用。 - 自动转换 JSON 数据:
axios
在发送请求时会自动将 JavaScript 对象转换为 JSON 字符串,并在收到响应时自动将 JSON 字符串转换为 JavaScript 对象。 - 客户端支持防止 CSRF/XSRF:
axios
提供了客户端防止跨站请求伪造的功能。 - 提供了丰富的 API:
axios
提供了丰富的 API,如拦截器、请求和响应转换、取消请求等。
Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 node.js。它提供了丰富的 API,允许你发送各种类型的 HTTP 请求,并且具有很多有用的特性,比如拦截请求和响应、转换请求和响应数据、取消请求等。
3.1Axios API
Axios 的 API 主要通过 axios
函数和 axios.create
方法来使用。以下是一些常用的方法:
axios(config)
: 发送一个请求。config
是一个对象,包含请求的配置信息。axios.create([config])
: 创建一个新的 Axios 实例。axios.get(url[, config])
: 发送一个 GET 请求。axios.delete(url[, config])
: 发送一个 DELETE 请求。axios.head(url[, config])
: 发送一个 HEAD 请求。axios.options(url[, config])
: 发送一个 OPTIONS 请求。axios.post(url[, data[, config]])
: 发送一个 POST 请求。axios.put(url[, data[, config]])
: 发送一个 PUT 请求。axios.patch(url[, data[, config]])
: 发送一个 PATCH 请求。
每个请求方法都返回一个 Promise,你可以使用 .then()
和 .catch()
来处理成功和失败的响应。
3.2执行 GET
请求
// 发送 GET 请求
axios.get('https://api.example.com/data')
.then(function (response) {
// 处理响应数据
console.log(response.data);
})
.catch(function (error) {
// 处理错误
console.log(error);
});
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3.3执行 POST
请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 发送 POST 请求
axios.post('https://api.example.com/data', { param1: 'value1' })
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
3.3执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
3.4axios API
可以通过向 axios
传递相关配置来创建请求
axios(config)
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
3.5async与await
(async function (){
const {data: res} = await axios.post('/api/test/')
// 返回真实的数据
console.log(res)
})();
总结
- XMLHttpRequest:是最底层的 API,适用于需要直接控制 HTTP 请求的场景。
- jQuery 的 AJAX 方法:提供了更高级、更简洁的接口,适用于使用 jQuery 的项目。
- Axios:是一个现代、功能丰富的 HTTP 客户端,适用于大多数现代前端项目,特别是与
async/await
结合使用时。