Comment récupérer et analyser les flux RSS en javascript

Ce guide montre comment récupérer et traiter les flux RSS à l'aide de JavaScript. RSS, un format basé sur XML, présente un défi d'analyse légèrement plus complexe par rapport à JSON. Alors que de nombreuses API favorisent JSON, le RSS reste répandu. Ce tutoriel couvre la validation, les demandes de réseau à l'aide de l'API fetch et la manipulation des données.

Tout d'abord, validez le flux pour vous assurer que vous travaillez avec une réponse valide. Ensuite, utilisez fetch pour faire une demande de réseau:

1. Retrouvez l'URL de l'alimentation RSS.
2. Analyser la réponse en tant que texte.
3. Analyser le texte à l'aide de DOMParser() .
4. Utilisez les données analysées.

Voici un exemple utilisant l'API fetch :

 const rss_url = `https: // codepen.io / picks / feed /`;

Fetch (RSS_URL)
  .Then (Response => Response.Text ())
  .Then (str => new Window.DOMPARSER (). PARSEFROMSTRING (Str, "Text / Xml"))
  .Then (data => {
    const items = data.QuerySelectorAll ("item");
    Soit html = ``;
    items.ForEach (el => {
      html = `
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Comment récupérer et analyser les flux RSS en javascript">
        <h2>
          <a href="https://www.php.cn/link/b36745962d5a1345e1b6dc85e9a80405" link target="_blank" rel="noopener">
            https://www.php.cn/link/b36745962d5a1345e1b6dc85e9a80405"Title").TextContent}
          </a>
        </h2>
      `;
    });
    document.body.insertAdjacentHtml ("AVANT", html);
  });

La structure des données RSS ressemble à des éléments HTML imbriqués. Le code ci-dessus cible<item></item> Éléments, extrait les données pertinentes (comme link et title ) et génère dynamiquement des éléments HTML pour afficher le contenu du flux.

Alternativement, vous pouvez utiliser jQuery pour une solution plus concise:

 const rss_url = `https: // codepen.io / picks / feed /`;

$ .ajax (RSS_URL, {
  Accepte: {xml: "Application / RSS XML"},
  type de données: "xml",
  Succès: fonction (données) {
    $ (data) .find ("item"). Chaque (fonction () {
      const el = $ (this);
      const Template = `
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Comment récupérer et analyser les flux RSS en javascript">
        <h2>
          <a href="https://www.php.cn/link/ea95de08542db1d94fe393abd1a5ce8d" link target="_blank" rel="noopener">
            https://www.php.cn/link/ea95de08542db1d94fe393abd1a5ce8d "title") .text ()}
          </a>
        </h2>
      `;
      document.body.insertAdjacentHtml ("AVANT", modèle);
    });
  }
});

Pour les environnements de production, envisagez le traitement côté serveur avec la mise en cache pour améliorer les performances et la sécurité. Cette approche évite de s'appuyer directement sur une API tierce pour rendre un contenu critique sur votre site Web. Une approche côté serveur permet des mises à jour planifiées (en utilisant les travaux CRON, par exemple) et offre une expérience utilisateur plus rapide et plus fiable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!