Différence entre $ .ajax () et $ .get () et $ .load ()

Quelle est la différence entre $.ajax() et $.get() et $.load() ?

Quel est le meilleur usage et dans quelles conditions?

$.ajax() est le plus configurable, avec un contrôle précis sur les en-têtes HTTP et autres. Vous pouvez également accéder directement à l’object XHR en utilisant cette méthode. Un traitement des erreurs légèrement plus fin est également fourni. Peut donc être plus compliqué et souvent inutile, mais parfois très utile. Vous devez gérer les données renvoyées vous-même avec un rappel.

$.get() est juste un raccourci pour $.ajax() mais résume certaines des configurations, en définissant des valeurs par défaut raisonnables pour ce qu’il vous cache. Renvoie les données à un rappel. Il n’autorise que les requêtes GET, donc il est accompagné de la fonction $.post() pour une abstraction similaire, uniquement pour POST

.load() est similaire à $.get() mais ajoute des fonctionnalités qui vous permettent de définir où dans le document les données renvoyées doivent être insérées. Par conséquent, vraiment seulement utilisable lorsque l’appel ne produira que du HTML. Il est appelé légèrement différemment des autres appels, globaux, car il s’agit d’une méthode liée à un élément DOM particulier jQuery. Donc, on ferait: $('#divWantingContent').load(...)

Il convient de noter que tous les $.get() , $.post() , .load() sont que des wrappers pour $.ajax() car ils sont appelés en interne.

Plus de détails dans la documentation Ajax de jQuery: http://api.jquery.com/category/ajax/

Les méthodes fournissent différentes couches d’abstraction.

  • $.ajax() vous donne un contrôle total sur la requête Ajax. Vous devriez l’utiliser si les autres méthodes ne répondent pas à vos besoins.

  • $.get() exécute une requête Ajax GET . Les données renvoyées (qui peuvent être des données) seront transmises à votre gestionnaire de rappel.

  • $(selector).load() exécute une requête Ajax GET et définit le contenu des données retournées sélectionnées (qui doivent être du texte ou du HTML).

Cela dépend de la situation et de la méthode à utiliser. Si vous voulez faire des choses simples, vous n’avez pas besoin de vous soucier de $.ajax() .

Par exemple, vous n’utiliserez pas $.load() si les données renvoyées seront JSON et devront être traitées ultérieurement. Ici, vous utiliseriez soit $.ajax() ou $.get() .

http://api.jquery.com/jQuery.ajax/

jQuery.ajax()

Description: Effectuez une requête HTTP asynchrone (Ajax).

La version complète, vous permet de faire toute sorte de requête Ajax.


http://api.jquery.com/jQuery.get/

jQuery.get()

Description: Chargez les données du serveur en utilisant une requête HTTP GET.

Seul vous permet de faire des requêtes HTTP GET, nécessite un peu moins de configuration.


http://api.jquery.com/load/

.load()

Description: Chargez les données du serveur et placez le code HTML renvoyé dans l’élément correspondant.

Spécialisé pour obtenir des données et les injecter dans un élément.

Très basique mais

  • $.load() : Chargez un morceau de HTML dans un conteneur DOM.
  • $.get() : Utilisez cette $.get() si vous souhaitez effectuer un appel GET et jouer de manière intensive avec la réponse.
  • $.post() : Utilisez cette option si vous souhaitez effectuer un appel POST et ne souhaitez pas charger la réponse dans certains DOM DOM.
  • $.ajax() : Utilisez cette $.ajax() si vous devez faire quelque chose lorsque XHR échoue ou si vous devez spécifier des options ajax (par exemple, cache: true) à la volée.

Remarque importante: la méthode jQuery.load () permet non seulement d’obtenir des requêtes GET, mais aussi des requêtes POST , si le paramètre data est fourni (voir: http://api.jquery.com/load/ )

data Type: PlainObject ou Ssortingng Objet brut ou chaîne envoyé au serveur avec la requête.

Méthode de requête La méthode POST est utilisée si des données sont fournies en tant qu’object; sinon, GET est supposé.

 Example: pass arrays of data to the server (POST request) $( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } ); 

