澳门新葡萄京官网首页 1

澳门新葡萄京官网首页分享5个顶级的JavaScript Ajax组件库_基础知识_脚本之家

本文由码农网 –
小峰原创翻译,转发请看清文末的转发必要,迎接到场我们的付费投稿布置!

AJAX是用来对服务器进行异步HTTP调用的一文山会海web开采技巧客户端框架。
AJAX即Asynchronous JavaScript and
XML。AJAX曾是web开垦界的二个相近名称,比非常多盛行的JavaScript小零器件都以应用AJAX营造的。举个例子,有个别特定的顾客交互作用会异步调用到服务器,服务器会搜索数据并将其归来给顾客端——全部这一个都无需再行加载网页。

在此篇作品中,我们将介绍部分用以AJAX调用的最好的JS库,包含jQuery,Axios和Fetch。应接查看代码示例!

AJAX的今世化重新引进

AJAX是用来对服务器举办异步HTTP调用的一多级web开拓才干顾客端框架。
AJAX即Asynchronous JavaScript and
XML(异步JavaScript和XML)。AJAX曾是web开辟界的多个大面积名称,大多流行的JavaScript小零部件都是利用AJAX创设的。举例,有个别特定的客商交互作用(如按下按键)会异步调用到服务器,服务器会招来数据并将其重回给客户端——所有那几个都没有必要重新加载网页。

JavaScript已经前行了,未来大家运用前端库和/或如React、Angular、Vue等框架营造了动态的网址。AJAX的定义也资历了重在变化,因为今世异步JavaScript调用涉及检索JSON并不是XML。有为数不菲库允许你从顾客端应用程序对服务器实行异步调用。某个走入到浏览器标准,有个别则有非常的大的顾客功底,因为它们不仅仅灵活而且便于使用。有些帮助promises,有个别则利用回调。在本文中,作者将介绍用于从服务器获取数据的前5个AJAX库。

澳门新葡萄京官网首页 1

Fetch API

AJAX的今世化重新引进

JavaScript已经提高了,今后我们使用前端库和/或如React、Angular、Vue等框架创设了动态的网址。AJAX的定义也经历了第一转变,因为现代异步JavaScript调用涉及检索JSON而不是XML。有点不清库允许你从客商端应用程序对服务器进行异步调用。有些进入到浏览器标准,有个别则有比超大的客户根底,因为它们不只有灵活并且便于使用。有些援助promises,有个别则应用回调。在本文中,作者将介绍用于从服务器获取数据的前5个AJAX库。

Fetch
API是XMLHttpRequest的现世替代品,用于从服务器检索财富。与XMLHttpRequest分裂的是,它具有越来越强硬的效率集和更有意义的命名。基于其语法和结构,Fetch不但灵活并且便于使用。不过,与任何AJAX
HTTP库不一致开来的是,它有着全部今世Web浏览器的支撑。Fetch据守诉求-响应的措施,约等于说,Fetch建议央浼并赶回解析到Response对象的promise。

Fetch API

Fetch
API是XMLHttpRequest的现世代替品,用于从服务器检索财富。与XMLHttpRequest分裂的是,它兼具更加强硬的功能集和更有意义的命名。基于其语法和构造,Fetch不但灵活並且便于使用。可是,与别的AJAX
HTTP库差异开来的是,它具有全体现代Web浏览器的支撑。Fetch遵循哀求-响应的情势,也正是说,Fetch提议倡议并重临解析到Response对象的promise。

