it-swarm.com.de

Was ist der Unterschied zwischen XMLHttpRequest, jQuery.ajax, jQuery.post und jQuery.get?

Wie kann ich herausfinden, welche Methode für eine Situation am besten ist? Kann jemand einige Beispiele geben, um den Unterschied in Bezug auf Funktionalität und Leistung zu erkennen?

106
Rodrigues
  • XMLHttpRequest ist das unformatierte Browserobjekt, das von jQuery in ein benutzerfreundlicheres und vereinfachtes Formular und eine browserübergreifende konsistente Funktionalität eingebunden wird.

  • jQuery.ajax ist ein allgemeiner Ajax-Anforderer in jQuery, der alle Typ- und Inhaltsanfragen erledigen kann.

  • Andererseits können jQuery.get und jQuery.post nur GET- und POST -Anfragen ausgeben. Wenn Sie nicht wissen, was diese sind, sollten Sie HTTP-Protokoll überprüfen und ein wenig lernen. Intern verwenden diese beiden Funktionen jQuery.ajax, aber sie verwenden bestimmte Einstellungen, die Sie nicht selbst festlegen müssen, wodurch die Anforderung GET oder POST im Vergleich zur Verwendung von jQuery.ajax vereinfacht wird. GET und POST sind ohnehin die am häufigsten verwendeten HTTP-Methoden (verglichen mit DELETE, PUT, HEAD oder sogar anderen selten verwendeten Exoten).

Alle jQuery-Funktionen verwenden XMLHttpRequest-Objekte im Hintergrund, bieten jedoch zusätzliche Funktionen, die Sie nicht selbst ausführen müssen.

Verwendungszweck

Wenn Sie also jQuery verwenden, wird dringend empfohlen, die jQuery-Funktionalität only zu verwenden. Vergessen Sie XMLHttpRequest ganz. Verwenden Sie geeignete Varianten der jQuery-Anforderungsfunktion und in allen anderen Fällen $.ajax(). Vergessen Sie also nicht, dass es andere allgemeine, mit jQuery Ajax zusammenhängende Funktionen gibt zu $.get(), $.post() und $.ajax(). Nun, Sie können einfach $.ajax() für alle Ihre Anforderungen verwenden, müssen jedoch etwas mehr Code schreiben, da er etwas mehr Optionen benötigt, um ihn aufzurufen.

Analogie

Es ist, als ob Sie sich einen Automotor kaufen könnten, den Sie mit Lenkung, Bremsen usw. um ein ganzes Auto herum konstruieren müssten. Autohersteller produzieren fertige Autos mit einer freundlichen Schnittstelle (Pedale, Lenkrad usw.). Sie müssen also nicht alles selbst machen.

126
Robert Koritnik

Jeder von ihnen verwendet XMLHttpRequest. Dies ist, was der Browser verwendet, um die Anfrage zu stellen. jQuery ist nur eine JavaScript-Bibliothek und die Methode $ .ajax wird verwendet, um ein XMLHttpRequest-Objekt zu erstellen.

$ .post und $ .get sind nur Kurzfassungen von $.ajax. Sie tun so ziemlich dasselbe, machen es aber schneller, eine AJAX - Anforderung zu schreiben - $.post stellt eine HTTP POST -Anforderung und $.get eine HTTP GET-Anforderung.

22

jQuery.get ist ein Wrapper für jQuery.ajax, der ein Wrapper für XMLHttpRequest ist.

XMLHttpRequest und Fetch API (zu diesem Zeitpunkt experimentell) sind die einzigen in DOM, sollten also die schnellste sein.

Ich habe eine Menge Informationen gesehen, die nicht mehr genau sind. Deshalb habe ich eine Testseite erstellt, auf der jeder die Version testen kann, die zu jeder Zeit die beste ist:

https://jsperf.com/xhr-vs-jquery-ajax-vs-get-vs-fetch

Aus meinen heutigen Tests geht hervor, dass nur jQuery keine saubere oder sogar schnelle Lösung ist. Die Ergebnisse für Mobile oder Desktop zeigen für mich, dass jQuery mindestens 80% langsamer ist als XHR2, wenn Sie zu viel Ajax verwenden. In Mobile wird es eine Weile dauern, eine einfache Site zu laden.

Die Verwendung selbst ist auch im Link.

4
Sirius

Alte Post Aber ich möchte immer noch antworten, ein Unterschied, dem ich bei der Arbeit mit Web Workers (javascript) gegenüberstand. 

web Worker können keinen Zugriff auf die Benutzeroberfläche haben. Das bedeutet, dass Sie im JavaScript-Code, den Sie mithilfe von Web-Workern ausführen möchten, nicht auf DOM-Elemente Zugreifen können. Objekte wie Fenster, Dokument und übergeordnete Elemente können nicht im Web-Worker-Code aufgerufen werden.

Wie wir wissen, ist jQuery library an das HTML-DOM gebunden, und wenn es zugelassen würde, verstößt es gegen die Regel "Kein DOM-Zugriff". Dies kann etwas schmerzhaft sein, da Methoden wie jQuery.ajax, jQuery.post, jQuery.get nicht in Web Workern verwendet werden können. Glücklicherweise können Sie mit dem XMLHttpRequest - Objekt Ajax-Anforderungen erstellen.

1
Mannan Bahelim

mit jQuery.post und jQuery.get werden typische Seitenladevorgänge simuliert, das heißt, Sie klicken auf eine Senden-Schaltfläche, und Sie gelangen zu einer neuen Seite (oder laden dieselbe Seite erneut). post und get unterscheiden sich leicht in der Art und Weise, in der die Daten an den Server gesendet werden (guten Artikel darüber finden Sie hier .

jQuery.ajax und XMLHttpRequest sind Seitenladungen ähnlich wie post und get, nur dass sich die Seite nicht ändert. Welche Informationen auch immer der Server zurückgibt, kann von Javascript lokal verwendet werden, um in irgendeiner Weise verwendet zu werden, einschließlich der Änderung des Seitenlayouts. Sie werden normalerweise für asynchrone Arbeit verwendet, während der Benutzer noch auf der Seite navigieren kann. Ein gutes Beispiel dafür sind Autocomplete-Funktionen durch dynamisches Laden aus einer Datenbank, um ein Textfeld zu vervollständigen. Der grundlegende Unterschied zwischen jQuery.ajax und XMLHttpRequest besteht darin, dass jQuery.ajax XMLHttpRequest verwendet, um denselben Effekt zu erzielen, jedoch mit einer einfacheren Schnittstelle. Wenn Sie jQuery verwenden, empfiehlt es sich, bei jQuery.ajax zu bleiben. 

1
Neil

Was die jQuery-Methoden angeht, verwenden .post und .get einfach intern .ajax. Sie dienen dazu, einige der unnötigen Optionen von .ajax wegzuwischen und einige für diesen Anfragetyp geeignete Standardwerte bereitzustellen.

Ich bezweifle, dass es einen sehr unterschiedlichen Leistungsunterschied zwischen den drei gibt.

Die .ajax-Methode selbst führt eine XMLHttpRequest-Methode aus. Sie ist stark optimiert wie der Rest von jQuery, aber sie wird wahrscheinlich nicht so effizient sein, als ob Sie die gesamte Interaktion selbst angepasst hätten oder schreiben jQuery.ajax.

0
Steve