Points de base

• Abréviation jQuery La méthode AJAX fournit une méthode qui simplifie les appels AJAX, qui enveloppe la méthode $.ajax() à un usage spécifique à l'aide d'une configuration prédéfinie. Les méthodes discutées dans cet article incluent load(), $.post() et $.get().
La méthode
• load() permet de charger des données à partir du serveur et placées dans l'élément sélectionné. Il utilise des URL, des données facultatives et des fonctions de rappel facultatives. Cette méthode peut être utilisée pour charger le contenu principal d'une page Web de manière asynchrone.
La méthode
• $.post() est utilisée pour envoyer une demande de poste au serveur et envoyer des données dans le cadre du corps de la demande. Cette méthode est idéale pour les demandes qui peuvent entra?ner des modifications de l'état c?té serveur.
La méthode
• $.get() initie une demande GET au serveur, ce qui est idéal pour les situations où le serveur renvoie toujours le même résultat pour un ensemble de paramètres donné ou où l'utilisateur doit partager des ressources.

N'avez-vous jamais entendu parler du terme Ajax? Je parie que presque les mains de tout le monde sont posées, près de leur corps. Ajax (initialement signifie Asynchrone JavaScript et XML) est l'une des méthodes client les plus couramment utilisées qui contribuent à créer des sites Web et des applications Web asynchrones.

Bien s?r, vous pouvez utiliser JavaScript brut pour exécuter des appels AJAX, mais il peut être difficile de gérer toutes les différentes parties du code. Cela est particulièrement vrai si vous devez prendre en charge les anciens navigateurs comme Internet Explorer 6.

Heureusement, JQuery nous fournit un ensemble de fa?ons de faire face à ces problèmes, nous permettant de nous concentrer sur les taches que nous voulons accomplir avec notre code. JQuery fournit une méthode principale $.ajax() qui peut être fortement configurée pour répondre à l'un de vos besoins. Il fournit également un ensemble de méthodes d'abréviation appelées méthodes d'abréviation, car ce ne sont que des emballages de méthodes $.ajax() avec des configurations prédéfinies, chacune servant un seul objectif.

En dehors de la méthode $.ajax(), toutes les méthodes ont une chose en commun: elles ne fonctionnent pas sur un ensemble d'éléments DOM, mais sont appelés directement à partir d'un objet jQuery. Par conséquent, nous n'écrivons pas de déclarations comme ceci:

$('p').ajax(...);

Cela sélectionnera tous les paragraphes de la page, puis appellera la méthode ajax(), et écrivez à la place:

$.ajax(...);

Dans cet article, nous discuterons de trois méthodes d'abréviation JQuery les plus couramment utilisées: load(), $.post() et $.get().

LOAD ()

La première méthode dont nous discuterons est load(). Il nous permet de charger les données du serveur et de mettre les données renvoyées (généralement du code HTML) dans l'élément qui sélectionne la correspondance. Avant de l'utiliser, jetons un coup d'?il à sa signature:

load(url[, data][, callback])

La signification de chaque paramètre est la suivante:

• url: une cha?ne spécifiant l'URL de la ressource à laquelle vous souhaitez envoyer la demande;
• : une cha?ne facultative qui doit être une cha?ne de requête bien formée, ou un objet qui doit être passé comme paramètre de demande. Si une cha?ne est passée, la méthode de demande sera obtenue et si un objet est passé, la méthode de demande sera publiée. Si ce paramètre est omis, la méthode GET est utilisée; data
: Une fonction de rappel facultative appelée une fois la demande AJAX terminée. Cette fonction accepte jusqu'à trois paramètres: texte de réponse, cha?ne d'état demandée et instance JQXHR. à l'intérieur de la fonction de rappel, le contexte (ceci) est défini par un sur chaque élément de la collection.
• callback
Cela semble-t-il difficile à utiliser? Regardons un exemple spécifique.

Supposons que vous ayez un élément dans votre site Web avec l'ID Main, qui représente le contenu principal. Ce que nous voulons faire, c'est charger de manière asynchrone le contenu principal de la page référencée dans le lien dans le menu principal, idéalement, son identifiant est le menu principal. Nous voulons juste récupérer le contenu à l'intérieur de cet élément, car le reste de la disposition ne changera pas, ils ne doivent donc pas être chargés.

