Quelle est la différence entre XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get

121

Comment puis-je savoir quelle méthode convient le mieux à une situation? Quelqu'un peut-il donner des exemples pour connaître la différence en termes de fonctionnalités et de performances?

jquery ajax xmlhttprequest

— Rodrigues
source

4

Concernant les performances (à peine répondu): selon jsperf, l' utilisation du XMLHttpRequest standard est beaucoup plus rapide que de passer par jQuery.

— e2-e4

145

XMLHttpRequest est l'objet de navigateur brut que jQuery enveloppe dans une forme plus utilisable et simplifiée et une fonctionnalité cohérente entre les navigateurs.
jQuery.ajax est un demandeur Ajax général dans jQuery qui peut faire toutes les demandes de type et de contenu.
jQuery.getet jQuery.postd'autre part ne peut émettre que des requêtes GET et POST. Si vous ne savez pas ce que c'est, vous devriez vérifier le protocole HTTP et en apprendre un peu. En interne, ces deux fonctions utilisent jQuery.ajaxmais elles utilisent des paramètres particuliers que vous n'avez pas à définir vous-même, simplifiant ainsi la requête GET ou POST par rapport à l'utilisation jQuery.ajax. GET et POST étant de toute façon les méthodes HTTP les plus utilisées (par rapport à DELETE, PUT, HEAD ou même d'autres exotiques rarement utilisés).

Toutes les fonctions jQuery utilisent un XMLHttpRequestobjet en arrière-plan, mais fournissent des fonctionnalités supplémentaires que vous n'avez pas à faire vous-même.

Usage

Donc, si vous utilisez jQuery, je vous recommande fortement d'utiliser uniquement la fonctionnalité jQuery . Oubliez XMLHttpRequestcomplètement. Utilisez des variantes de fonction de requête jQuery appropriées et dans tous les autres cas, utilisez $.ajax(). N'oubliez donc pas qu'il existe d'autres fonctions courantes liées à jQuery Ajax$.get() , $.post()et $.ajax(). Eh bien, vous pouvez simplement l'utiliser $.ajax()pour toutes vos requêtes, mais vous devrez écrire un peu plus de code, car il faut un peu plus d'options pour l'appeler.

Analogie

C'est comme si vous pouviez vous acheter un moteur de voiture qu'il faudrait créer une voiture entière autour d'elle avec direction, freins etc ... Les constructeurs automobiles produisent des voitures complètes, avec une interface conviviale (pédales, volant, etc.) vous n'avez donc pas à tout faire vous-même.

— Robert Koritnik
source

y a-t-il un avantage à utiliser $ .ajax () en termes de performances?

— Rodrigues

1

@Rodrigues: pas vraiment. Si vous pensez $.postet $.getla seule chose plus lente est une petite quantité de code avant d' $.ajaxêtre appelée. Mais si vous écrivez vos propres routines en utilisant directement XHR, les choses pourraient être un peu optimisées mais pourraient être plus boguées. Je vous suggère de rester du côté de jQuery. Cela facilitera votre vie. Et compte tenu du fait que l'appel asynchrone prend beaucoup plus de temps que le code qui l'émet, vous ne remarquerez probablement aucune différence évidente entre ces appels.

— Robert Koritnik

Merci Robert Koritnik. donc je vais avoir avec $ .post et $ .get.

— Rodrigues le

Vous pouvez aussi opter $.ajaxpour rendre vos appels cohérents partout si vous le souhaitez. Tant que vous n'utilisez pas directement XHR, vous pouvez le faire de toute façon.

— Robert Koritnik le

1

@RobertKoritnik qu'en est-il du problème de mise en cache dans IE? Est-ce la même chose en utilisant XMLHttpRequest et $ .ajax ()?

— Bhargavi Gunda

28

Chacun d'eux utilise XMLHttpRequest. C'est ce que le navigateur utilise pour faire la demande. jQuery est juste une bibliothèque JavaScript et la méthode $ .ajax est utilisée pour créer une XMLHttpRequest.

$ .post et $ .get ne sont que des versions abrégées de $.ajax. Ils font à peu près la même chose mais rendent plus rapide l'écriture d'une requête AJAX - $.postfait une requête HTTP POST et $.getfait une requête HTTP GET.

— Jonathon Bolster
source

qu'en est-il de la limite de transfert de données de chaque fonction pour le téléchargement et le téléchargement

— Rodrigues

Une GETrequête enverra toutes les données dans la chaîne URL - qui peut être limitée par le client / serveur ( stackoverflow.com/questions/2659952/… ). Une POSTrequête envoie toutes les données dans les en-têtes, donc la limite de taille de l'URL ne devrait pas être un problème (sauf si vous avez des noms de fichiers et de dossiers très longs dans votre script!).

— Jonathon Bolster

D'accord. Donc, en bref, vous voulez dire, pour envoyer plus de messages d'utilisation de données et pour recevoir plus d'utilisation de données, non?

— Rodrigues le

@Rodrigues - Ouais, à peu près :) En général, si vous cherchez juste à lire quelque chose (par exemple une demande pour obtenir une liste de tweets de Twitter), utilisez GET. Si vous cherchez à envoyer quelque chose (par exemple, publier un tweet) POST, utilisez ,

— Jonathon Bolster

7

jQuery.getest un wrapper pour jQuery.ajax, qui est un wrapper pour XMLHttpRequest.

XMLHttpRequest et Fetch API (expérimentales pour le moment) sont les seules dans DOM, elles devraient donc être les plus rapides.

