Une introduction aux méthodes de jQuery sténographiques ajax

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 tâches 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

, nous pouvons terminer cette tâche avec le code suivant:

load()

attendez! Pouvez-vous voir ce qui ne va pas avec ce code? Certains d'entre vous peuvent remarquer que ce code récupère tout le code HTML

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

de la page référencée, pas seulement le contenu principal. L'exécution de ce code entraînera quelque chose comme avoir deux miroirs, l'un devant l'autre: vous voyez un miroir à l'intérieur d'un miroir, à l'intérieur d'un miroir, etc. Ce que nous voulons vraiment, c'est de charger le contenu principal de la page cible.

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:

Cette fois, nous recherchons la page, puis filtrons le code HTML, injectant uniquement les descendants de l'élément avec ID Main. Nous incluons un sélecteur universel (

) 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()

Cet exemple est bon, mais il ne montre que l'utilisation de l'un des paramètres disponibles. Jetons un coup d'œil à plus de code!

$.ajax(...);

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

peut être utilisé pour informer l'utilisateur de l'achèvement de l'opération. Mettons à jour l'exemple précédent pour la dernière fois pour l'utiliser.

Cette fois, nous supposons que nous avons un élément avec une barre de notification ID et il sera utilisé comme ... eh bien, barre de notification.

Lorsque nous maîtrisons le

, tournons notre attention vers la méthode suivante.

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

$. Post ()

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

peut faire et quels sont ses paramètres, écrivons du code.

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

de jQuery comme suit:

$.post()

Dans ce code, nous envoyons une demande de poste à la page identifiée par l'URL relative "/ utilisateur". Nous utilisons également les données du deuxième paramètre pour envoyer au serveur le nom et la valeur du champ qui perd la focalisation. Enfin, nous utilisons une fonction de rappel pour vérifier que la valeur de l'attribut d'état de l'objet JSON renvoyé est une erreur, auquel cas nous affichons le message d'erreur (stocké dans l'attribut de message) à l'utilisateur.

$.ajax(...);

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

Comme je l'ai dit,

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

est le même que

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 ()

$.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(...);

Les paramètres

sont les mêmes que ceux de la méthode $.post(), donc je ne les répéterai pas ici.

Les fonctions

$.get() sont idéales pour les cas où le serveur renvoie toujours le même résultat pour un ensemble de paramètres donné. C'est également un bon choix pour les ressources que vous souhaitez que les utilisateurs puissent partager. Par exemple, pour les services de transport (tels que les informations du calendrier de train), les personnes qui recherchent la même date et la même heure doivent obtenir les mêmes résultats, et une demande de GET est idéale. De plus, si la page peut répondre pour obtenir des demandes, les utilisateurs peuvent partager les résultats qu'ils obtiennent avec leurs amis - la magie des URL.

Conclusion

Dans cet article, nous discutons certaines des méthodes d'abréviation de l'AJAX les plus couramment utilisées pour jQuery. Ils sont un moyen très pratique d'effectuer des demandes Ajax, et comme nous pouvons le voir, dans leur version de base, il ne faut qu'une seule ligne de code pour réaliser ce que nous voulons.

Veuillez consulter la documentation Ajax Abréviation de JQuery pour plus d'informations sur ces méthodes et d'autres. Bien que nous ne discutions rien d'autre ici, vous devriez être en mesure d'utiliser les connaissances que vous avez acquises dans cet article pour commencer avec d'autres méthodes.

(La section FAQ doit être ajoutée ici, le contenu est le même que la section FAQ dans le texte d'entrée)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!