Ce tutoriel montre comment utiliser jQuery et le plugin jGFeed pour récupérer des flux de nouvelles à distance et écrire les résultats dans le balisage existant. jGFeed est un plugin jQuery qui vous permet d'obtenir «n'importe quel flux RSS depuis un hôte» et de retourner un objet JSON pour une utilisation facile..

Ce tutoriel comprend un screencast disponible pour les membres Tuts + Premium.

L'exemple de code de ce didacticiel peut ne pas fonctionner dans Internet Explorer 7 ou une version antérieure, mais il a été testé avec succès sur Firefox, Safari, Chrome et IE8..

Étape 1: Organisation des fichiers pour le didacticiel

Avant de commencer à écrire du code, créons un répertoire dans lequel placer les fichiers du lecteur de flux. J'ai créé un répertoire dans mon bureau appelé "feedreader". Dans ce répertoire, créez-en un autre appelé actifs.

Nous devrons également télécharger une copie de la source jGFeed. Vous pouvez le faire ici. Pour cet exemple, j'ai téléchargé la version compressée du fichier et l'ai placée dans le répertoire "assets"..

Enfin, créons des fichiers texte vides pour contenir le balisage, le javascript et les styles. J'ai créé la structure de fichier suivante:

 | - actifs | | - feedreader.js | | - jquery.jgfeed-min.js | '- styles.css' - index.html

La structure du fichier devrait ressembler à quelque chose comme:

Notez que index.html, feedreader.js et styles.css doivent être vides à ce stade..

Étape 2: le balisage

Notre balisage pour ce tutoriel va être très simple, et nous supposons que vous connaissez déjà un peu le HTML, nous allons donc tout présenter en même temps..

Dans notre fichier index.html, nous allons créer un lien vers la feuille de style que nous utiliserons plus tard pour nommer le lecteur de flux, puis ajouter une liste de liens aux flux que nous voulons obtenir et enfin ajouter les fichiers javascript nécessaires à l'exemple..

Notez que nous ajoutons les fichiers Javascript à la fin du corps. Cela améliore la vitesse de chargement perçue de vos pages, car le navigateur peut commencer à afficher les résultats sans avoir à attendre que les scripts soient chargés..

Ajoutez le balisage suivant à index.html:

         
jQuery + jGFeed Exemple de lecteur de flux AJAX
 
 
  .lupomontero  
 
  Nettuts+  
 
  jQuery  
 
  Apprendre jQuery  
 
 
 
 Cliquez sur les liens ci-dessus pour récupérer les flux 
 
      

Maintenant, lorsque nous ouvrons ce fichier dans le navigateur Web, la page suivante devrait contenir les éléments initiaux de notre lecteur de flux..

Notez que ce balisage serait parfaitement fonctionnel pour les navigateurs n’exécutant pas le langage javascript, en ce sens que la page offrirait toujours des liens valides vers les flux, mais qu’ils emmèneraient évidemment le navigateur dans un nouvel emplacement au lieu d’afficher les flux dans notre lecteur..

Screencast complet

Étape 3: Remplacer l'événement Onclick par défaut de Links

Jusqu'à présent, lorsque nous cliquons sur un lien, notre navigateur est dirigé vers un nouvel emplacement, l'emplacement spécifié dans l'attribut 'href' du lien. C'est le comportement normal des liens, mais dans ce cas, nous voulons empêcher le navigateur de naviguer n'importe où. Nous allons plutôt récupérer l'URL de manière asynchrone, traiter la réponse et imprimer les données dans le balisage existant, ce qui signifie que nous ne devons pas quitter le site. et les flux de nouvelles sont présentés comme nous le voulons.

