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

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?

• 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.

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.

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.

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.

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.

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.