分享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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
一个用js实现的页内搜索代码
May 23 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 Javascript
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
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
js 深拷贝函数
2008/12/04 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python3爬虫中异步协程的用法
2020/07/10 Python
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
给校长的建议书300字
2014/05/16 职场文书
共青团员自我评价
2015/03/10 职场文书
迎新生晚会主持词
2015/06/30 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle