Tutoriel jQuery (Partie 5): AJAX les tous!

Publicité

Alors que nous approchons de la fin de notre mini-série de didacticiels jQuery, il est grand temps que nous examinions de manière plus approfondie l'une des fonctionnalités les plus utilisées de jQuery. AJAX permet à un site Web de communiquer avec un serveur en arrière-plan sans avoir besoin de recharger la page entière. Des flux de statut infinis de type Facebook à la soumission de données de formulaire, il existe un million de situations différentes dans la vie réelle dans lesquelles cette technique peut être utile.

Si vous n'avez pas lu les didacticiels précédents, je vous suggère de le faire avant de vous attaquer à cela car ils s'appuient les uns sur les autres.

• Introduction: Qu'est-ce que jQuery et pourquoi devriez-vous vous en soucier? Rendre le Web interactif: une introduction à jQueryjQuery est une bibliothèque de script côté client que presque tous les sites Web modernes utilisent - elle rend les sites Web interactifs. Ce n'est pas la seule bibliothèque Javascript, mais c'est la plus développée, la plus supportée et la plus utilisée ... Lire la suite
instagram viewer
• 1: Sélecteurs et principes de base Tutoriel jQuery - Prise en main: bases et sélecteursLa semaine dernière, j'ai parlé de l'importance de jQuery pour tout développeur Web moderne et pourquoi il est génial. Cette semaine, je pense qu'il est temps de nous salir les mains avec du code et d'apprendre comment ... Lire la suite
• 2: Méthodes Introduction à jQuery (Partie 2): Méthodes et fonctionsCela fait partie d'une introduction continue aux débutants de la série de programmation Web jQuery. La partie 1 a couvert les bases de jQuery sur la façon de l'inclure dans votre projet et les sélecteurs. Dans la partie 2, nous allons continuer avec ... Lire la suite
• 3: En attente du chargement de la page et des fonctions anonymes Introduction à jQuery (partie 3): attente de chargement de la page et fonctions anonymesjQuery est sans doute une compétence essentielle pour le développeur Web moderne, et dans cette courte mini-série, j'espère vous donner les connaissances nécessaires pour commencer à l'utiliser dans vos propres projets Web. Dans... Lire la suite
• 4: Événements Tutoriel jQuery (Partie 4) - Écouteurs d'événementsAujourd'hui, nous allons donner un coup de pouce et montrer vraiment où jQuery brille - les événements. Si vous avez suivi les tutoriels précédents, vous devriez maintenant avoir une assez bonne compréhension du code de base ... Lire la suite
• Débogage avec Chrome Developer Tools Résoudre les problèmes de site Web avec les outils de développement Chrome ou FirebugSi vous avez suivi mes tutoriels jQuery jusqu'à présent, vous avez peut-être déjà rencontré des problèmes de code et vous ne savez pas comment les résoudre. Face à un bout de code non fonctionnel, c'est très ... Lire la suite

Un quoi?

AJAX est un acronyme pour Javascript asynchrone et XML, mais le mot clé ici est asynchrone. Asynchrone fait référence au fait que ces demandes se produisent en arrière-plan, sans interrompre l'expérience de navigation de l'utilisateur. Vous ne l'avez probablement jamais remarqué auparavant, mais si un site Web se met à jour dynamiquement, il y a de fortes chances qu'il utilise AJAX pour le faire.

Avant AJAX, toute forme d'interaction avec un serveur, qu'il s'agisse de récupérer de nouvelles données ou de publier des informations auprès de l'utilisateur, devait se faire à l'aide d'un nouveau chargement de page et de nouvelles redirections.

Aujourd'hui, nous allons envisager d'utiliser un service tiers, Flickr - à partir duquel nous pouvons utiliser AJAX pour récupérer des images à l'aide d'un type de données JSON. Peu importe comment Flickr implémente le côté réception des choses, car c'est la beauté de Apis - tout ce que nous devons savoir, c'est une URL d'API, quel type de données nous allons récupérer et comment les manipuler.

Pour plus de lecture, j'ai écrit un autre tutoriel il y a quelque temps sur gérer AJAX dans WordPress pour une soumission de formulaire de contact Un tutoriel sur l'utilisation d'AJAX dans WordPressAJAX est une technologie Web remarquable qui nous a fait dépasser le simple "lien de clic, aller sur une autre page" structure d'Internet 1.0. Il permet aux sites Web de récupérer et d'afficher dynamiquement du contenu sans utilisateur... Lire la suite , vous pouvez donc également vérifier cela; cela implique d'écrire votre propre gestionnaire PHP et de l'intégrer dans le processus «officiel» de WordPress AJAX.

La méthode AJAX

Voici le format de base d'une demande AJAX:

$ .ajax ({type: "GET or POST", url: "API ou URL de votre gestionnaire PHP", type de données: "JSON", // selon le type de données que vous souhaitez récupérer, mais JSON est le plus données communes: {// un ensemble de clés: paires "valeur"}, succès: fonction (données) {// gérer un retour de données réussi}, erreur: fonction (message) {// gérer l'erreur } });

Cela semble assez complexe au début - pas aidé par le manque d'indentation de ce plugin de code - mais vous verrez à quel point c'est facile quand on arrive à un exemple du monde réel.

API Flickr AJAX

Dans cet exemple, nous allons récupérer les balises associées à la publication WordPress actuelle et récupérer des images à ajouter à la fin de l'article. Il y a un exemple similaire dans la documentation jQuery, mais il utilise une méthode de raccourci appelée getJSON () plutôt que d'expliquer un format AJAX complet. Bien que ce soit une façon valable de faire les choses si vous savez que vous ne récupérerez que les données JSON, j'estime que l'apprentissage de la méthode AJAX réelle est plus important, c'est ainsi que nous procéderons.

Tout d'abord, un single.php et nous essaierons de reproduire une simple liste séparée par des virgules des tags de publication actuels. En règle générale, vous utiliseriez the_tags () pour ce faire, mais ce n'est pas bon car nous voulons éventuellement les stocker en tant que variable, tout en the_tags () les fait écho directement pré-formatés. Au lieu de cela, nous utiliserons get_the_tags ():

php. $ tagslist = get_the_tags (); foreach ($ tagslist as $ tag) { echo $ tag-> nom. ","; }

Cela fonctionne très bien, nous allons donc sortir ceci à l'intérieur d'une requête AJAX vers l'URL de l'API Flickr comme suit (remarque, ceci est une capture d'écran - afin de préserver l'indentation, le code est disponible sur ce PasteBin).

À ce stade, tout ce qu'il fait est de sortir sur la console du navigateur ou d'alerter un message d'erreur s'il y en a un. Pour réellement faire quelque chose avec les données renvoyées, ajoutez quelque part pour les images à placer:

Et modifiez le Succès paramètre de l'appel AJAX pour itérer sur la articles qui sont retournés.

$ .each (data.items, fonction (i, item) {if (i == 3) return false; // arrête quand nous avons 3 $ ("# flickr"). append (""); });

Et nous l'avons. Étaient ajouter 3 éléments de l'objet JSON retourné (les données sont indexées à zéro, donc si vous accédez à l'élément 3, nous sommes en fait au quatrième élément. Déroutant, je sais. À ce stade, nous utilisons retour faux sauter du chaque() J'ai déjà examiné le contenu des objets renvoyés, donc je connais la structure des données et je ne fais qu'extraire un lien et une référence IMG. Si vous êtes intéressé à savoir quoi d'autre est retourné, jetez simplement un console.log (élément) là-dedans.

Voici les résultats sur mon site de test et le code complet sur ce PasteBin. Notez que les résultats retournés sont essentiellement indésirables - mon message comprenait la balise DIY pour un poulailler sans rendez-vouset Flickr m'a donné du tricot à faire soi-même. Agréable. Bien sûr, c'est l'un des obstacles que vous rencontrez lorsque vous travaillez avec une API et faites les choses automatiquement; vous pouvez soit ré-étiqueter vos messages (une entreprise considérable), modifier la demande pour demander «toutes» les balises au lieu de «toutes» (susceptibles de revenir rien dans ce cas), ou proposer un nouveau champ personnalisé dans lequel vous spécifieriez un mot clé ciblé à utiliser avec l'API (probablement le le plus simple).

Considérations SEO

Ce n'est pas un point majeur, mais comme vous êtes en train de développer des sites Web, il devrait être mentionné: les moteurs de recherche n'indexeront pas le contenu qui n'existe pas au chargement de la page, comme tout ce qui a été fait via AJAX. La pire chose que vous puissiez faire serait de complètement AJAXifier votre blog afin que la page d'accueil ne soit qu'un conteneur de type iframe pour tout le contenu qui est chargé dynamiquement. Utilisez judicieusement AJAX pour améliorer le contenu de la page, pas en tant que remplacement. Ou faire face à des conséquences désastreuses.

Merci d'avoir lu et j'espère vous avoir donné quelques idées. Bien sûr, Flickr n'est pas la seule API sur le marché - juste Google "API publique"Et vous êtes sûr de trouver plus de choses avec lesquelles vous pourriez jouer.

La semaine prochaine sera la dernière leçon de la série de tutoriels jQuery alors que nous vérifions le plugin jQuery UI. Comme toujours, les commentaires et suggestions sont les bienvenus; si vous avez une question dont d'autres bénéficieront, pensez à la publier sur notre site Answers.