目前5个流行的AJAX调用JavaScript库

在这篇文章中,我们将看一些用于进行AJAX调用的最好的JavaScript库,包括jQuery,Axios和Fetch。

目前5个流行的AJAX调用JavaScript库
在这篇文章中,我们将看一些用于进行AJAX调用的最好的JavaScript库,包括jQuery,Axios和Fetch。
AJAX是由客户端框架和库用来对服务器进行异步HTTP调用的一组Web开发技术。 AJAX代表异步JavaScript和XML。 AJAX曾经是Web开发界的一个常见名称,许多流行的JavaScript小部件都是使用AJAX构建的。例如,特定的用户交互(例如按下按钮)将调用对服务器的异步调用,服务器将检索数据并将其返回给客户端(这些都不需要重新加载网页)。

现代的AJAX改变

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

Fetch API

Fetch API是XMLHttpRequest的现代替代方法,用于从服务器检索资源。与XMLHttpRequest不同,它具有更强大的功能集和更有意义的名称。由于其语法和结构,Fetch也是灵活且易于使用的。但是,与其他AJAX HTTP库区别开来的是,它受到所有现代Web浏览器的支持。提取遵循一个请求-响应方法,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方法返回一个响应对象,您可以使用一系列的thens进一步操作。我已经使用.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的其他突出特点包括:

  1. 拦截请求和响应。
  2. 使用promise来转换请求和响应数据。
  3. 自动转换JSON数据。
  4. 取消实时请求。

要使用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还拥有一个温和的学习曲线,不像其他JavaScript库。它有一个相同的API Node.js模块。 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库的文件呢?这太容易了。

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星,值得一提的是:Request是可用的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。现代的JavaScript库和HTTP客户端使用户交互,动画,异步文件上传等前端功能更加简单。 我个人最喜欢的是Axios,因为我个人觉得它更易读易读。

原创文章,作者:webstack,如若转载,请注明出处:https://www.webstacks.cn/experience/1189.html

发表评论

登录后才能评论