分享5个顶级的JavaScript Ajax组件库


Posted in Javascript onSeptember 16, 2018

AJAX是用来对服务器进行异步HTTP调用的一系列web开发技术客户端框架。 AJAX即Asynchronous JavaScript and XML(异步JavaScript和XML)。AJAX曾是web开发界的一个常见名称,许多流行的JavaScript小部件都是使用AJAX构建的。例如,有些特定的用户交互(如按下按钮)会异步调用到服务器,服务器会检索数据并将其返回给客户端——所有这些都不需要重新加载网页。

AJAX的现代化重新引入

JavaScript已经进化了,现在我们使用前端库和/或如React、Angular、Vue等框架构建了动态的网站。AJAX的概念也经历了重大变化,因为现代异步JavaScript调用涉及检索JSON而不是XML。有很多库允许你从客户端应用程序对服务器进行异步调用。有些进入到浏览器标准,有些则有很大的用户基础,因为它们不但灵活而且易于使用。有些支持promises,有些则使用回调。在本文中,我将介绍用于从服务器获取数据的前5个AJAX库。

Fetch API

Fetch API是XMLHttpRequest的现代替代品,用于从服务器检索资源。与XMLHttpRequest不同的是,它具有更强大的功能集和更有意义的命名。基于其语法和结构,Fetch不但灵活而且易于使用。但是,与其他AJAX HTTP库区别开来的是,它具有所有现代Web浏览器的支持。Fetch遵循请求-响应的方法,也就是说,Fetch提出请求并返回解析到Response对象的promise。

你可以传递Request对象来获取,或者,也可以仅传递要获取的资源的URL。下面的示例演示了使用Fetch创建简单的GET请求。

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库来存储表单对象。

var input = 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 IDaxios.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.
});

个人最喜欢的是Axios,因为它更易读更赏心悦目。你也可以忠于Fetch,因为它文档化良好且有标准化的解决方案。

当然还有其它一些不错的Ajax组件库,在以后的文章中我们会继续为大家分享

Javascript 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 #Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 #Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 #Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 #Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 #Javascript
vue debug 二种方法
Sep 16 #Javascript
Vue刷新修改页面中数据的方法
Sep 16 #Javascript
You might like
PHP合并静态文件详解
2014/11/14 PHP
Joomla开启SEF的方法
2016/05/04 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
简单了解python元组tuple相关原理
2019/12/02 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
彪马美国官网:PUMA美国
2017/03/09 全球购物
小学学雷锋活动总结
2014/04/25 职场文书
趣味运动会策划方案
2014/06/02 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技