在这首诗中，他们将如是说许多用作AJAX初始化的最合适的JS库，主要包括jQuery，Axios和Fetch。热烈欢迎查阅标识符实例！
AJAX是用以对伺服器进行触发器HTTP初始化的一连串web合作开发设计应用领域程序架构。 AJAX即Asynchronous JavaScript and XML（触发器JavaScript和XML）。AJAX曾是web合作开发界的两个常用中文名称，很多盛行的JavaScript小组件都是采用AJAX构筑的。比如，很多某一的使用者可视化（如按下按键）会触发器初始化到伺服器，伺服器会索引统计数据并将其回到给应用领域程序——大部份那些都不须要再次读取页面。
AJAX的当代化再次导入
JavaScript早已变异了，那时他们使用后端库和/或如React、Angular、Vue等架构构筑了静态的中文网站。AJAX的基本概念也历经了关键性变动，即使当代触发器JavaScript初始化牵涉索引JSON而并非XML。有很多库容许你从应用领域程序应用领域程
Fetch API
Fetch API是XMLHttpRequest的当代代替品，用作从伺服器索引天然资源。与XMLHttpRequest相同的是，它具备更强悍的目褐和枭女的重新命名。如前所述其句法和内部结构，Fetch不仅灵巧所以更易采用。但，与其它AJAX HTTP库差别开去的是，它具备大部份当代Web应用领域程序的全力支持。Fetch遵从允诺-积极响应的方式，换句话说，Fetch明确提出允诺并回到导出到Response对象的promise。
fetch(https://www.example.com, {
method: get
})
.then(response => response.json())
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block
})
正如你所看到的，Fetch的then方式回到了两个积极响应第一类，你可以采用一连串的then 进行进一步的操作。我采用.json() 方式将积极响应转换为JSON并将其输出到控制台。
假如你须要POST表单统计数据或采用Fetch创建AJAX文件上传，将会怎么样？此时，除了Fetch之外，你还须要两个输入表单，并采用FormData库来存储表单第一类。
varinput = document.querySelector(input[type=”file”])
var data = new FormData()
data.append(file, input.files[0])
data.append(user, blizzerand)
fetch(/avatars, {
method: POST,
body: data
})
你可以在官方的Mozilla web文档中阅读更多关于Fetch API的信息。
Axios
Axios是两个如前所述XMLHttpRequest而构筑的当代JavaScript库，用作进行AJAX初始化。它容许你从应用领域程序和伺服器发出HTTP允诺。此外，它还全力支持ES6原生的Promise API。Axios的其它突出特点主要包括：
拦截允诺和积极响应。采用promise转换允诺和积极响应统计数据。自动转换JSON统计数据。取消实时允诺。要采用Axios，你须要先安装它。
npm install axios
下面是两个演示Axios行动的基本例子。
// Make a request for a user with a given ID
axios.get(/user?ID=12345)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
与Fetch相比，Axios的句法更简单。让他们做许多更复杂的事情，比如他们之前采用Fetch创建的AJAX文件上传器。
var data = new FormData();
data.append(foo, bar);
data.append(file, document.getElementById(file).files[0]);
var config = {
onUploadProgress: function(progressEvent) {
var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
}
};
axios.put(/upload/server, data, config)
.then(function (res) {
output.className = container;
output.innerHTML = res.data;
})
.catch(function (err) {
output.className = container text-danger;
output.innerHTML = err.message;
});
Axios更具可读性。Axios也非常受React和Vue等当代库的热烈欢迎。
jQuery
jQuery曾经是JavaScript中的两个前线库，用作处理从AJAX初始化到操纵DOM内容的大部份事情。虽然随着其它后端库的“冲击”，其相关性有所降低，但你仍然可以采用jQuery来进行触发器初始化。
如果你之前采用过jQuery，那么这可能是最简单的解决方案。但，你将不得不导入整个jQuery库以采用$.ajax方式。虽然这个库有某一于域的方式，比如$.getJSON，$.get和$.post，但其句法并不像其它的AJAX库那么简单。以下标识符用作编写基本的GET允诺。
$.ajax({
url: /users,
type: “GET”,
dataType: “json”,
success: function (data) {
console.log(data);
}
fail: function () {
console.log(“Encountered an error”)
}
});
jQuery好的地方在于，如果你有疑问，那么你可以找到大量的全力支持和文档。我发现了很多采用FormData()和jQuery进行AJAX文件上传的例子。下面是最简单的方式：
var formData = new FormData();
formData.append(file, $(#file)[0].files[0]);
$.ajax({
url : upload.php,
type : POST,
data : formData,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success : function(data) {
console.log(data);
alert(data);
}
});
SuperAgent
SuperAgent是两个轻量级和渐进式的AJAX库，更侧重于可读性和灵巧性。SuperAgent还拥有两个温和的学习曲线，不像其它库。它有两个针对Node.js API相同的模块。SuperAgent有两个接受GET、POST、PUT、DELETE和HEAD等方式的允诺第一类。然后你可以初始化.then()，.end()或新的.await()方式来处理积极响应。比如，以下标识符为采用SuperAgent的简单GET允诺。
request
.post(/api/pet)
.send({ name: Manny, species: cat })
.set(X-API-Key, foobar)
.set(Accept, application/json)
.then(function(res) {
alert(yay got + JSON.stringify(res.body));
});
如果你想要做更多的事情，比如采用此AJAX库上传文件，那该怎么做呢？ 同样超级easy。
request
.post(/upload)
.field(user[name], Tobi)
.field(user[email], tobi@learnboost.com)
.field(friends[], [loki, jane])
.attach(image, path/to/tobi.png)
.then(callback);
如果你有兴趣了解更多关于SuperAgent的信息，那么它们有一连串很不错的文档来帮助你开始这个旅程。
Request——简化的HTTP应用领域程序
Request库是进行HTTP初始化最简单的方式之一。内部结构和句法与在Node.js中处理允诺的方式非常相似。目前，该项目在GitHub上有18K个星，值得一提的是，它是可用的最盛行的HTTP库之一。 下面是两个例子：
var request = require(request);
request(http://www.google.com, function(error, response, body) {
console.log(error:, error); // Print the error if one occurred
console.log(statusCode:, response && response.statusCode); // Print the response status code if a response was received
console.log(body:, body); // Print the HTML for the Google homepage.
});
结论
从应用领域程序进行HTTP初始化在十年前可并非一件容易的事。后端合作开发人员不得不依赖于难以采用和实现的XMLHttpRequest。当代的库和HTTP应用领域程序使得使用者可视化、动画、触发器文件上传等后端功能变得更加简单。
我个人最喜欢的是Axios，即使我觉得它更易读更赏心悦目。你也可以忠于Fetch，即使它文档化良好且有标准化的解决方案。
你个人最喜欢的AJAX库是哪个？ 热烈欢迎各位分享你的看法。
