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

121

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

jquery ajax xmlhttprequest

— Rodrigues
quelle

4

In Bezug auf die Leistung (kaum beantwortet): Laut jsperf ist die Verwendung des regulären XMLHttpRequest viel schneller als das Durchlaufen von jQuery.

— e2-e4

145

XMLHttpRequest ist das unformatierte Browserobjekt, das jQuery in eine benutzerfreundlichere und vereinfachte Form einbindet und browserübergreifende Funktionen bietet.
jQuery.ajax ist ein allgemeiner Ajax-Anforderer in jQuery, der alle Typ- und Inhaltsanforderungen ausführen kann.
jQuery.getund jQuery.postauf der anderen Seite kann nur GET und POST - Anfragen ausgeben. Wenn Sie nicht wissen, was dies sind, sollten Sie das HTTP-Protokoll überprüfen und ein wenig lernen. Intern werden diese beiden Funktionen verwendet jQuery.ajax, sie verwenden jedoch bestimmte Einstellungen, die Sie nicht selbst vornehmen müssen, wodurch die GET- oder POST-Anforderung im Vergleich zur Verwendung vereinfacht wird jQuery.ajax. GET und POST sind ohnehin die am häufigsten verwendeten HTTP-Methoden (im Vergleich zu DELETE, PUT, HEAD oder sogar anderen selten verwendeten Exoten).

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

Verwendung

Wenn Sie also jQuery verwenden, empfehle ich dringend, nur die jQuery-Funktionalität zu verwenden . Vergiss XMLHttpRequestalles zusammen. Verwenden Sie geeignete Variationen der jQuery-Anforderungsfunktion und in allen anderen Fällen $.ajax(). Also vergessen Sie nicht , es gibt auch andere gemeinsame jQuery Ajax verwandte Funktionen zu $.get(), $.post()und $.ajax(). Nun, Sie können nur $.ajax()für alle Ihre Anfragen verwenden, aber Sie müssen etwas mehr Code schreiben, da es etwas mehr Optionen benötigt, um ihn aufzurufen.

Analogie

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

— Robert Koritnik
quelle

Gibt es einen Vorteil bei der Verwendung von $ .ajax () in Bezug auf die Leistung?

— Rodrigues

1

@Rodrigues: nicht wirklich. Wenn Sie daran denken $.postund $.getdas einzige, was langsamer ist, ist eine kleine Menge Code, bevor er $.ajaxaufgerufen wird. Wenn Sie jedoch Ihre eigenen Routinen direkt mit XHR schreiben würden, könnten die Dinge etwas optimiert, aber fehlerhafter sein. Ich schlage vor, Sie bleiben auf der jQuery-Seite. Es wird dir das Leben leichter machen. Und wenn man bedenkt, dass ein asynchroner Anruf viel länger dauert als der Code, der ihn ausgibt, werden Sie wahrscheinlich keinen offensichtlichen Unterschied zwischen diesen Anrufen bemerken.

— Robert Koritnik

Danke Robert Koritnik. Also werde ich mit $ .post und $ .get kommen.

— Rodrigues

Sie können $.ajaxIhre Anrufe auch überall konsistent machen, wenn Sie möchten. Solange Sie XHR nicht direkt verwenden, können Sie es so oder so tun.

— Robert Koritnik

1

@RobertKoritnik Was ist mit dem Caching-Problem im IE? Ist es dasselbe, wenn XMLHttpRequest und $ .ajax () verwendet werden?

— Bhargavi Gunda

28

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

$ .post und $ .get sind nur Kurzversionen von $.ajax. Sie machen so ziemlich das Gleiche, machen es jedoch schneller, eine AJAX-Anfrage zu schreiben - sie $.postmachen eine HTTP-POST-Anfrage und $.getmachen eine HTTP-GET-Anfrage.

— Jonathon Bolster
quelle

Was ist mit dem Datenübertragungslimit jeder Funktion zum Hoch- und Herunterladen

— Rodrigues

Eine GETAnfrage sendet alle Daten in der URL-Zeichenfolge, die durch Client / Server begrenzt werden kann ( stackoverflow.com/questions/2659952/… ). Eine POSTAnfrage sendet alle Daten in den Headern, sodass die Beschränkung der URL-Größe kein Problem darstellen sollte (es sei denn, Sie haben wirklich lange Datei- und Ordnernamen in Ihrem Skript!).

— Jonathon Bolster

OK. Kurz gesagt, du meinst, mehr Daten zu senden und mehr Daten zu erhalten, oder?

— Rodrigues

@Rodrigues - Yup, so ziemlich :) Im Allgemeinen, wenn Sie nur etwas lesen möchten (z. B. eine Anfrage, um eine Liste von Tweets von Twitter zu erhalten) GET. Wenn Sie etwas senden möchten (z. B. einen Tweet veröffentlichen) POST, verwenden Sie

— Jonathon Bolster

7

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

XMLHttpRequest und Fetch API (derzeit experimentell) sind die einzigen in DOM und sollten daher die schnellsten sein.

Ich habe viele Informationen gesehen, die nicht mehr korrekt sind, deshalb habe ich eine Testseite erstellt, auf der jeder die Version von der 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 mich auf Mobilgeräten oder Desktops zeigen, dass jQuery mindestens 80% langsamer ist als XHR2, wenn Sie zu viel Ajax verwenden. In Mobilgeräten wird das Laden einer einfachen Site viel Zeit in Anspruch nehmen.

Die Nutzung selbst ist auch im Link.

