介绍
JavaScript 中有很多不同的方法可以调用 Ajax，从而大大改善用户体验，例如向服务器发送数据、检查用户名、创建自动完成表单、投票和评分、创建聊天室等等。.
本文介绍了用于发起 AJAX 请求的最新几种方法。为了便于理解，我们重点介绍这些方法，每种方法都有其优缺点。.
1. XHR
XMLHttpRequest 是一个对象（在大多数浏览器中是原生组件，在 Microsoft Internet Explorer 中是 ActiveX 对象），它允许网页向服务器发出请求并接收响应，而无需重新加载整个页面。用户继续浏览同一页面，就像页面没有重新加载一样，更重要的是，用户不会看到或注意到这个过程——也就是说，至少默认情况下，用户不会看到新的页面加载。.
使用 XMLHttpRequest 对象可以让开发者使用来自服务器的数据修改浏览器中已加载的页面，而无需从服务器重新请求整个页面。.
使用 XHR 发送 GET 请求
const Http = new XMLHttpRequest();
const url='http://yourdomain.com/';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}使用 XHR 发送请求
var xhr = new XMLHttpRequest();
xhr.open("POST", '/submit', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
}
}
xhr.send("name=Ketan&id=1");2. 获取 API
Fetch API 是 XMLHttpRequest 之外的另一种从服务器检索资源的新选择。与 XMLHttpRequest 不同，它拥有更强大的功能集和更易于理解的命名。Fetch 的语法和结构使其灵活易用。然而，它与其他 AJAX HTTP 库最大的区别在于它被所有现代 Web 浏览器支持。Fetch 采用请求-响应模式，即 Fetch 发出请求并返回一个 Promise，该 Promise 最终解析为一个 Response 对象。.
使用 Fetch API 的好处
- 它灵活易用。
- 承诺可以避免回调地狱
- 所有现代浏览器均支持
- 遵循请求-响应方式
使用 Fetch API 的缺点
- 默认情况下不发送cookie。
- CORS 默认处于禁用状态。
在 Fetch API 中发出 GET 请求
fetch('https://www.yourdomain.com', {
method: 'get'
})
.then(response => response.json())
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block
}在 Fetch API 中发出 POST 请求
var url = 'https://www.yourdomain.com/updateProfile';
var data = {username: 'courseya'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));3. jQuery
jQuery 是一种客户端编程语言，可用于创建炫酷的 Web 应用程序。它免费且功能强大，安装和学习都相对容易，并且拥有众多插件和扩展程序，几乎可以实现您能想到的任何功能。您可以快速上手，并且在真正掌握之后，它仍然能够满足您的各种需求。.
使用 jQuery 的优势
- jQuery最大的优点就是简单易用。.
- 它还具有极高的灵活性，因为 jQuery 允许用户添加插件。.
- 它也是解决您问题的快捷方案。虽然可能存在«更好»的解决方案，但 jQuery 及其开发者团队致力于确保您能够快速有效地部署 jQuery，从而节省成本。.
- 开源软件意味着快速发展，也意味着开发者可以自由地提供最好的服务，而无需受到繁文缛节的约束。.
使用 jQuery 的缺点
- 此外，频繁的更新也意味着社区成员不太可能提供解决方案。.
- 目前市面上有很多不同版本的 jQuery，有些版本的兼容性不如其他版本。.
- 在某些情况下，jQuery 的速度比 CSS 慢。这时，它的简洁性反而成了缺点，因为它并不适用于客户端交互。.
在 jQuery 中发出 GET 请求
$.ajax({
url: '/users',
type: "GET",
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});使用 jQuery 发送 POST 请求
$.ajax({
url: '/users',
type: "POST",
data: {
name: "Ipseeta",
id: 1
},
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});4. Axios
Axios 是众多基于 Promise 的 HTTP 客户端之一，它既可以在浏览器环境下运行，也可以在 Node.js 环境下运行。它提供了一个统一的 API 来处理 XMLHttpRequest 和 Node.js 的 HTTP 接口。此外，它还使用一个针对 ES6 新语法的 polyfill 来连接请求。.
使用 Axios 的好处
- 承诺提供开箱即用的支持
- 客户端支持针对 XSRF 的保护
- 可以在执行请求或回复之前对其进行记录。.
- JSON 数据自动转换
- 支持 Promise API
- 可以调整或取消请求
- 可以调整响应时间
- 同时适用于 Node.js 和浏览器
在 Axios 中发出 GET 请求
axios.get('/get-user', {
params: {
ID: 1
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});在 Axios 中发出 POST 请求
axios.post('/user', {
name: 'Sanjeev',
id: 1
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});5. 请求
Request 库是进行 HTTP 请求的最简单方法之一。它的结构和语法与 Node.js 中处理请求的方式非常相似。目前，该项目在 GitHub 上拥有 1.8 万颗星，值得一提的是，它是最流行的 HTTP 库之一。.
句法
var request = require('request');
request('http://www.yourdomain.com', function (error, response, body) {
console.log('error:', error);
console.log('statusCode:', response && response.statusCode);
console.log('body:', body);
});6. 超级特工
SuperAgent 是一个轻量级且功能强大的 AJAX 库，它更注重代码的可读性和灵活性。与其他库不同，SuperAgent 的学习曲线较为平缓。SuperAgent 拥有一个请求对象，该对象接受 GET、POST、PUT、DELETE 和 HEAD 等方法。.
超级代理人福利
- 它拥有基于插件的环境和生态系统，可以在其中构建和开发扩展程序，以实现额外的功能。.
- 易于调节
- 友好的HTTP请求接口。.
- 用于发送请求的多个链式函数。.
- 它应该能够显示上传和下载进度。.
- 它支持分段传输加密。.
- 支持旧式呼叫。
- 许多常用功能都有相应的插件。
发出 GET 请求
request
.get('/user')
.query({ id: 1 })
.then(res => {
});发起帖子请求
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"Ipseeta","id":1}')
.then(callback)
.catch(errorCallback)结果
选择取决于您的项目、规模、目标受众和采用情况。没有绝对的对错之分。如果您为错误的需求选择了错误的库，那么这个问题就可能得到解答。选择合适的工具来完成工作。.