Tout le monde a raison. Les fonctions .load , .get et .post sont des manières différentes d’utiliser la fonction .ajax .

Personnellement, je trouve la fonction brute .ajax très déroutante et je préfère utiliser load, get ou post au besoin.

POST a la structure suivante:

 $.post(target, post_data, function(response) { }); 

GET a ce qui suit:

 $.get(target, post_data, function(response) { }); 

LOAD a ce qui suit:

 $(*selector*).load(target, post_data, function(response) { }); 

Comme vous pouvez le voir, il y a peu de différences entre eux, car c’est la situation qui détermine laquelle utiliser. Besoin d’envoyer l’information à un fichier en interne? Utilisez .post (ce serait la plupart des cas). Besoin d’envoyer les informations de manière à ce que vous puissiez fournir un lien vers le moment précis? Utilisez .get. Les deux permettent un rappel où vous pouvez gérer la réponse des fichiers.

Une note importante est que .load agit de deux manières différentes. Si vous ne fournissez que l’url du document cible, il agira comme un get (et je dis agir car j’ai testé la vérification de $_POST dans le PHP appelé en utilisant le comportement par défaut .load et il détecte $_POST , pas $_GET ; il serait plus précis de dire qu’il agit comme .post sans aucun argument); Cependant, comme le dit http://api.jquery.com/load/ , une fois que vous fournissez un tableau d’arguments à la fonction, cela affichera les informations dans le fichier. Quel que soit le cas, la fonction .load insère directement les informations dans un élément DOM, ce qui, dans BEAUCOUP cas, est très lisible et très direct; mais fournit toujours un rappel si vous voulez faire quelque chose de plus avec la réponse. De plus, .load vous permet d’extraire un certain bloc de code d’un fichier, ce qui vous permet d’enregistrer un catalogue, par exemple dans un fichier html, et d’en extraire des éléments directement dans des éléments DOM.

 $.get = $.ajax({type: 'GET'}); 

$.load() est une fonction d’assistance qui peut uniquement être appelée sur des éléments.

$.ajax() vous donne le plus de contrôle. vous pouvez spécifier si vous voulez poster des données, obtenir plus de rappels, etc.

Tout le monde a très bien expliqué le sujet. Il y a un autre point que j’aimerais append à propos de la méthode .load ().

Comme pour le document Load, si vous ajoutez un sélecteur avec suffixe dans l’URL de données, il n’exécutera pas les scripts lors du chargement du contenu.

Plunker de travail

  $(document).ready(function(){ $("#secondPage").load("mySecondHtmlPage.html #content"); }) 

En revanche, après la suppression du sélecteur dans l’URL, les scripts du nouveau contenu seront exécutés. Essayez cet exemple

après avoir enlevé #content dans l’URL dans le fichier index.html

  $(document).ready(function(){ $("#secondPage").load("mySecondHtmlPage.html"); }) 

Il n’existe aucune fonctionnalité intégrée de ce type fournie par d’autres méthodes en discussion.

Les deux sont utilisés pour envoyer des données et recevoir des réponses en utilisant ces données.

GET : récupère les informations stockées sur le serveur. (c.-à-d. recherche, tweet, informations sur la personne). Si vous voulez envoyer des informations, obtenez la requête d’envoi en utilisant process.php?name=subroto L’URL ne peut pas gérer plus de 2036 caractères. Alors, pour blog, pouvez-vous vous rappeler que ce n’est pas possible?

POST : Post fait la même chose que GET. Enregistrement de l’utilisateur, connexion de l’utilisateur, envoi de Big Data, blog post. Si vous devez envoyer des informations sécurisées, utilisez post ou pour le big data car il ne passe pas par l’URL.

AJAX : $.get() et $.post() contiennent des entités qui sont des sous-ensembles de $.ajax() . Il a plus de configuration.

$.get () , qui est une sorte de raccourci pour $.ajax() . Lorsque vous utilisez $.get () , au lieu de passer un object, vous passez des arguments. Au minimum, vous aurez besoin des deux premiers arguments, à savoir l’URL du fichier que vous souhaitez récupérer (par exemple, test.txt) et un rappel réussi.