— Sirius
quelle

2

jQuery.post und jQuery.get simulieren typische Seitenladevorgänge. Das heißt, Sie klicken auf eine Senden-Schaltfläche und gelangen auf eine neue Seite (oder laden dieselbe Seite neu). post und get unterscheiden sich geringfügig in der Art und Weise, wie die Daten an den Server gesendet werden (ein guter Artikel dazu finden Sie hier .

jQuery.ajax und XMLHttpRequest sind Seitenladevorgänge ähnlich wie beim Posten und Abrufen, außer dass sich die Seite nicht ändert. Unabhängig davon, welche Informationen der Server zurückgibt, kann Javascript lokal verwendet werden, um auf irgendeine Weise verwendet zu werden, einschließlich der Änderung des Seitenlayouts. Sie werden normalerweise für asynchrone Arbeiten verwendet, während der Benutzer noch auf der Seite navigieren kann. Ein gutes Beispiel hierfür wären Funktionen zur automatischen Vervollständigung durch dynamisches Laden von Werten 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 den gleichen Effekt zu erzielen, jedoch mit einer einfacheren Oberfläche. Wenn Sie jQuery verwenden, würde ich Sie ermutigen, bei jQuery.ajax zu bleiben.

— Neil
quelle

Was ist der Vorteil der Verwendung von jquery gegenüber der Erstellung eines XMLHttpRequest-Objekts xmlhttp.open, send () und responseText?

— Rodrigues

Das XMLHttpRequest-Objekt wird zum einen je nach aktuellem Browser unterschiedlich instanziiert. Es würde erfordern, dass Sie ein wenig Javascript-Wartung mit sich herumschleppen, um eine grundlegende Schnittstelle mit XMLHttpRequest bereitzustellen. Wenn Sie bereits über jQuery verfügen, erledigt dies alles für Sie. Es ist wirklich eine Frage der Bequemlichkeit, nicht der Funktionalität, da Sie mit beiden technisch das Gleiche tun können. Ganz zu schweigen davon, dass jQuery das XMLHttpRequest-Objekt umschließt und es Ihnen zur Verfügung stellt, falls Sie etwas Besonderes damit tun möchten.

— Neil

ok .. Danke Neil für deinen Vorschlag ... gibt es eine IDE wie Visual Studio für die Verwendung und das Debuggen von JQuery mit PHP oder Aspx?

— Rodrigues

Es ist schwierig, eine IDE zu finden, mit der Sie sowohl Javascript als auch PHP oder Aspx debuggen können, einfach weil eine serverseitig und die andere clientseitig ist. Dies bedeutet, dass Sie das Javascript leider separat debuggen müssen. Ich habe jedoch festgestellt, dass Firebug ( getfirebug.com ) hervorragend zum Debuggen von Javascript im Allgemeinen geeignet ist. Setzen Sie einen Haltepunkt in die Rückruffunktion und er zeigt Ihnen alles, was Sie vom Server erhalten, und Schritt für Schritt alles, was Ihr Javascript damit macht. Hoffentlich hilft das.

— Neil

1

Alter Beitrag. aber ich möchte immer noch antworten, ein Unterschied, dem ich bei der Arbeit mit Web Workers begegnet bin (Javascript)

Web-Worker können keinen Zugriff auf UI-Ebene haben. Das bedeutet, dass Sie auf keine DOM-Elemente im JavaScript-Code zugreifen können, die Sie mit Web Workern ausführen möchten. Auf Objekte wie Fenster, Dokument und übergeordnetes Element kann im Web Worker-Code nicht zugegriffen werden.

Wie wir wissen, ist die jQuery- Bibliothek an das HTML-DOM gebunden, und das Zulassen würde gegen die Regel "Kein DOM-Zugriff" verstoßen. Dies kann etwas schmerzhaft sein, da Methoden wie jQuery.ajax, jQuery.post und jQuery.get in Web- Workern nicht verwendet werden können. Glücklicherweise können Sie das XMLHttpRequest- Objekt verwenden, um Ajax-Anforderungen zu stellen.

— Mannan Bahelim
quelle

0

Was die jQuery-Methoden angeht .postund dies .geteinfach .ajaxintern tut , besteht ihr Zweck darin, einige der unnötigen Optionen zu abstrahieren .ajaxund einige Standardeinstellungen bereitzustellen, die für diese Art von Anforderung geeignet sind.

Ich bezweifle, dass es einen großen Leistungsunterschied zwischen den drei gibt.

Die .ajaxMethode selbst führt eine XMLHttpRequest durch. Sie wird gemäß dem Rest von jQuery stark optimiert, ist aber wahrscheinlich nicht so effizient, als ob Sie die gesamte Interaktion selbst angepasst hätten. Aber das ist der Unterschied zwischen dem Schreiben von viel Code oder Schreiben jQuery.ajax.

— Steve
quelle

Gibt es einen Vorteil beim Anpassen von jQuery.ajax

— Rodrigues

Ich gehe davon aus, dass Sie damit die Verwendung der Kurzschriftmethoden meinen. Nach meiner Erfahrung sind die Kurzformmethoden nützlich, wenn die meisten Standardeinstellungen Ihren Wünschen entsprechen und Sie sehr genau wissen müssen, wie Sie die benötigten Daten erhalten. Ajax ist normalerweise der richtige Weg.

— Steve

Danke Steve. werde post benutzen und bekommen. Wenn Sie einige Beispiele für .ajax geben, kann ich einen Vergleich anstellen.

— Rodrigues