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

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?

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

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.

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.

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.

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.

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.