Cara mengambil dan menghuraikan suapan RSS di JavaScript

Panduan ini menunjukkan bagaimana untuk mengambil dan memproses suapan RSS menggunakan JavaScript. RSS, format berasaskan XML, memberikan cabaran parsing yang lebih kompleks berbanding dengan JSON. Walaupun banyak API memihak kepada JSON, RSS masih berleluasa. Tutorial ini meliputi pengesahan, permintaan rangkaian menggunakan API fetch , dan manipulasi data.

Pertama, sahkan suapan untuk memastikan anda bekerja dengan respons yang sah. Kemudian, gunakan fetch untuk membuat permintaan rangkaian:

1. Ambil url suapan RSS.
2. Menghuraikan respons sebagai teks.
3. Menghuraikan teks menggunakan DOMParser() .
4. Gunakan data yang dihuraikan.

Inilah contoh menggunakan API fetch :

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

Ambil (rss_url)
  .then (response => response.text ())
  .then (str => window baru.domParser ().
  .THEN (data => {
    const item = data.QuerySelectorAll ("item");
    Biarkan html = ``;
    items.foreach (el => {
      html = `
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Cara mengambil dan menghuraikan suapan RSS di 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 ("sebelum ini", html);
  });

Struktur data RSS menyerupai elemen HTML bersarang. Kod di atas sasaran<item></item> unsur -unsur, mengekstrak data yang relevan (seperti link dan title ), dan secara dinamik menghasilkan elemen HTML untuk memaparkan kandungan suapan.

Sebagai alternatif, anda boleh menggunakan jQuery untuk penyelesaian yang lebih ringkas:

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

$ .ajax (rss_url, {
  menerima: {xml: "Aplikasi/RSS XML"},
  Datatype: "XML",
  Kejayaan: Fungsi (data) {
    $ (data) .find ("item"). Setiap (fungsi () {
      const el = $ (ini);
      templat const = `
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Cara mengambil dan menghuraikan suapan RSS di JavaScript">
        <h2>
          <a href="https://www.php.cn/link/ea95de08542db1d94fe393abd1a5ce8d" link target="_blank" rel="noopener">
            https://www.php.cn/link/EA95DE08542DB1D94FE393ABD1A5CE8D "Tajuk") .text ()}
          </a>
        </h2>
      `;
      document.body.insertadJacentHtml ("sebelum ini", templat);
    });
  }
});

Untuk persekitaran pengeluaran, pertimbangkan pemprosesan pelayan dengan caching untuk meningkatkan prestasi dan keselamatan. Pendekatan ini mengelakkan bergantung secara langsung pada API pihak ketiga untuk memberikan kandungan kritikal di laman web anda. Pendekatan sisi pelayan membolehkan kemas kini yang dijadualkan (menggunakan pekerjaan Cron, sebagai contoh) dan menyediakan pengalaman pengguna yang lebih cepat dan lebih dipercayai.

Atas ialah kandungan terperinci Cara mengambil dan menghuraikan suapan RSS di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!