Cette approche est destinée à une amélioration car si les utilisateurs visitant le site Web ont un JavaScript désactivé, ils peuvent toujours parcourir le site Web en utilisant le mécanisme de synchronisation habituel. Nous voulons implémenter cette fonctionnalité car elle peut améliorer les performances du site Web. Dans cet exemple, nous supposons que tous les liens du menu sont des liens internes.

En utilisant les méthodes jQuery et

load()

$('p').ajax(...);

Pour résoudre ce problème, jQuery nous permet d'ajouter un sélecteur immédiatement après l'URL spécifié. En utilisant cette fonction de la méthode , nous pouvons réécrire le code précédent pour:

) parce que nous voulons éviter d'avoir des éléments #main à l'intérieur de l'élément #main; nous voulons seulement ce qui est à l'intérieur de #main, pas #main lui-même. load()

$.ajax(...);

Utilisez la fonction de rappel avec chargement () * Le paramètre de rappel

Lorsque nous ma?trisons le

load(url[, data][, callback])

load()

Parfois, nous voulons injecter le contenu renvoyé par le serveur en un ou plusieurs éléments. Nous voulons peut-être récupérer les données, puis décider quoi en faire après la recherche des données. Pour ce faire, nous pouvons utiliser la méthode $.post() ou $.get().

Ils sont fonctionnellement similaires (faites une demande au serveur) et sont les mêmes en termes de signature et de paramètres acceptés. La seule différence est que l'un envoie une demande de poste et l'autre envoie une demande GET. De toute évidence, n'est-ce pas?

Si vous ne vous souvenez pas de la différence entre une demande de poste et une demande de GET, si notre demande peut faire changer un état c?té serveur, ce qui entra?ne différentes réponses, vous devez utiliser le message. Sinon, ce devrait être une demande de GET.

$.post() La signature de la méthode est:

$('p').ajax(...);

Les paramètres sont les suivants:

• url: une cha?ne spécifiant l'URL de la ressource à laquelle vous souhaitez envoyer la demande;
• : une cha?ne ou un objet facultatif que jQuery sera envoyé dans le cadre d'une demande de poste; data
: La fonction de rappel exécutée après la demande est réussie. à l'intérieur de la fonction de rappel, le contexte (this) est défini pour représenter l'objet qui représente les paramètres AJAX utilisés dans l'appel.
• callback
: une cha?ne facultative qui spécifie comment le corps de réponse est interprété. Les valeurs acceptées sont: HTML, Text, XML, JSON, Script et JSONP. Cela peut également être une cha?ne de valeurs séparées plusieurs espaces. Dans ce cas, JQuery convertit un type à un autre. Par exemple, si la réponse est du texte et que nous voulons le traiter comme XML, nous pouvons écrire "texte XML". Si ce paramètre est omis, le texte de réponse sera transmis à la fonction de rappel sans aucun traitement ni évaluation, et jQuery fera de son mieux pour deviner le format correct.
• type
Maintenant que vous savez ce que

$.post() Supposons que nous ayons un formulaire à remplir. Chaque fois qu'un champ perd la mise au point, nous voulons envoyer les données de champ au serveur pour vérifier sa validité. Nous supposerons que le serveur renvoie des informations au format JSON. Un cas d'utilisation typique consiste à vérifier que le nom d'utilisateur sélectionné par l'utilisateur n'a pas encore été occupé.

Pour implémenter cette fonction, nous pouvons utiliser la méthode

$.post()

$.ajax(...);

pour vous donner une meilleure compréhension de ce à quoi pourrait ressembler ce type d'objet JSON, voici un exemple:

load(url[, data][, callback])

sauf pour pouvoir faire des demandes de recettes. Ainsi, la section suivante sera très courte et je me concentrerai sur certains cas d'utilisation au lieu de répéter les mêmes informations. $.get() $.post()

$.get() est l'une des méthodes fournies par jQuery pour émettre des demandes. Cette méthode initie une demande GET au serveur à l'aide de l'URL spécifiée et des données facultatives fournies. Une fois la demande terminée, il peut également exécuter la fonction de rappel. Sa signature est la suivante:

$('p').ajax(...);