Alors que nous approchons de la fin de notre série de mini-tutoriels jQuery, il est grand temps que nous examinions de plus près 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 toute la page. Des flux d'état infinis de style Facebook à la soumission de données de formulaire, il existe un million de situations de la vie réelle 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 attaquer à ce problème car ils se complètent les uns les autres.
- Introduction: Qu'est-ce que jQuery et pourquoi devriez-vous vous en soucier? Rendre le Web interactif: une introduction à jQuery Rendre le Web interactif: une introduction à jQuery jQuery est une bibliothèque de scripts 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 largement utilisée .... Lire la suite
- 1: Sélection et principes de base Tutoriel jQuery - Prise en main: Bases et sélecteurs Tutoriel jQuery - Premiers pas: Principes de base et sélecteurs La semaine dernière, j'ai parlé de l'importance de jQuery pour tout développeur Web moderne et pourquoi c'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 fonctions Introduction à jQuery (Partie 2): Méthodes et fonctions Ceci fait partie d'une introduction continue aux séries de programmation web jQuery. La partie 1 couvrait les bases de jQuery sur la façon de l'inclure dans votre projet, ainsi que les sélecteurs. Dans la partie 2, nous continuerons avec ... Lire la suite
- 3: Attente du chargement de page et des fonctions anonymes Introduction à jQuery (Partie 3): Attente de la page à charger et fonctions anonymes Introduction à jQuery (Partie 3): Attente de la page à charger et des fonctions anonymes jQuery 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. In ... En savoir plus
- 4: Evénements jQuery Tutorial (Partie 4) - Les auditeurs d'événements Tutorial jQuery (Partie 4) - Les auditeurs d'événements Aujourd'hui, nous allons lancer un cran et montrer vraiment où jQuery brille - événements. Si vous avez suivi les didacticiels passés, vous devriez maintenant avoir une assez bonne compréhension du code de base ... Lire la suite
- Débogage avec les outils de développement Chrome Figure Out Problèmes de site Web avec les outils de développement Chrome ou Firebug Figure Out Problèmes de site Web avec les outils de développement Chrome ou Firebug Si vous avez suivi mes tutoriels jQuery jusqu'à présent, vous avez déjà rencontré des problèmes de code. pour les réparer. Face à un peu de code non fonctionnel, c'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, n'interrompant pas 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 d'afficher des informations auprès de l'utilisateur, aurait dû être effectuée en utilisant un nouveau chargement de page et des redirections.
Aujourd'hui, nous allons utiliser un service tiers, Flickr - de qui nous pouvons utiliser AJAX pour aller chercher des images en utilisant un type de données JSON. Peu importe comment Flickr implémente le côté réception des choses, parce que c'est la beauté des API - tout ce que nous devons savoir est une URL API, quel type de données nous allons récupérer, et comment le manipuler.
Pour en savoir plus, j'ai écrit un autre tutoriel il ya un moment sur la manipulation d'AJAX dans WordPress pour un formulaire de contact. Un tutoriel sur l'utilisation d'AJAX dans WordPress Un tutoriel sur l'utilisation d'AJAX dans WordPress AJAX est une technologie Web remarquable., allez à une autre page "structure de The Internet 1.0. Il permet aux sites Web de récupérer et d'afficher dynamiquement le contenu sans l'utilisateur ... Lisez la suite, vous pouvez donc vouloir vérifier cela aussi; il s'agit d'écrire votre propre gestionnaire PHP et de l'intégrer dans le processus "officiel" WordPress AJAX.
La méthode AJAX
Voici le format de base d'une requête AJAX:
$.ajax({ type: "GET or POST", url: "API or your PHP handler URL ", datatype:"JSON", // depending on what kind of data you want back, but JSON is the most common data: { //a set of key:"value" pairs }, success:function(data){ //handle a successful return of data }, error:function(message){ //handle the error } }); Cela semble assez complexe au début - pas aidé par le manque d'indentation de ce plugin de code - mais vous verrez à quel point il est facile quand il s'agit d'un exemple réel.
Flickr API AJAX
Dans cet exemple, nous allons récupérer les tags associés à l'article WordPress actuel, et récupérer des images à ajouter à la fin de l'article. Il existe un exemple similaire dans la documentation de 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 valide de faire les choses si vous savez que vous ne récupérerez que des données JSON, je pense que l'apprentissage de la méthode AJAX est plus important, et c'est ainsi que nous allons le faire.
Tout d'abord, un single.php et nous essaierons de faire écho à une simple liste séparée par des virgules des balises post actuelles. Typiquement, vous utiliseriez the_tags () pour faire cela, mais ce n'est pas bon car nous voulons les stocker en tant que variables, tandis que the_tags () les renvoie directement pré-formatées. Au lieu de cela, nous utiliserons get_the_tags ():
name.", "; }?> Cela fonctionne bien, donc nous allons afficher ceci à l'intérieur d'une requête AJAX à l'URL de l'API Flickr comme suit (notez qu'il s'agit d'une capture d'écran - afin de préserver l'indentation, le code est disponible dans ce PasteBin).
À ce stade, tout ce qu'il fait pour sortir à la console du navigateur, ou alerter un message d'erreur s'il y en a un. Pour réellement faire quelque chose avec les données retournées, ajoutez quelque part pour les images à placer:
Et modifiez le paramètre de succès de l'appel AJAX pour itérer sur les éléments qui sont retournés.
$.each(data.items, function(i, item){ if(i==3) return false; // stop when we have 3 $("#flickr").append(" 
"); }); Et là nous l'avons. Nous ajoutons 3 éléments à partir de l'objet JSON retourné (les données sont indexées à zéro, donc si nous arrivons à l'élément 3, nous sommes en fait au quatrième élément.) Confus, je sais, à ce stade, nous utilisons return false pour sauter de chaque () itérateur). J'ai déjà examiné le contenu des objets qui sont retourné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 voulez savoir quoi d'autre est retourné, lancez un fichier console.log (item) .
Voici les résultats sur mon site de test, et le code complet à ce PasteBin. Remarquez que les résultats retournés sont essentiellement de la malbouffe - mon article incluait le tag DIY pour une course de poulets sans rendez-vous, et Flickr m'a donné du tricot DIY. Agréable. Bien sûr, c'est l'un des obstacles auxquels vous faites face lorsque vous travaillez avec une API et que vous faites des choses automatiquement; vous pouvez soit ré-étiqueter vos messages (une entreprise considérable), changer la demande pour demander "tous" tags au lieu de "tout" (susceptibles de ne rien renvoyer dans ce cas), ou venir avec un nouveau champ personnalisé auquel vous spécifierait un mot-clé ciblé à utiliser avec l'API (probablement le plus facile).
Considérations SEO
Ce n'est pas un point important, mais puisque vous travaillez dans le développement de sites Web, il faut le mentionner: les moteurs de recherche n'indexeront pas le contenu qui n'existe pas au chargement de la page, comme tout ce qui est fait via AJAX. La pire chose que vous pourriez faire serait de complètement AJAXify votre blog afin que la page d'accueil était simplement un conteneur de type iframe pour tout le contenu qui est chargé dynamiquement. Utilisez judicieusement AJAX pour améliorer le contenu de la page, et non pour le remplacer . 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 disponible - juste 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 jQuery Tutorial alors que nous jetterons un coup d'œil sur 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 à l'afficher sur notre site Réponses.