JavaScriptでRSSフィードを取得して解析する方法

このガイドは、JavaScriptを使用してRSSフィードを取得および処理する方法を示しています。 XMLベースの形式であるRSSは、JSONと比較してやや複雑な解析チャレンジを提示します。多くのAPIがJSONを支持していますが、RSSは普及しています。このチュートリアルでは、検証、 fetch APIを使用したネットワーク要求、およびデータ操作について説明します。

まず、フィードを検証して、有効な応答で作業していることを確認します。次に、 fetchを使用してネットワークリクエストを作成します。

1. RSSフィードURLを取得します。
2. 応答をテキストとして解析します。
3. DOMParser()を使用してテキストを解析します。
4. 解析されたデータを利用します。

fetch APIを使用した例を次に示します。

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

フェッチ（rss_url）
  .then（response => respons.text（））
  .then（str => new Window.domparser（）。parsefromstring（str、 "text/xml"））
  .then（data => {
    const items = data.queryselectorall（ "item"）;
    let html = ``;
    items.foreach（el => {
      html = `
        <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="JavaScriptでRSSフィードを取得して解析する方法">
        <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（ "befored"、html）;
  }）;

RSSデータ構造は、ネストされたHTML要素に似ています。上記のコードはターゲットです<item></item>要素、関連するデータ（ linkやtitleなど）を抽出し、Feedコンテンツを表示するHTML要素を動的に生成します。

または、より簡潔なソリューションのためにjqueryを使用することもできます。

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

$ .ajax（rss_url、{
  受け入れる：{XML： "Application/RSS XML"}、
  データタイプ： "xml"、
  成功：function（data）{
    $（data）.find（ "item"）。各（function（）{
      const el = $（this）;
      constテンプレート= `
        <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="JavaScriptでRSSフィードを取得して解析する方法">
        <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（ "beforeend"、テンプレート）;
    }）;
  }
}）;

生産環境については、パフォーマンスとセキュリティを改善するために、キャッシュを使用したサーバー側の処理を検討してください。このアプローチは、ウェブサイトで重要なコンテンツをレンダリングするためにサードパーティAPIに直接依存することを避けます。サーバー側のアプローチにより、スケジュールされた更新が可能になり（たとえば、Cronジョブを使用）、より速く、より信頼性の高いユーザーエクスペリエンスを提供します。

以上がJavaScriptでRSSフィードを取得して解析する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。