Einführung
Es gibt viele verschiedene Möglichkeiten, Ajax in JavaScript aufzurufen, was die Benutzererfahrung erheblich verbessern kann, z. B. das Senden von Daten an den Server, das Überprüfen von Benutzernamen, das Erstellen von Autocomplete-Formularen, das Abstimmen und Bewerten, das Erstellen von Chaträumen und so weiter.
Dieser Artikel bietet Informationen zu den verschiedenen Optionen für AJAX-Aufrufe. Um es übersichtlich zu halten, konzentrieren wir uns auf die einzelnen Optionen und ihre jeweiligen Vor- und Nachteile.
1. XHR
XMLHttpRequest ist ein Objekt (in den meisten Browsern eine native Komponente, in Microsoft Internet Explorer ein ActiveX-Objekt), das es einer Webseite ermöglicht, eine Anfrage an einen Server zu senden und eine Antwort zu empfangen, ohne die gesamte Seite neu zu laden. Der Benutzer kann die Seite weiterhin nutzen, als wäre sie nicht neu geladen worden, und bemerkt die Verarbeitung nicht – standardmäßig wird also kein neuer Seitenaufruf angezeigt.
Durch die Verwendung des XMLHttpRequest-Objekts kann der Entwickler eine bereits im Browser geladene Seite mit Daten vom Server modifizieren, ohne die gesamte Seite erneut vom Server anfordern zu müssen.
Eine GET-Anfrage mit XHR senden
const Http = new XMLHttpRequest();
const url='http://yourdomain.com/';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}Senden einer Anfrage per XHR
var xhr = new XMLHttpRequest();
xhr.open("POST", '/submit', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
}
}
xhr.send("name=Ketan&id=1");2. Fetch API
Die Fetch API ist eine neue Alternative zu XMLHttpRequest zum Abrufen von Ressourcen von einem Server. Im Gegensatz zu XMLHttpRequest bietet sie einen leistungsfähigeren Funktionsumfang und aussagekräftigere Namen. Dank ihrer Syntax und Struktur ist Fetch zudem flexibel und einfach zu verwenden. Was sie jedoch von anderen AJAX-HTTP-Bibliotheken abhebt, ist die Unterstützung durch alle modernen Webbrowser. Fetch verwendet ein Anfrage-Antwort-Modell: Fetch sendet eine Anfrage und gibt ein Promise zurück, das zu einem Response-Objekt aufgelöst wird.
Vorteile der Verwendung der Fetch API
- Es ist flexibel und einfach zu bedienen.
- Die Rückruf-Hölle wird durch Versprechen vermieden.
- Wird von allen modernen Browsern unterstützt
- Folgt einem Anfrage-Antwort-Ansatz
Nachteile der Verwendung der Fetch API
- Sendet standardmäßig keine Cookies.
- CORS ist standardmäßig deaktiviert.
Eine GET-Anfrage in der Fetch API senden
fetch('https://www.yourdomain.com', {
method: 'get'
})
.then(response => response.json())
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block
}Eine POST-Anfrage in der Fetch API senden
var url = 'https://www.yourdomain.com/updateProfile';
var data = {username: 'courseya'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));3. jQuery
jQuery ist eine clientseitige Programmiersprache, mit der Sie beeindruckende Webanwendungen erstellen können. Sie ist kostenlos und dennoch leistungsstark, relativ einfach einzurichten und zu erlernen und bietet zahlreiche Plugins und Erweiterungen, mit denen Sie nahezu alles realisieren können, was Sie sich vorstellen. Sie können schnell loslegen und werden auch später, wenn Sie die Sprache richtig beherrschen, nicht an ihre Grenzen stoßen.
Vorteile der Verwendung von jQuery
- Der größte Vorteil von jQuery ist seine Einfachheit.
- Es ist außerdem unglaublich flexibel, da jQuery es Benutzern ermöglicht, Plugins hinzuzufügen.
- Es ist außerdem eine sehr schnelle Lösung für Ihre Probleme. Auch wenn es möglicherweise «bessere» Lösungen gibt, arbeiten jQuery und seine Entwickler als Team zusammen, um sicherzustellen, dass Sie jQuery schnell und effektiv implementieren können, was Ihnen Geld spart.
- Open-Source-Software bedeutet schnelles Wachstum und die Freiheit für Entwickler, ohne bürokratische Hürden den bestmöglichen Service zu bieten.
Nachteile der Verwendung von jQuery
- Häufige Aktualisierungen bedeuten auch, dass Community-Mitglieder eher keine Lösungen anbieten werden.
- Mittlerweile gibt es auch viele verschiedene Versionen von jQuery, und einige sind weniger kompatibel als andere.
- In manchen Fällen ist jQuery im Vergleich zu CSS langsamer. Dann wird seine Einfachheit zum Nachteil, da es nicht für clientseitige Interaktionen ausgelegt ist.
Eine GET-Anfrage in jQuery erstellen
$.ajax({
url: '/users',
type: "GET",
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});Eine POST-Anfrage in jQuery erstellen
$.ajax({
url: '/users',
type: "POST",
data: {
name: "Ipseeta",
id: 1
},
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});4. Axios
Axios ist einer von vielen Promise-basierten HTTP-Clients, die sowohl im Browser als auch in der Node.js-Umgebung funktionieren. Er bietet im Wesentlichen eine einheitliche API für die Verarbeitung von XMLHttpRequest und der Node.js-HTTP-Schnittstelle. Darüber hinaus verbindet er Anfragen mithilfe eines Polyfills für die neue ES6-Syntax.
Vorteile der Verwendung von Axios
- Sofort einsatzbereite Unterstützung versprechen
- Clientseitige Unterstützung für den Schutz vor XSRF
- Anfragen oder Antworten können aufgezeichnet werden, bevor sie ausgeführt werden.
- Automatische Konvertierung für JSON-Daten
- Unterstützt die Promise-API
- Eine Anfrage anpassen oder stornieren
- Die Reaktionszeit kann angepasst werden.
- Funktioniert sowohl unter Node.js als auch im Browser.
Eine GET-Anfrage in Axios erstellen
axios.get('/get-user', {
params: {
ID: 1
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});Eine POST-Anfrage in Axios erstellen
axios.post('/user', {
name: 'Sanjeev',
id: 1
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});5. Anfrage
Die Request-Bibliothek ist eine der einfachsten Möglichkeiten, HTTP-Anfragen zu stellen. Struktur und Syntax ähneln stark der Anfrageverarbeitung in Node.js. Das Projekt hat aktuell 18.000 Sterne auf GitHub und ist erwähnenswert, da es zu den beliebtesten verfügbaren HTTP-Bibliotheken zählt.
Syntax
var request = require('request');
request('http://www.yourdomain.com', function (error, response, body) {
console.log('error:', error);
console.log('statusCode:', response && response.statusCode);
console.log('body:', body);
});6. Superagent
SuperAgent ist eine schlanke und fortschrittliche AJAX-Bibliothek, die sich durch Lesbarkeit und Flexibilität auszeichnet. Im Gegensatz zu anderen Bibliotheken ist SuperAgent leicht zu erlernen. SuperAgent verfügt über ein Anfrageobjekt, das Methoden wie GET, POST, PUT, DELETE und HEAD akzeptiert.
SuperAgent-Vorteile
- Es verfügt über eine Plugin-basierte Umgebung und ein Ökosystem, in dem Erweiterungen für zusätzliche Funktionalitäten erstellt und entwickelt werden können.
- Leicht einstellbar
- Schöne Benutzeroberfläche für HTTP-Anfragen.
- Mehrere verkettbare Funktionen zum Senden von Anfragen.
- Es sollte den Upload- und Download-Fortschritt unterstützen.
- Es bietet Unterstützung für fragmentierte Transportverschlüsselung.
- Anrufe im alten Stil werden unterstützt.
- Für viele gängige Funktionen stehen zahlreiche Plugins zur Verfügung.
Stelle eine GET-Anfrage
request
.get('/user')
.query({ id: 1 })
.then(res => {
});Beitragsanfrage stellen
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"Ipseeta","id":1}')
.then(callback)
.catch(errorCallback)Ergebnis
Die Wahl hängt von Ihrem Projekt, dessen Umfang, der Zielgruppe und der angestrebten Akzeptanz ab. Es gibt keine richtige oder falsche Entscheidung. Wenn Sie die falsche Bibliothek für die falschen Anforderungen wählen, lässt sich diese Frage möglicherweise beantworten. Wählen Sie das richtige Werkzeug für die jeweilige Aufgabe.
