Quelle est la différence entre XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get
Comment savoir quelle méthode convient le mieux à une situation? Quelqu'un peut-il fournir des exemples pour connaître la différence en termes de fonctionnalité et de performance?
XMLHttpRequestest l'objet de navigateur brut que jQuery intègre dans un formulaire plus utilisable et simplifié, ainsi que dans des fonctionnalités cohérentes entre navigateurs.jQuery.ajaxest un demandeur Ajax général dans jQuery qui peut effectuer tous les types et demandes de contenu.jQuery.getetjQuery.postpeuvent uniquement émettre des requêtes GET et POST. Si vous ne savez pas ce que c'est, vous devriez vérifier protocole HTTP et en apprendre un peu. En interne, ces deux fonctions utilisentjQuery.ajax, mais elles utilisent des paramètres particuliers que vous n'avez pas à définir vous-même, simplifiant ainsi la demande GET ou POST par rapport à l'utilisation dejQuery.ajax. GET et POST étant de toute façon les méthodes HTTP les plus utilisées (comparées à DELETE, PUT, HEAD ou même à d'autres méthodes exotiques rarement utilisées).
Toutes les fonctions jQuery utilisent l'objet XMLHttpRequest en arrière-plan, mais fournissent des fonctionnalités supplémentaires que vous n'avez pas à créer vous-même.
Usage
Donc, si vous utilisez jQuery, je vous recommande fortement d'utiliser la fonctionnalité jQuery only. Oubliez XMLHttpRequest tout à fait. Utilisez les 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 communes liées à jQuery Ajax à $.get(), $.post() et $.ajax(). Eh bien, vous pouvez simplement utiliser $.ajax() pour l’ensemble de votre requête, 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 et créer une voiture entière avec direction, freins, etc. Les constructeurs automobiles produisent des voitures complètes, avec une interface conviviale (pédales, volant, etc.). afin que vous n'ayez pas à tout faire vous-même.
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 méthode $ .ajax est utilisée pour créer un XMLHttpRequest.
$ .post et $ .get ne sont que des versions abrégées de $.ajax. Ils font à peu près la même chose mais accélèrent la rédaction d’une demande AJAX - $.post crée une demande HTTP POST et $.get effectue une demande HTTP GET.
jQuery.get est un wrapper pour jQuery.ajax, qui est un wrapper pour XMLHttpRequest.
Les API XMLHttpRequest et Fetch (expérimentales pour le moment) sont les seules dans le DOM, elles devraient donc être les plus rapides.
J'ai vu beaucoup d'informations qui ne sont plus exactes, alors j'ai créé une page de test où tout le monde peut tester une version de la version qui convient le mieux à tout moment:
https://jsperf.com/xhr-vs-jquery-ajax-vs-get-vs-fetch
D'après mes tests réalisés aujourd'hui, seul jQuery n'est pas une solution propre, ni rapide, les résultats obtenus pour moi sur un ordinateur de bureau ou mobile indiquent qu'il est au moins 80% plus lent que XHR2, si vous utilisez trop d'ajax dans le mobile, il faudra beaucoup de temps pour charger un site simple.
L'utilisation elle-même est dans le lien aussi.
Ancien post. mais je veux quand même répondre, une différence à laquelle j'ai été confronté lorsque je travaillais avec Web Workers (javascript)
les travailleurs Web ne peuvent avoir aucun accès de niveau interface utilisateur. Cela signifie que vous ne pouvez pas accéder aux éléments DOM Du code JavaScript que vous avez l'intention d'utiliser à l'aide de travailleurs Web. Les objets tels que window, document et parent ne sont pas accessibles dans le code de travailleur Web.
Comme nous le savons, jQuery library est lié au DOM HTML, ce qui violerait la règle «aucun accès 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 faire des requêtes Ajax.
jQuery.post et jQuery.get simulent des chargements de page typiques, c’est-à-dire que vous cliquez sur un bouton d’envoi et vous amène à une nouvelle page (ou 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 (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, y compris pour modifier 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 complétion automatique en chargeant dynamiquement à partir d'une base de données 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 à rester avec jQuery.ajax.
En ce qui concerne les méthodes jQuery, .post et .get font simplement .ajax en interne, leur but est de supprimer certaines des options inutiles de .ajax et de fournir des valeurs par défaut appropriées à ce type de requête.
Je doute qu'il y ait beaucoup de différence de performance entre les 3.
La méthode .ajax en elle-même utilise XMLHttpRequest. Elle sera fortement optimisée conformément au reste de jQuery, mais elle ne sera probablement pas aussi efficace que si vous aviez personnalisé l'intégralité de l'interaction .. mais c'est la différence entre écrire beaucoup de code ou en écrivant jQuery.ajax.