你能够传递Request对象来赢得,也许,也可以仅传递要赢得的财富的UKoleosL。上边包车型地铁身教重于言教演示了动用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(State of Qatar 方法将响应调换为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的音讯。

您能够传递Request对象来收获,只怕,也得以仅传递要拿走的能源的U牧马人L。上面包车型客车演示演示了应用Fetch创建简单的GET央浼。

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等今世库的迎接。

fetch('https://www.example.com', { method: 'get' }) .then(response => response.json .then(jsonData => console.log .catch(err => { //error block })

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);
       }
});

正如你所阅览标,Fetch的then方法再次来到了八个响应对象,你能够利用一雨后玉兰片的then
举办更为的操作。小编使用.json(卡塔尔(قطر‎ 方法将响应调换为JSON并将其出口到控制台。

SuperAgent

SuperAgent是七个轻量级和渐进式的AJAX库,更侧重于可读性和灵活性。SuperAgent还具备三个友善的读书曲线,不像此外库。它有一个对准Node.js
API雷同的模块。SuperAgent有一个经受GET、POST、PUT、DELETE和HEAD等情势的伸手对象。然后您能够调用.then(卡塔尔,.end(卡塔尔(قطر‎或新的.await(State of Qatar方法来拍卖响应。举个例子,以下代码为使用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的信息,那么它们有一星罗棋布很正确的文书档案来帮忙您从头那个旅程。

若果你须要POST表单数据或选用Fetch创设AJAX文件上传,将会怎样?那时,除了Fetch之外,你还亟需多个输入表单,并使用FormData库来储存表单对象。

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.
});
var input = document.querySelectorvar data = new FormData()data.append('file', input.files[0])data.appendfetch('/avatars', { method: 'POST', body: data})

结论

从客商端实行HTTP调用在十年前可不是一件轻松的事。前端开采职员只得依靠于难以使用和完毕的XMLHttpRequest。今世的库和HTTP客商端使得客户人机联作、动漫、异步文件上传等前端功用变得愈加简明。

本人个人最爱怜的是Axios,因为自己感觉它更易读更舒畅。你也足以倾心Fetch,因为它文书档案化特出且有标准的解决方案。

你个人最欢娱的AJAX库是哪位? 应接各位分享你的眼光。

你可以在官方的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 .then { console.log .catch { console.log;

与Fetch比较,Axios的语法更简便易行。让大家做一些更复杂的作业,举个例子我们在此之前运用Fetch创立的AJAX文件上传器。

var data = new FormData(); data.append; data.append('file', document.getElementById; var config = { onUploadProgress: function { var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); } }; axios.put('/upload/server', data, config) .then { output.className = 'container'; output.innerHTML = res.data; }) .catch { 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  { console.log; } fail: function () { console.log("Encountered an error") }});

jQuery好的地点在于,要是您有疑点,那么您能够找到大批量的支持和文书档案。作者发觉了超多采纳FormData(卡塔尔和jQuery举办AJAX文件上传的例子。上面是最轻易易行的方法:

var formData = new FormData();formData.append[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 { console.log; }});

SuperAgent

SuperAgent是多个轻量级和渐进式的AJAX库,更青眼于可读性和灵活性。SuperAgent还富有叁个温柔的读书曲线,不像别的库。它有二个针对性Node.js
API相似的模块。SuperAgent有三个收受GET、POST、PUT、DELETE和HEAD等艺术的伸手对象。然后你能够调用.then方法来管理响应。比如,以下代码为使用SuperAgent的简要GET供给。

request .post .send({ name: 'Manny', species: 'cat' }) .set('X-API-Key', 'foobar') .set('Accept', 'application/json') .then { alert('yay got ' + JSON.stringify;

一旦您想要做越来越多的事体,举例利用此AJAX库上传文件,那该怎么办吧?
相近一流easy。

request .post .field .field('user[email]', 'tobi@learnboost.com') .field('friends[]', ['loki', 'jane']) .attach('image', 'path/to/tobi.png') .then;

假诺你风乐趣驾驭越来越多关于SuperAgent的消息,那么它们有一三种很准确的文书档案来援助您起来那些旅程。

Request——简化的HTTP客户端

Request库是扩充HTTP调用最简便易行的不二秘籍之一。结会谈语法与在Node.js中管理诉求的方法非常相同。最近,该类型在GitHub上有18K个星,值得一说的是,它是可用的最盛行的HTTP库之一。
上面是二个例证:

var request = require;request('http://www.google.com', function (error, response, body) { console.log; // Print the error if one occurred console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received console.log; // Print the HTML for the Google homepage.});

民用最爱怜的是Axios,因为它更易读更安适。你也足以倾心Fetch,因为它文书档案化特出且有准则的实施方案。

自然还或许有其余一些没有错的Ajax组件库,在事后的稿子中我们会持续为我们大饱眼福

发表评论

电子邮件地址不会被公开。 必填项已用*标注