jQuery Tutorial (Part 5) AJAX Them All!

Alors que nous approchons de la fin de notre série de mini-didacticiels jQuery, il est temps que nous examinions plus en détail 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 qu'il soit nécessaire de recharger toute la page. Des flux de statut infinis à la Facebook comme à la soumission de données de formulaire, il existe un million de situations réelles dans lesquelles cette technique peut être utile.

Si vous n'avez pas lu les tutoriels précédents, je vous suggère de le faire avant de vous en occuper, car ils se renforcent mutuellement..

• Introduction: Qu'est-ce que jQuery et pourquoi vous en soucier? Rendre le Web interactif: Introduction à jQuery Rendre le Web interactif: Introduction à jQuery jQuery est une bibliothèque de scripts côté client utilisée par presque tous les sites Web modernes. 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
• 1: Sélecteurs et bases Tutoriel jQuery - Mise en route: bases et sélecteurs Tutoriel jQuery - Mise en route: bases et sélecteurs La semaine dernière, j'ai expliqué à quel point jQuery est important 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… Read More
• 2: Méthodes Introduction à jQuery (Partie 2): Méthodes et fonctions Introduction à jQuery (Partie 2): Méthodes et fonctions Ceci fait partie d'une introduction en cours sur la série de programmes de programmation Web jQuery. La première partie couvrait les bases de jQuery sur la manière de l'inclure dans votre projet et les sélecteurs. Dans la partie 2, nous poursuivrons avec… Read More
• 3: En attente de chargement de page et de fonctions anonymes Introduction à jQuery (Partie 3): Attente de la page à charger et fonctions anonymes Introduction à jQuery (Partie 3): Attente de la page à charger et aux fonctions anonymes jQuery est 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 (4ème partie) - Auditeurs d’événements Tutoriel jQuery (4ème partie) - Auditeurs d’événements Aujourd'hui, nous allons passer à la vitesse supérieure 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… En savoir plus
• Débogage avec les outils de développement Chrome: résolvez les problèmes de site Web avec les outils de développement Chrome ou Firebug. Résolvez les problèmes de site Web avec les outils de développement Chrome ou Firebug. Si vous avez suivi mes didacticiels jQuery jusqu'à présent, vous avez peut-être déjà rencontré des problèmes de code et vous ne savez pas comment pour les réparer. Face à un morceau de code non fonctionnel, il est très… Read More

Un quoi?

AJAX est un acronyme pour Javascript et XML asynchrones, 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 n'avez probablement même jamais remarqué cela auparavant, mais si un site Web se met à jour de manière dynamique, 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 de l'utilisateur, aurait dû être effectuée à l'aide d'un nouveau chargement de page et de nouvelles redirections..

Aujourd'hui, nous allons utiliser un service tiers, Flickr, auprès duquel nous pouvons utiliser AJAX pour récupérer des images à l'aide d'un type de données JSON. En fait, peu importe la façon dont Flickr met en œuvre le côté destinataire, c’est la beauté de Apis - tout ce que nous avons besoin de savoir, c'est une URL d'API, quel type de données nous allons récupérer et comment les manipuler.

Pour en savoir plus, j’ai récemment écrit un autre tutoriel sur la gestion d’AJAX dans WordPress lors de la soumission d’un formulaire de contact. Tutoriel sur l’utilisation d’AJAX dans WordPress Didacticiel sur l’utilisation d’AJAX dans WordPress AJAX est une technologie Web remarquable qui nous a “cliquez sur le lien, allez à une autre page” structure de l'Internet 1.0. Il permet aux sites Web d'extraire et d'afficher du contenu de manière dynamique sans l'utilisateur… Lisez-en plus, alors vous voudrez peut-être aussi y jeter un coup d'œil; cela implique d’écrire votre propre gestionnaire PHP et de l’intégrer dans le “officiel” Processus WordPress AJAX.

La méthode AJAX

