136 votes

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

Comment puis-je savoir quelle méthode est la meilleure pour une situation donnée ? Quelqu'un peut-il fournir quelques exemples permettant de connaître la différence en termes de fonctionnalité et de performance ?

4 votes

En ce qui concerne les performances (à peine répondu) : selon jsperf en utilisant le XMLHttpRequest ordinaire est beaucoup plus rapide que de passer par jQuery.

0 votes

Y a-t-il des différences subtiles dans la façon dont les cookies sont gérés ? Pour la connexion, je veux utiliser Set-Cookie . Je constate que les cookies fonctionnent avec jQuery.ajax, mais pas lorsque j'utilise XmlHttpRequest avec xhr.withCredentials=true .

157voto

Robert Koritnik Points 45499
  • XMLHttpRequest est l'objet brut du navigateur que jQuery enveloppe dans une forme plus utilisable et simplifiée et une fonctionnalité cohérente entre les navigateurs.

  • jQuery.ajax est un requêteur Ajax général en jQuery qui peut faire n'importe quel type de requête et de contenu.

  • jQuery.get y jQuery.post d'autre part, ne peut émettre que des requêtes GET et POST. Si vous ne savez pas de quoi il s'agit, vous pouvez consulter le site suivant Protocole HTTP et apprendre un peu. En interne, ces deux fonctions utilisent jQuery.ajax mais ils utilisent des paramètres particuliers que vous n'avez pas à définir vous-même, ce qui simplifie les requêtes GET ou POST par rapport à l'utilisation de l'option 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ées).

Toutes les fonctions jQuery utilisent XMLHttpRequest en arrière-plan, mais fournissent une fonctionnalité supplémentaire que vous n'avez pas à faire vous-même.

Utilisation

Donc si vous utilisez jQuery, je vous recommande fortement d'utiliser la fonctionnalité jQuery. seulement . Oubliez XMLHttpRequest tout à fait. Utilisez des variantes appropriées de la fonction de requête jQuery et, dans tous les autres cas, utilisez $.ajax() . N'oubliez donc pas qu'il existe d'autres Fonctions communes de jQuery Ajax a $.get() , $.post() y $.ajax() . Vous pouvez simplement utiliser $.ajax() pour toutes vos demandes, mais vous devrez écrire un peu plus de code, car il a besoin d'un peu plus d'options pour l'appeler.

Analogie

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

0 votes

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

1 votes

@Rodrigues : pas vraiment. Si vous pensez à $.post y $.get la seule chose plus lente est une petite quantité de code avant $.ajax est appelé. Mais si vous écrivez vos propres routines en utilisant directement le XHR, les choses pourraient être un peu optimisées mais pourraient être plus buggées. Je vous suggère de rester du côté de jQuery. Cela vous facilitera la 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.

0 votes

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

31voto

Jonathon Bolster Points 8663

Chacun d'entre eux utilise XMLHttpRequest. C'est ce que le navigateur utilise pour faire la demande. jQuery est juste une bibliothèque JavaScript et la balise $.ajax est utilisée pour effectuer une requête XMLHttpRequest.

$.post y $.get ne sont que des versions abrégées de $.ajax . Ils font à peu près la même chose, mais permettent d'écrire plus rapidement une requête AJAX. $.post fait une demande HTTP POST et $.get fait une demande HTTP GET.

0 votes

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

0 votes

A GET enverra toutes les données contenues dans la chaîne URL - qui peut être limitée par le client/serveur ( stackoverflow.com/questions/2659952/ ). A POST 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 (à moins que vous n'ayez vraiment les longs noms de fichiers et de dossiers à votre script !).

0 votes

Ok. donc en bref tu veux dire, pour envoyer plus de données utiliser post et pour recevoir plus de données utiliser get, c'est ça ?

8voto

Sirius Points 345

jQuery.get est une enveloppe pour jQuery.ajax qui est une enveloppe pour XMLHttpRequest.

XMLHttpRequest et Fetch API (expérimental pour le moment) sont les seuls à être dans le DOM, donc devraient être les plus rapides.

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

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

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 montre que jQuery sont, au moins, 80% plus lent que XHR2, si vous utilisez trop d'ajax, dans le mobile il sera prendre beaucoup de temps pour charger un site simple.

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

2voto

Neil Points 3122

JQuery.post et jQuery.get simulent des chargements de pages typiques, c'est-à-dire que vous cliquez sur un bouton d'envoi et vous accédez à une nouvelle page (ou vous rechargez la même page). post et get 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. Les informations renvoyées par le serveur peuvent être utilisées localement par javascript pour être utilisées de n'importe quelle manière, y compris pour modifier la mise en page. Ils sont normalement utilisés pour effectuer un travail asynchrone pendant que l'utilisateur peut encore naviguer dans la page. Un bon exemple de ceci serait les capacités d'autocomplétion en chargeant dynamiquement depuis une base de données des 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.

0 votes

Quel est l'avantage d'utiliser jquery plutôt que de créer un objet XMLHttpRequest xmlhttp.open, send() et responseText.

0 votes

L'objet XMLHttpRequest est instancié différemment en fonction de votre navigateur actuel, entre autres. Il faudrait se trimballer un peu de maintenance javascript pour fournir une interface de base utilisant XMLHttpRequest. Si vous avez déjà jQuery, il fait tout cela 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 compter que puisque jQuery enveloppe l'objet XMLHttpRequest, cela signifie qu'il vous le fournit au cas où vous voudriez en faire quelque chose de particulier.

0 votes

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.

1voto

Mannan Bahelim Points 955

C'est un vieux poste, mais je veux quand même répondre à une différence à laquelle j'ai été confronté lorsque j'ai travaillé avec le système de gestion de l'eau. Travailleurs du Web (javascript)

les travailleurs web ne peuvent pas avoir d'accès au niveau de l'interface utilisateur. Cela signifie que vous ne pouvez pas accéder aux éléments DOM dans le code JavaScript que vous avez l'intention d'exécuter à l'aide des travailleurs Web. Les objets tels que window, document et parent ne sont pas accessibles dans le code du travailleur Web.

Comme nous le savons jQuery est liée au DOM du HTML, et l'autoriser violerait la règle "aucun accès au DOM". Cela peut être un peu pénible parce que des méthodes telles que jQuery.ajax, jQuery.post, jQuery.get ne peut pas être utilisé dans les travailleurs web. Heureusement, vous pouvez utiliser la fonction XMLHttpRequest pour effectuer des requêtes Ajax.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X