Guide d'initiation à AJAX avec jQuery

Dans le premier article de cette série, nous avons abordé les principes fondamentaux d’AJAX. Dans le second cas, nous avons examiné un exemple de travail utilisant JavaScript en vanille.

Dans ce tutoriel, nous allons passer en revue quelques fonctions et méthodes liées à AJAX de jQuery. Plus précisément, nous examinerons de plus près le raccourci charge méthode et le générique ajax une fonction.

En utilisant le charge Méthode

jQuery's charge method est une méthode simple mais puissante pour récupérer des données distantes. Ci-dessous vous pouvez voir sa syntaxe:

 $ (sélecteur) .load (url [, données] [, complète]) 

Le tableau suivant montre ses paramètres possibles:

Paramètre	La description	Champs obligatoires
url	Une chaîne contenant l'URL à laquelle la demande est envoyée.	Oui
Les données	Les données (sous forme de chaîne ou d'objet brut) envoyées au serveur avec la demande.	Non
Achevée	Une fonction de rappel qui est exécutée lorsque la demande est terminée, avec succès ou non..	Non

Voici les paramètres de la fonction de rappel:

Paramètre	La description
réponseTexte	Les données extraites de la demande.
textStatus	Une chaîne catégorisant le statut de la demande.
jqXHR	L'objet jQuery XMLHttpRequest (jqXHR), qui est un sur-ensemble de l'objet XMLHttpRequest (XHR) natif du navigateur..

La liste suivante résume les valeurs possibles de textStatus paramètre:

 - succès - non modifié - nocontent - erreur - délai d'attente - annulation - analyse syntaxique 

Pour mieux comprendre comment le charge méthode fonctionne, revenons à l'exemple présenté dans le tutoriel précédent.

Encore une fois, regardez cette structure HTML simple:

   En savoir plus sur Einstein   

Voici à quoi ça ressemble:

Rappelez-vous que nous voulons mettre à jour le contenu de la #bio élément avec les données de réponse, dès que le bouton est cliqué.

Voici le code jQuery requis:

 var $ btn = $ ('# request'); var $ bio = $ ('# bio'); $ btn.on ('click', function () $ (this) .hide (); $ bio.load ('Bio.txt', completeFunction);); function completeFunction (responseText, textStatus, request) $ bio.css ('border', '1px solid # e8e8e8'); if (textStatus == 'error') $ bio.text ('Une erreur s'est produite lors de votre requête:' + request.status + "+ request.statusText); 

En supposant que la demande aboutisse (c.-à-d. Quand textStatus est Succès ou non modifié), le résultat final ressemblerait à ceci:

En outre, considérez la visualisation suivante qui décrit une demande réussie:

La partie gauche de cette visualisation montre l'objet XHR tel qu'il est imprimé dans la console du navigateur si nous utilisons du JavaScript pur (voir le tutoriel précédent) pour faire la demande. Par contre, la partie droite affiche l’objet jqXHR correspondant lorsqu’il est imprimé si on utilise le charge méthode.

En cas d'échec de la demande, un message correspondant doit apparaître. Pour ce faire, nous surveillons la valeur de la textStatus paramétrer et afficher un message d'erreur:

Remarque: Si vous exécutez l’exemple à partir de votre environnement local (et stockez le Bio.txt fichier), le message d'erreur sera probablement différent. Par exemple, vous pourriez voir le résultat suivant:

Enfin, il convient de mentionner que, par défaut, le charge méthode utilise le HTTP OBTENIR méthode, sauf si nous envoyons des données en tant qu’objet au serveur. Alors seulement, le POSTER la méthode est invoquée.

Voir la démonstration correspondante de Codepen ci-dessous:

Maintenant, modifions le format du fichier que nous demandons au serveur. Plus précisément, pour cet exemple, les données souhaitées sont incluses dans Bio.html fichier au lieu de Bio.txt fichier. À noter également: le fichier cible contient deux paragraphes.

En supposant que nous ne voulions charger que le premier paragraphe, nous devrons mettre à jour le code initial comme suit:

 $ btn.on ('click', function () // cette ligne ne modifie que $ bio.load ('Bio.html p: premier-enfant', completeFunction);); 

Voici à quoi ça ressemble:

Et voici la démo de Codepen:

Conclusion

Dans ce tutoriel, j'ai montré comment utiliser AJAX avec jQuery. Pour rendre les choses plus intéressantes, nous avons également travaillé avec quelques exemples pratiques. Dans le dernier tutoriel de cette série, nous terminerons en travaillant avec un exemple plus complexe..