Le processus typique de création d'une liste de flux dynamique nécessite un type de langage backend. Évidemment, cela peut marcher si vous connaissez Rails ou PHP, mais je veux présenter une méthode pour extraire des flux RSS via jQuery. Le problème est d’accéder aux requêtes Ajax depuis un serveur externe, puis de convertir ces informations XML en quelque chose d’un peu plus facile à lire.
Nous allons nous concentrer sur l'API Google Feed, qui est beaucoup plus simple qu'il n'y paraît. Il existe un certain nombre de possibilités personnalisées pour jouer avec les options et accéder à d'autres thèmes alternatifs. Il ne reste plus qu'à extraire la première page des résultats de l'élément de fil, ainsi que chaque titre et le lien URL. Une fois que ce script fonctionne, il est très facile de personnaliser la mise en page et même d'inclure un peu de contenu du flux! Consultez mon exemple de démonstration ci-dessous pour avoir une idée de ce que nous allons créer.
Live Demo - Télécharger le code source
Commencer
La première étape consiste à créer un document de base incluant la bibliothèque jQuery en tant que ressource. J'utiliserai quelques fonctions publiées sur Stack Overflow qui nous aideront à atteindre ce flux RSS. Généralement, lorsque vous écrivez une application Web comme celle-ci, vous devez accéder à l'analyse syntaxique entre domaines à l'aide d'un langage de base. PHP est souvent la solution la plus simple pour les développeurs Web.
Étant donné que nous utilisons l'API Google Feed, elle sera utilisée comme script de base. Ainsi, tout peut être lu via jQuery Ajax puis converti en JSON afin que nous puissions analyser mieux. Voici l'en-tête de mon document qui inclut jQuery avec un script personnalisé parser.js.
La meilleure partie de mon code est comment nous pouvons tout remplir via JavaScript. Tous les éléments RSS internes de la page seront écrits en HTML, mais ils ne s'afficheront pas dans la source du document. Tout le contenu est publié dynamiquement et vous pouvez rapidement modifier les sources de flux à modifier à chaque rechargement de page.
Ceci est l'intégralité du contenu du corps. Chaque classe de .feedcontainer est utilisé pour appliquer les mêmes styles de base sur les en-têtes et les liens. Les noms d'ID sont ciblés via jQuery afin que nous puissions exécuter notre fonction RSS personnalisée, puis ajouter un nouveau contenu à l'aide de la méthode .html ().
Analyse RSS dans jQuery
Nous pouvons ignorer la plupart des styles CSS car ils sont assez basiques. Jetez un coup d'oeil à ma feuille de style si vous voulez voir comment tout l'alignement est fait. Mais passer à parser.js il y a deux fonctions où l'une gère spécifiquement la conversion RSS / JSON. L'autre est une fonction de capitalisation qui force automatiquement le flux RSS? Title? attribuer à rester capitalisé.
Ce parseRSS () Cette fonction a été publiée dans une question connexe Stack Overflow et décrit une solution parfaite fonctionnant uniquement avec jQuery. Nous avons toujours besoin d'un serveur car la méthode .ajax () ne peut pas être exécutée sans flux HTTP. Mais vous n’avez pas besoin de support pour d’autres langues principales, ce qui est un énorme soulagement. Dans l’idéal, nous pouvons faire confiance à Google pour que cela continue indéfiniment car il s’agit d’une formidable ressource pour les développeurs.
Le code de fonction lui-même est facile à comprendre si vous connaissez .ajax (). Nous passons d'abord dans l'URL à interroger, qui est le lien de l'API Google Feed distant. Nous avons besoin de Type de données défini en tant que JSON et après l'appel ajax réussi, nous devrions exécuter une nouvelle fonction pour afficher le contenu HTML. Notez que le paramètre que nous passons est appelé Les données qui contient la réponse JSON.
La boucle de réponse
Notez que j'ai aussi laissé un commentaire avec le code console.log (data.responseData.feed) si vous souhaitez afficher la sortie de tous les contenus JSON. Il est possible d'afficher plus que le titre du flux et les liens URL. Mais je voulais garder cet exemple sans fioritures inutiles. Vous avez la possibilité d'ajouter plus de choses à votre guise directement depuis cette fonction.
Dans la fonction d'appel ajax réussie, j'ai incorporé une boucle .each () pour parcourir les éléments du flux. Notez que ce tableau est accessible via data.responseData.feed.entries que nous transformons en une paire clé / valeur. C'est assez simple car nous n'avons besoin que d'une seule variable de chaîne pour contenir le code HTML. Ensuite, en utilisant jQuery .append (), tout le contenu est rajouté dans la page.
La sortie du titre ne se trouve pas dans cette boucle .each () car elle ne devrait être ajoutée qu'une fois pour chaque flux. Mais il utilise également une autre fonction personnalisée écrite pour mettre en majuscule chaque première lettre d'une chaîne JavaScript. Certains des flux RSS auront toutes les lettres de titre en minuscules, ce qui peut paraître étrange. Voici le code de la fonction et il est très court.
Gardez à l'esprit que les flux RSS peuvent avoir beaucoup plus d'informations à publier. Parfois, vous trouverez même des images miniatures intégrées au flux XML. Cela permet d'inclure des images d'articles dans votre propre application Web RSS! Les possibilités sont pratiquement illimitées avec un accès facile aux API de flux de Google.
Live Demo - Télécharger le code source
Dernières pensées
Les flux RSS sont toujours très populaires parmi les développeurs Web car il s'agit d'une méthode courante de transfert de données entre sites Web.Cela permet aux spécialistes du marketing Internet de publier facilement des mises à jour sur Twitter ou Facebook directement à partir du flux RSS du site Web. Je devrais recommander de télécharger une copie de mon code source et de jouer avec votre temps. En outre, voyez si vous pouvez ajouter l’une de vos propres fonctionnalités ou créer une application Web utile liée aux flux RSS populaires.