Voici le format de base d'une requête AJAX:

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

Cela a l'air assez complexe au début - pas aidé par le manque d'indentation de ce plugin de code - mais vous verrez comme c'est facile quand on a 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 existe 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 complet AJAX. Bien que ce soit une façon valable de faire les choses si vous savez que vous ne récupérerez que des données JSON, j’estime qu’il est plus important d’apprendre la méthode AJAX proprement dite. C’est ainsi que nous procéderons..

Tout d'abord, une place single.php et nous essaierons de faire écho à une simple liste séparée par balises des balises post actuelles. En règle générale, vous utiliseriez the_tags () de le faire, mais ce n'est pas bon car nous voulons éventuellement les stocker en tant que variable, tandis que the_tags () les répète directement pré-formatés. Au lieu de cela, nous allons utiliser get_the_tags ():

prénom.","; ?>

Cela fonctionne bien, nous allons donc l'exporter à l'intérieur d'une requête AJAX vers l'URL de l'API Flickr comme suit (remarque: il s'agit d'une capture d'écran. Afin de préserver l'indentation, le code est disponible dans ce PasteBin)..

À ce stade, il ne reste plus qu'à générer une sortie sur la console du navigateur ou à alerter un message d'erreur, le cas échéant. Pour réellement utiliser les données renvoyées, ajoutez un emplacement aux images placées:

Et éditer le Succès paramètre de l'appel AJAX pour parcourir le articles qui sont retournés.

$ .each (data.items, function (i, item) if (i == 3) renvoie false; // s'arrête dès que nous avons 3 $ ("# flickr"). append (""););

Et là nous l'avons. Étaient annexant 3 éléments de l'objet JSON renvoyé (les données sont indexées à zéro, donc si vous passez à l'élément 3, nous en sommes au quatrième élément. Confus, je sais. À ce stade, nous utilisons retourne faux pour sortir du chaque() itérateur).J'ai déjà examiné le contenu des objets renvoyés. Je connais donc la structure des données et j'extrais simplement 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 à ce PasteBin. Notez que les résultats renvoyés sont fondamentalement indésirables - mon message incluait la balise DIY pour un poulailler sans rendez-vous, et Flickr m'a donné du bricolage à tricoter. Agréable. Bien sûr, c’est l’un des obstacles que vous rencontrez lorsque vous travaillez avec une API et que vous agissez automatiquement; vous pouvez soit renommer vos messages (une tâche considérable), soit modifier la demande pour demander “tout” balises au lieu de “tout” (susceptible de ne rien renvoyer dans ce cas) ou de créer un nouveau champ personnalisé dans lequel vous spécifieriez un mot clé ciblé à utiliser avec l'API (probablement le plus simple).

Considérations de référencement

Ce n’est pas un problème majeur, mais puisque vous êtes en train de développer des sites Web, il convient de le mentionner: les moteurs de recherche n’indexeront pas le contenu qui n’existe pas au chargement de la page, comme ce qui est fait via AJAX. La pire des choses que vous puissiez faire serait d’ajaxifier complètement votre blog afin que la page d’accueil soit simplement un conteneur ressemblant à un iframe pour tout le contenu chargé de manière dynamique. Utilisez AJAX à bon escient, pour améliorer le contenu de la page, pas en tant que remplacement. Ou faire face à des conséquences désastreuses.

Merci de m'avoir lu et j'espère vous avoir donné quelques idées. Bien sûr, Flickr n'est pas la seule API disponible - seulement Google “API publique” et vous êtes sûr de trouver plus de choses que vous pourriez jouer avec.

La semaine prochaine sera la dernière leçon de la série de didacticiels jQuery lors de la vérification du plug-in jQuery UI. Comme toujours, les commentaires et les suggestions sont les bienvenus. si vous avez une question qui intéressera d’autres, envisagez de la publier sur notre site Réponses..

En savoir plus sur: jQuery, Programmation, Développement Web.