Ouvrez le fichier vide que nous avons enregistré sous assets / feedreader.js (c'est ici que nous allons écrire notre script) et ajoutez le javascript suivant:

 $ (document) .ready (function () // Accroche à l'événement click pour les liens ajax-feed-trigger $ ('a.ajax-feed-trigger'). click (fonction (e) // Empêche l'action de clic par défaut e.preventDefault (); // Stocke la référence à un objet conteneur dans une variable var var conteneur = $ ('# ajax-feed-container'); // vide la div du conteneur et ajoute temporairement le style "chargement" conteneur.empty (). addClass ('loading'); // Obtenir les liens href attribut var href = $ (this) .attr ('href'); alert (href); // Obtenir le flux en utilisant jGFeed); // End a.ajax-feed- déclencher un événement de clic);

Le code ci-dessus annule le comportement par défaut de l'événement links onclick à l'aide de la méthode de clic de jQuery sur toutes les balises 'a' de la classe 'déclencheur ajax-feed'. Dans la méthode click, la première chose à faire est d’empêcher le comportement par défaut à l’aide de preventDefault () de javascript, puis nous vidons le conteneur div, ajoutons la classe de chargement qui nous permettra de styliser le «statut» de chargement et pour l’instant nous affichons simplement la valeur de l'attribut href du lien cliqué. Nous allons utiliser un appel à alert () pour vérifier que notre code fonctionne jusqu'à présent.

De retour dans le navigateur, lorsque nous cliquons sur les liens, nous devrions voir une boîte de dialogue d'alerte avec l'URL du lien cliqué..

Étape 4: Obtenir le fil d'actualités sous forme d'objet JSON à l'aide de jGFeed

La prochaine étape consistera à envoyer la requête HTTP réelle avec jGFeed et à vérifier que nous avons obtenu la réponse attendue..

Le plugin jGFeed prend les arguments suivants:

• url - URL du flux que vous souhaitez charger
• callback - fonction de rappel à appeler après le chargement du flux RSS
• num (facultatif) - nombre d'entrées de blog à charger (par défaut, 3)
• key (facultatif): clé de l'API Google à utiliser lors du chargement des flux RSS..

Plus d'infos sur jGFeed:
http://jquery-howto.blogspot.com/2009/05/google-feeds-api-jquery-plugin.html

Dans cet exemple, nous allons passer la valeur de l'attribut href du lien sous la forme de l'URL, une fonction de rappel anonyme, et indiquer que nous voulons limiter les résultats à 5..

Dans assets / feedreader.js, ajoutez l'appel à jGFeed afin que le script ressemble maintenant à la liste ci-dessous:

 $ (document) .ready (function () // Accroche à l'événement click pour les liens ajax-feed-trigger $ ('a.ajax-feed-trigger'). click (fonction (e) // Empêche l'action de clic par défaut e.preventDefault (); // Stocke la référence à un objet conteneur dans une variable var var conteneur = $ ('# ajax-feed-container'); // vide la div du conteneur et ajoute temporairement le style "chargement" conteneur.empty (). addClass ('loading'); // Obtenir les liens href attribut var href = $ (this) .attr ('href'); // Obtenir le flux en utilisant jGFeed $ .jGFeed (href, function (feeds) // Vérifie les erreurs si (! feeds) // une erreur est survenue container.append ('Erreur lors de la récupération du flux.'); return false;, 5); // End jGFeed); // Fin d'un clic sur un fichier.ajax-feed-trigger un événement );

Nous pouvons maintenant utiliser Firebug pour voir ce que fait jGFeed. Cliquez sur l'un des liens, ouvrez l'onglet "Net" dans Firebug et localisez la demande JSON. Il devrait dire quelque chose comme 'GET load? V1.0 & callback = jsonp12'. Si vous développez la vue, vous devriez pouvoir voir l’objet JSON et les données qu’il contient..

Étape 5: Création dynamique du balisage pour chaque entrée de flux

Maintenant que nous savons que nous obtenons les données, nous pouvons procéder avec quelque chose. Dans ce cas, nous souhaitons parcourir les entrées du flux et ajouter une chaîne avec un balisage HTML au conteneur existant créé dans notre fichier index.html..

Cependant, avant de parcourir les entrées, nous devons préparer le conteneur. Nous masquons la div pour nous assurer de ne rien voir jusqu'à ce que nous ayons fini de manipuler le contenu de la balise conteneur. Nous supprimons également la classe de chargement car la div est maintenant masquée et ajoutons le titre du flux dans une balise de titre.

Nous utilisons une boucle for pour parcourir la propriété entry de l'objet feeds renvoyé par jGFeed à notre fonction de rappel. Dans la boucle, nous construisons simplement une chaîne avec une balise HTML pour afficher les propriétés de chaque entrée. A la fin de chaque itération, nous ajoutons cette chaîne HTML au conteneur de flux..

Une fois que nous avons fini de renseigner le conteneur div avec toutes les entrées, nous appelons la méthode show () de JQuery pour afficher en fondu le div et le rendre à nouveau visible..

 $ (document) .ready (function () // Accroche à l'événement click pour les liens ajax-feed-trigger $ ('a.ajax-feed-trigger'). click (fonction (e) // Empêche l'action de clic par défaut e.preventDefault (); // Stocke la référence à un objet conteneur dans une variable var var conteneur = $ ('# ajax-feed-container'); // vide la div du conteneur et ajoute temporairement le style "chargement" conteneur.empty (). addClass ('loading'); // Obtenir les liens href attribut var href = $ (this) .attr ('href'); // Obtenir le flux en utilisant jGFeed $ .jGFeed (href, function (feeds) // Vérifie les erreurs si (! feeds) // une erreur s'est produite container.append ('Erreur lors de l'extraction du flux.'); return false; container.hide (); container.removeClass ('loading'); container.append ('
'+ feeds.title +'
'); // Traiter les entrées de flux pour (var i = 0; i'; html + = '
'; html + = entry.publishedDate + '
'; html + = '
 Posté par '; html + = entry.author + '
'; html + = '
'; html + = entry.contentSnippet + '
'; html + = '