Laman » Pengekodan » Bagaimana Membuat Apl Pembaca RSS dalam JavaScript
Bagaimana Membuat Apl Pembaca RSS dalam JavaScript
RSS (Really Simple Syndication) adalah format standard yang digunakan oleh penerbit dalam talian untuk sindiket kandungan mereka ke laman web dan perkhidmatan lain. An Dokumen RSS, juga dikenali sebagai a suapan, adalah Dokumen XML membawa kandungan yang ingin disebarkan oleh penerbit.
Suapan RSS boleh didapati di hampir semua laman web dan blog berita dalam talian untuk pembaca mereka sentiasa up-to-date dengan kandungan mereka. Mereka juga boleh didapati pada laman web bukan berasaskan teks seperti YouTube, di mana anda boleh menggunakan suapan saluran YouTube dimaklumkan tentang video terkini.
Program yang mengakses suapan ini, dan membaca dan memaparkan kandungannya dipanggil Pembaca RSS. Anda boleh membuat program pembaca RSS mudah dalam JavaScript. Dalam tutorial ini, kita akan melihat bagaimana.
Struktur suapan RSS
Suapan RSS mempunyai elemen akar dipanggil , sama dengan tag yang terdapat dalam dokumen HTML. Di dalam tag, ada a unsur, jenis seperti dalam HTML, itu termasuk banyak sub-unsur mengandungi kandungan diedarkan laman web tersebut.
Suapan biasanya membawa beberapa maklumat asas seperti tajuk, URL, dan perihal laman web dan siaran, artikel, atau kandungan lain individu laman web itu. Maklumat ini dijumpai dalam </code>, <code><link></code>, dan <code><description></code> unsur-unsur, masing-masing.</p> <p>Apabila teg ini <strong>terus hadir di dalamnya <code><channel></code></strong>, mereka memegang tajuk, URL, dan perihal tapak web. Apabila mereka <strong>hadir di dalam <code><item></code></strong> itu <strong>memegang maklumat mengenai siaran yang dikemas kini</strong>, mereka mewakili maklumat yang sama seperti sebelum tetapi kandungan individu yang masing-masing <code><item></code> mewakili.</p> <p>Terdapat juga beberapa <strong>unsur pilihan</strong> yang mungkin terdapat dalam suapan RSS, memberikan maklumat tambahan seperti imej atau hak cipta pada kandungan yang diedarkan. Anda boleh belajar mengenainya dalam hal ini <strong>Spesifikasi RSS 2.0</strong> di cyber.harvard.edu.</p> <p>Berikut adalah contoh bagaimana <strong>Suapan RSS laman web</strong> mungkin kelihatan seperti:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Tips Rekabentuk, Tutorial dan Inspirasien-usVisualisasikan Any Stylesheet CSS dengan CSS StatisticsPernah tertanya-tanya berapa banyak peraturan CSS yang terdapat dalam lembaran gaya? Atau adakah anda pernah mahu melihat ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - Alat Pintar Bertenaga Alexa TerkiniAmazon tidak asing dengan konsep sistem rumah pintar dengan pembantu digital tertanam. Lagipun, ... 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/
Mengambil suapan
Kita perlu ambil suapan dengan aplikasi pembaca RSS kami. Di laman web, URL suapan RSS boleh dijumpai di dalam tag menggunakan aplikasi / rss + xml jenis. Sebagai contoh, anda akan dapati pautan suapan RSS berikut di Hongkiat.com.
Pertama, mari kita lihat cara dapatkan URL suapan tapak web menggunakan JavaScript.
The ambil() kaedah adalah kaedah global yang asynchronously mengambil sumber. Ia mengambil URL sumber sebagai hujah (URL laman web dalam kod kami). Ia mengembalikan a Janji objek, jadi apabila kaedah ini berhasil mendapatkan laman web (iaitu, Janji telah dipenuhi), fungsi pertama di dalam kemudian () pernyataan mengendalikan tindak balas yang diambil (res dalam kod di atas).
Sambutan yang diambil kemudiannya baca sepenuhnya ke dalam rentetan teks menggunakan teks () kaedah. Teks ini mewakili Teks HTML laman web kami yang diambil. Suka ambil(), teks () juga mengembalikan a Janji objek. Oleh itu, apabila ia berjaya membuat teks respons daripada strim tindak balas, kemudian () akan mengendalikan teks tindak balas itu (htmlTeks dalam kod di atas).
Setelah teks HTML laman web tersedia, kami menggunakannya API DOMParser kepada parse ia ke dalam dokumen DOM. DOMParser memfilter rentetan teks XML / HTML ke dalam dokumen DOM. Kaedahnya, parseFromString (), mengambil masa dua hujah: teks yang akan dihuraikan dan juga jenis kandungan.
Kemudian, dari dokumen DOM yang dibuat, kami cari href nilai yang berkaitan tag menggunakan querySelector () kaedah untuk mendapatkan URL suapan.
Parsing dan memaparkan suapan
Sebaik sahaja kami mendapat URL suapan tapak web, kami perlu ambil dan baca dokumen RSS didapati di URL itu.
fetch (feedUrl) .then ((res) => res.text (). kemudian ((xmlTxt) => var domParser = new DOMParser () .querySelectorAll ('item'). forEach ((item) => let h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). appendChild (h1))))
Dengan cara yang sama seperti kita mengambil dan menguraikan laman web, sekarang kita dapatkan dan parse suapan XML ke dalam dokumen DOM. Untuk mencapai ini, kami menggunakan 'teks / xml' jenis kandungan dalam parseFromString () kaedah.
Dalam dokumen parsed, kami pilih semua unsur-unsur menggunakan querySelectorAll kaedah dan gelung melalui setiap.
