Teilen Sie die 5 besten JavaScript-Ajax-Komponentenbibliotheken

AJAX ist eine Reihe von Webentwicklungstechnologie-Client-Frameworks, die für asynchrone HTTP-Aufrufe an den Server verwendet werden. In diesem Artikel werden die fünf wichtigsten JavaScript-Ajax-Komponentenbibliotheken für alle vorgestellt.

AJAX wird für asynchrone Aufrufe an den Server verwendet . Eine Reihe von Client-Frameworks für die Webentwicklung, die von HTTP aufgerufen werden. AJAX steht für Asynchronous JavaScript and XML. AJAX war einst ein gebräuchlicher Name in der Welt der Webentwicklung und viele beliebte JavaScript-Widgets wurden mit AJAX erstellt. Beispielsweise führen bestimmte Benutzerinteraktionen (z. B. das Drücken einer Taste) zu asynchronen Aufrufen an den Server, der die Daten abruft und an den Client zurückgibt – und das alles, ohne die Webseite neu zu laden.

Moderne Wiedereinführung von AJAX

JavaScript hat sich weiterentwickelt und jetzt erstellen wir dynamische Websites mit Front-End-Bibliotheken und/oder Frameworks wie React, Angular, Vue usw. Auch das Konzept von AJAX hat erhebliche Änderungen erfahren, da bei modernen asynchronen JavaScript-Aufrufen JSON statt XML abgerufen wird. Es gibt viele Bibliotheken, die es Ihnen ermöglichen, von einer Clientanwendung aus asynchrone Aufrufe an den Server zu tätigen. Einige sind in Browserstandards integriert, während andere aufgrund ihrer Flexibilität und Benutzerfreundlichkeit eine große Benutzerbasis haben. Manche unterstützen Support-Versprechen, andere nutzen Rückrufe. In diesem Artikel stelle ich die fünf besten AJAX-Bibliotheken zum Abrufen von Daten vom Server vor.

Fetch API

Fetch API ist ein moderner Ersatz für XMLHttpRequest zum Abrufen von Ressourcen vom Server. Im Gegensatz zu XMLHttpRequest verfügt es über einen leistungsfähigeren Funktionsumfang und eine aussagekräftigere Benennung. Aufgrund seiner Syntax und Struktur ist Fetch sowohl flexibel als auch einfach zu verwenden. Was sie jedoch von anderen AJAX-HTTP-Bibliotheken unterscheidet, ist die Unterstützung aller modernen Webbrowser. Fetch folgt einem Anfrage-Antwort-Ansatz, das heißt, Fetch stellt eine Anfrage und gibt ein Versprechen zurück, das in ein Antwortobjekt aufgelöst wird.

Sie können das Request-Objekt übergeben, um es abzurufen, oder Sie können einfach die URL der Ressource übergeben, die Sie erhalten möchten. Das folgende Beispiel zeigt die Verwendung von Fetch zum Erstellen einer einfachen GET-Anfrage.

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

Wie Sie sehen können, gibt die then-Methode von Fetch ein Antwortobjekt zurück, und Sie können eine Reihe von then für weitere Vorgänge verwenden. Ich verwende die Methode .json(), um die Antwort in JSON zu konvertieren und auf der Konsole auszugeben.

Was ist, wenn Sie Formulardaten POSTEN oder Fetch verwenden müssen, um einen AJAX-Datei-Upload zu erstellen? Zu diesem Zeitpunkt benötigen Sie zusätzlich zu Fetch auch ein Eingabeformular und verwenden die FormData-Bibliothek zum Speichern des Formularobjekts.

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 ist eine moderne JavaScript-Bibliothek, die auf XMLHttpRequest für AJAX-Aufrufe basiert. Es ermöglicht Ihnen, HTTP-Anfragen von Browsern und Servern zu stellen. Darüber hinaus unterstützt es auch die native Promise-API von ES6. Zu den weiteren herausragenden Funktionen von Axios gehören:

1. Abfangen von Anfragen und Antworten.

2. Verwenden Sie Versprechen, um Anforderungs- und Antwortdaten zu konvertieren.

3. JSON-Daten automatisch konvertieren.

4. Brechen Sie die Echtzeitanfrage ab.

5. Um Axios verwenden zu können, müssen Sie es zuerst installieren.

npm install axios

Nachfolgend finden Sie ein einfaches Beispiel, das Axios in Aktion demonstriert.

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

Im Vergleich zu Fetch hat Axios eine einfachere Syntax. Machen wir etwas Komplexeres, wie den AJAX-Datei-Uploader, den wir zuvor mit Fetch erstellt haben.

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 ist besser lesbar. Auch bei modernen Bibliotheken wie React und Vue erfreut sich Axios großer Beliebtheit.

jQuery

jQuery war früher eine Frontline-Bibliothek in JavaScript, die für alles von AJAX-Aufrufen bis zur Bearbeitung von DOM-Inhalten verwendet wurde. Obwohl seine Relevanz durch die „Auswirkungen“ anderer Front-End-Bibliotheken abgenommen hat, können Sie jQuery immer noch für asynchrone Aufrufe verwenden.

Wenn Sie jQuery schon einmal verwendet haben, ist dies wahrscheinlich die einfachste Lösung. Sie müssen jedoch die gesamte jQuery-Bibliothek importieren, um die Methode $.ajax verwenden zu können. Obwohl diese Bibliothek über domänenspezifische Methoden wie $.getJSON, $.get und $.post verfügt, ist ihre Syntax nicht so einfach wie die anderer AJAX-Bibliotheken. Der folgende Code wird zum Schreiben einer einfachen GET-Anfrage verwendet.

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

Das Tolle an jQuery ist, dass Sie bei Fragen jede Menge Support und Dokumentation finden können. Ich habe viele Beispiele für das Hochladen von AJAX-Dateien mit FormData() und jQuery gefunden. Hier ist der einfachste Weg:

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 ist eine leichte und fortschrittliche AJAX-Bibliothek, die sich mehr auf Lesbarkeit und Flexibilität konzentriert. SuperAgent weist im Gegensatz zu anderen Bibliotheken auch eine sanfte Lernkurve auf. Es verfügt über ein Modul für dieselbe Node.js-API. SuperAgent verfügt über ein Anforderungsobjekt, das Methoden wie GET, POST, PUT, DELETE und HEAD akzeptiert. Anschließend können Sie .then(), .end() oder die neue Methode .await() aufrufen, um die Antwort zu verarbeiten. Der folgende Code ist beispielsweise eine einfache GET-Anfrage mit 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));
  });

Was ist, wenn Sie mehr tun möchten, beispielsweise Dateien mit dieser AJAX-Bibliothek hochladen möchten? Auch super einfach.

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 – Vereinfachter HTTP-Client

Die Request-Bibliothek ist eine der einfachsten Möglichkeiten, HTTP-Aufrufe zu tätigen. Die Struktur und Syntax sind der Art und Weise, wie Anfragen in Node.js verarbeitet werden, sehr ähnlich. Derzeit hat das Projekt 18.000 Sterne auf GitHub und es ist erwähnenswert, dass es eine der beliebtesten verfügbaren HTTP-Bibliotheken ist. Hier ein Beispiel:

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

Ein persönlicher Favorit ist Axios, weil es einfacher zu lesen und optisch ansprechender ist. Sie können Fetch auch deshalb treu bleiben, weil es gut dokumentiert ist und über standardisierte Lösungen verfügt.

Das Obige ist der gesamte Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!

Das obige ist der detaillierte Inhalt vonTeilen Sie die 5 besten JavaScript-Ajax-Komponentenbibliotheken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!