J'ai vu beaucoup d'informations qui ne sont plus exactes, j'ai donc créé une page de test où tout le monde peut tester la version à partir de la version qui est la meilleure à tout moment:

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

De mes tests d'aujourd'hui montrent que seul jQuery n'est pas une solution propre ou même rapide, les résultats pour moi dans le mobile ou le bureau montrent que jQuery est au moins 80% plus lent que XHR2, si vous utilisez trop d'ajax, en mobile, il faudra beaucoup de temps pour charger un site simple.

L'utilisation elle-même est également dans le lien.

— Sirius
source

2

jQuery.post et jQuery.get simulent des chargements de page typiques, c'est-à-dire que vous cliquez sur un bouton d'envoi et que cela vous amène à une nouvelle page (ou recharge la même page). post et obtenir diffèrent légèrement dans la manière dont les données sont envoyées au serveur (un bon article à ce sujet peut être trouvé ici .

jQuery.ajax et XMLHttpRequest sont des chargements de page similaires à post et get, sauf que la page ne change pas. Quelles que soient les informations renvoyées par le serveur, javascript peut être utilisé localement de quelque manière que ce soit, y compris en modifiant la mise en page. Ils sont normalement utilisés pour effectuer un travail asynchrone pendant que l'utilisateur peut toujours naviguer sur la page. Un bon exemple de ceci serait les capacités de saisie semi-automatique en chargeant dynamiquement à partir d'une base de données les valeurs pour compléter un champ de texte. La différence fondamentale entre jQuery.ajax et XMLHttpRequest est que jQuery.ajax utilise XMLHttpRequest pour obtenir le même effet mais avec une interface plus simple. Si vous utilisez jQuery, je vous encourage à vous en tenir à jQuery.ajax.

— Neil
source

quel est l'avantage d'utiliser jquery par rapport à la création d'un objet XMLHttpRequest xmlhttp.open, send () et responseText.

— Rodrigues

L'objet XMLHttpRequest est instancié différemment selon votre navigateur actuel pour une chose. Il faudrait que vous traîniez un peu de maintenance javascript pour fournir une interface de base à l'aide de XMLHttpRequest. Si vous avez déjà jQuery, il fait tout pour vous. C'est vraiment une question de commodité, pas de fonctionnalité puisque vous pouvez techniquement faire la même chose avec l'un ou l'autre. Sans oublier que puisque jQuery enveloppe l'objet XMLHttpRequest, cela signifie qu'il vous le fournit au cas où vous voudriez faire quelque chose de particulier avec lui.

— Neil

ok .. Merci Neil pour votre suggestion ... y a-t-il un IDE comme Visual Studio disponible pour utiliser et déboguer jquery avec php ou aspx.

— Rodrigues le

Il est difficile de trouver un IDE qui vous permet de déboguer à la fois javascript et php ou aspx simplement parce que l'un est côté serveur tandis que l'autre est côté client. Cela signifie que malheureusement, vous devez déboguer le javascript séparément. Cependant, j'ai trouvé que firebug ( getfirebug.com ) est merveilleux pour le débogage de javascript en général. Placez un point d'arrêt dans la fonction de rappel et il vous montre tout ce que vous donne le serveur et étape par étape, tout ce que votre javascript en fait. J'espère que cela pourra aider.

— Neil

1

Ancien poste. mais je veux toujours répondre, une différence que j'ai rencontrée en travaillant avec des Web Workers (javascript)

Les web workers ne peuvent pas avoir d'accès au niveau de l'interface utilisateur. Cela signifie que vous ne pouvez accéder à aucun élément DOM dans le code JavaScript que vous prévoyez d'exécuter à l'aide de web workers.Objects tels que la fenêtre, le document et le parent ne sont pas accessibles dans le code web-worker.

Comme nous le savons, la bibliothèque jQuery est liée au DOM HTML, et l'autoriser violerait la règle «pas d'accès au DOM». Cela peut être un peu pénible car des méthodes telles que jQuery.ajax, jQuery.post, jQuery.get ne peuvent pas être utilisées dans les travailleurs Web. Heureusement, vous pouvez utiliser l' objet XMLHttpRequest pour effectuer des requêtes Ajax.

— Mannan Bahelim
source

0

En ce qui concerne les méthodes jQuery, .postet .getle font simplement en .ajaxinterne, leur but est de supprimer certaines des options inutiles de .ajaxet de fournir des valeurs par défaut appropriées à ce type de requête respectivement.

Je doute qu'il y ait une grande différence de performances entre l'un des 3.

La .ajaxméthode en elle-même fait une XMLHttpRequest, elle sera fortement optimisée comme pour le reste de jQuery, mais elle ne sera probablement pas aussi efficace que si vous adaptiez vous-même l'ensemble de l'interaction ... mais c'est la différence entre écrire beaucoup de code ou l'écriture jQuery.ajax.

— Steve
source

y a-t-il un avantage à personnaliser jQuery.ajax

— Rodrigues

Je suppose que vous entendez par là l'utiliser sur les méthodes abrégées, d'après mon expérience, je trouve que les méthodes abrégées sont utiles si la plupart des valeurs par défaut sont ce que vous voulez, si vous devez être très précis sur la façon d'obtenir les données dont vous avez besoin. ajax est généralement la voie à suivre.

— Steve

Merci Steve. utilisera post et obtiendra. si vous donnez quelques exemples de .ajax, je peux faire une comparaison.

— Rodrigues le