Partagez les 5 meilleures bibliothèques de composants JavaScript Ajax

AJAX est une série de frameworks clients de technologie de développement Web utilisés pour effectuer des appels HTTP asynchrones vers le serveur. Cet article partage les 5 principales bibliothèques de composants JavaScript Ajax pour tout le monde

AJAX est utilisé pour effectuer des appels asynchrones vers le serveur. . Une série de frameworks clients de technologie de développement Web appelés par HTTP. AJAX signifie JavaScript et XML asynchrones. AJAX était autrefois un nom courant dans le monde du développement Web, et de nombreux widgets JavaScript populaires ont été créés à l'aide d'AJAX. Par exemple, certaines interactions utilisateur (comme appuyer sur un bouton) effectuent des appels asynchrones au serveur, qui récupère les données et les renvoie au client, le tout sans recharger la page Web.

Réintroduction moderne d'AJAX

JavaScript a évolué et maintenant nous construisons des sites Web dynamiques en utilisant des bibliothèques frontales et/ou des frameworks comme React, Angular, Vue, etc. Le concept d'AJAX a également subi des changements importants, car les appels JavaScript asynchrones modernes impliquent la récupération de JSON plutôt que de XML. Il existe de nombreuses bibliothèques qui vous permettent d'effectuer des appels asynchrones vers le serveur à partir d'une application client. Certains sont intégrés aux standards des navigateurs, tandis que d’autres ont une large base d’utilisateurs car ils sont flexibles et faciles à utiliser. Certains soutiennent les promesses, d'autres utilisent des rappels. Dans cet article, je présenterai les 5 meilleures bibliothèques AJAX pour obtenir des données du serveur.

Fetch API

Fetch API est un remplacement moderne de XMLHttpRequest pour récupérer des ressources du serveur. Contrairement à XMLHttpRequest, il possède un ensemble de fonctionnalités plus puissantes et une dénomination plus significative. Basé sur sa syntaxe et sa structure, Fetch est à la fois flexible et facile à utiliser. Cependant, ce qui le distingue des autres bibliothèques HTTP AJAX est qu'il prend en charge tous les navigateurs Web modernes. Fetch suit une approche demande-réponse, c'est-à-dire que Fetch effectue une demande et renvoie une promesse qui se résout en un objet Response.

Vous pouvez transmettre l'objet Request pour l'obtenir, ou vous pouvez simplement transmettre l'URL de la ressource que vous souhaitez obtenir. L'exemple suivant montre l'utilisation de Fetch pour créer une simple requête GET.

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

Comme vous pouvez le voir, la méthode then de Fetch renvoie un objet de réponse, et vous pouvez en utiliser une série pour d'autres opérations. J'utilise la méthode .json() pour convertir la réponse en JSON et la transmettre à la console.

Que se passe-t-il si vous devez POSTer des données de formulaire ou utiliser Fetch pour créer un téléchargement de fichier AJAX ? À ce stade, en plus de Fetch, vous avez également besoin d'un formulaire de saisie et utilisez la bibliothèque FormData pour stocker l'objet du formulaire.

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

Axios

Axios est une bibliothèque JavaScript moderne construite sur XMLHttpRequest pour effectuer des appels AJAX. Il vous permet d'effectuer des requêtes HTTP depuis les navigateurs et les serveurs. De plus, il prend également en charge l’API Promise native ES6. Les autres fonctionnalités exceptionnelles d'Axios incluent :

1. Interception des demandes et des réponses.

2. Utilisez promise pour convertir les données de demande et de réponse.

3. Convertissez automatiquement les données JSON.

4. Annulez la demande en temps réel.

5. Pour utiliser Axios, vous devez d'abord l'installer.

npm install axios

Vous trouverez ci-dessous un exemple de base démontrant Axios en action.

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

Par rapport à Fetch, Axios a une syntaxe plus simple. Faisons quelque chose de plus complexe, comme le téléchargeur de fichiers AJAX que nous avons créé précédemment à l'aide de Fetch.

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 est plus lisible. Axios est également très populaire auprès des bibliothèques modernes comme React et Vue.

jQuery

jQuery était autrefois une bibliothèque de première ligne en JavaScript, utilisée pour tout gérer, des appels AJAX à la manipulation du contenu DOM. Bien que sa pertinence ait diminué avec « l'impact » des autres bibliothèques frontales, vous pouvez toujours utiliser jQuery pour effectuer des appels asynchrones.

Si vous avez déjà utilisé jQuery, c'est probablement la solution la plus simple. Cependant, vous devrez importer l'intégralité de la bibliothèque jQuery pour utiliser la méthode $.ajax. Bien que cette bibliothèque dispose de méthodes spécifiques au domaine telles que $.getJSON, $.get et $.post, sa syntaxe n'est pas aussi simple que celle des autres bibliothèques AJAX. Le code suivant est utilisé pour écrire une requête GET de base.

$.ajax({
 url: '/users',
 type: "GET",
 dataType: "json",
 success: function (data) {   console.log(data);
 }
 fail: function () {   console.log("Encountered an error")
 }
});

L'avantage de jQuery est que si vous avez des questions, vous pouvez trouver des tonnes de support et de documentation. J'ai trouvé de nombreux exemples de téléchargement de fichiers AJAX à l'aide de FormData() et jQuery. Voici le moyen le plus simple :

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 est une bibliothèque AJAX légère et évolutive qui se concentre davantage sur la lisibilité et la flexibilité. SuperAgent a également une courbe d'apprentissage douce, contrairement aux autres bibliothèques. Il dispose d'un module pour la même API Node.js. SuperAgent possède un objet de requête qui accepte des méthodes telles que GET, POST, PUT, DELETE et HEAD. Vous pouvez ensuite appeler .then(), .end() ou la nouvelle méthode .await() pour gérer la réponse. Par exemple, le code suivant est une simple requête GET utilisant SuperAgent.

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

Et si vous souhaitez faire plus, comme télécharger des fichiers à l'aide de cette bibliothèque AJAX ? Aussi super facile.

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

Request - Client HTTP simplifié

La bibliothèque Request est l'un des moyens les plus simples de passer des appels HTTP. La structure et la syntaxe sont très similaires à la façon dont les requêtes sont traitées dans Node.js. Actuellement, le projet compte 18 000 étoiles sur GitHub, et il convient de mentionner qu'il s'agit de l'une des bibliothèques HTTP les plus populaires disponibles. Voici un exemple :

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

Un favori personnel est Axios car il est plus facile à lire et plus agréable à regarder. Vous pouvez également rester fidèle à Fetch car il est bien documenté et propose des solutions standardisées.

Ce qui précède représente l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!