วิธีสร้างแอป RSS Reader ใน JavaScript
RSS (การรวมที่ง่ายมาก) เป็นรูปแบบมาตรฐานที่ผู้โฆษณาออนไลน์ใช้ จัดส่งเนื้อหาของพวกเขา เว็บไซต์และบริการอื่น ๆ เอกสาร RSS , หรือที่เรียกว่า อาหาร , เป็น เอกสาร XML ดำเนินการเนื้อหาที่ผู้เผยแพร่ต้องการเผยแพร่.
ฟีด RSS มีอยู่ในเว็บไซต์และบล็อกข่าวออนไลน์เกือบทั้งหมดสำหรับผู้อ่าน อยู่เสมอกับเนื้อหาของพวกเขา . พวกเขายังสามารถพบได้บน เว็บไซต์ที่ไม่ใช่ข้อความ เช่น YouTube ซึ่งคุณสามารถใช้ฟีดของช่อง YouTube ได้ รับทราบวิดีโอล่าสุด .
โปรแกรมที่เข้าถึงฟีดเหล่านี้และอ่านและแสดงเนื้อหาเรียกว่า โปรแกรมอ่าน RSS . คุณสามารถสร้างโปรแกรมอ่าน RSS อย่างง่ายใน JavaScript ในบทช่วยสอนนี้เราจะดูวิธีการ.
โครงสร้างของฟีด RSS ฟีด RSS มีองค์ประกอบราก เรียกว่า รวมถึงองค์ประกอบย่อยมากมาย มีเนื้อหาแบบกระจายของเว็บไซต์.
ฟีดมักจะมีบางอย่าง ข้อมูลพื้นฐาน เช่นชื่อเรื่อง URL และคำอธิบายของเว็บไซต์และของ โพสต์บทความหรือเนื้อหาอื่น ๆ ที่อัพเดตแล้ว ของเว็บไซต์นั้น ข้อมูลเหล่านี้อยู่ใน </code>, <code><link></code>, และ <code><description></code> องค์ประกอบตามลำดับ.</p> <p>เมื่อแท็กเหล่านี้ <strong>ปัจจุบันโดยตรงภายใน <code><channel></code></strong>, พวกเขาถือกรรมสิทธิ์ URL และคำอธิบายของเว็บไซต์ เมื่อพวกเขากำลัง <strong>ปัจจุบันอยู่ภายใน <code><item></code></strong> ที่ <strong>เก็บข้อมูลเกี่ยวกับโพสต์ที่อัพเดท</strong>, พวกเขาแสดงข้อมูลเดียวกันก่อน แต่เนื้อหาส่วนบุคคลที่แต่ละคน <code><item></code> แทน.</p> <p>นอกจากนี้ยังมีบางส่วน <strong>องค์ประกอบเสริม</strong> ที่อาจมีอยู่ในฟีด RSS ให้ข้อมูลเสริมเช่นรูปภาพหรือลิขสิทธิ์ของเนื้อหาที่แจกจ่าย คุณสามารถเรียนรู้เกี่ยวกับพวกเขาในสิ่งนี้ <strong>ข้อมูลจำเพาะ RSS 2.0</strong> ที่ cyber.harvard.edu.</p> <p>นี่คือตัวอย่างของวิธีการ <strong>RSS feed ของเว็บไซต์</strong> อาจมีลักษณะเช่น:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat เคล็ดลับการออกแบบการสอนและแรงบันดาลใจ en-US -
เห็นภาพสไตล์ชีท CSS ใด ๆ ด้วย CSS Stats เคยสงสัยไหมว่ามีกฎ CSS กี่ตัวในสไตล์ชีท? หรือคุณเคยต้องการที่จะเห็น ... 18/05/2017 -
Amazon Echo Show - อุปกรณ์อัจฉริยะล่าสุดที่ขับเคลื่อนด้วย Alexa อเมซอนไม่ใช่คนแปลกหน้ากับแนวคิดของระบบบ้านอัจฉริยะที่มีผู้ช่วยดิจิตอลในตัว หลังจากทั้งหมด ... 17/05/2017 ดึงข้อมูลฟีด เราจำเป็นต้อง ดึงข้อมูลฟีด ด้วยแอปพลิเคชันอ่าน RSS ของเรา ในเว็บไซต์ URL ของฟีด RSS สามารถเป็นได้ พบภายใน แอพลิเคชัน / rss + XML ชนิด . ตัวอย่างเช่นคุณจะพบลิงค์ฟีด RSS ต่อไปนี้ที่ Hongkiat.com.
ก่อนอื่นเรามาดูวิธีการ รับ URL ฟีดของเว็บไซต์ ใช้ JavaScript.
fetch (websiteUrl) .then ((res) => res.text (). จากนั้น ((htmlTxt) => var domParser = DOMParser ใหม่ () ให้ doc = domParser.parseFromString (htmlTxt, 'ข้อความ / html') var feedUrl = doc.querySelector ('ลิงก์ [ประเภท = "แอปพลิเคชัน / rss + xml"]'). href)). catch (() => console.error ('ข้อผิดพลาดในการดึงเว็บไซต์') สามารถดึงข้อมูล ()ดึงข้อมูลทรัพยากรแบบอะซิงโครนัส . ใช้ URL ของทรัพยากรเป็นอาร์กิวเมนต์ (URL ของเว็บไซต์ในรหัสของเรา) มัน ส่งคืน คำมั่นสัญญา วัตถุดังนั้นเมื่อวิธีดึงข้อมูลเว็บไซต์สำเร็จ (เช่น คำมั่นสัญญา เป็นจริง), ฟังก์ชั่นแรกภายใน แล้ว () คำแถลง จัดการกับการตอบสนองที่ดึงมา (ความละเอียด ในโค้ดด้านบน).
การตอบสนองที่ดึงมาได้นั้น อ่านอย่างเต็มที่ในสตริงข้อความ ใช้ ข้อความ ()ข้อความ HTML ของเว็บไซต์ที่เราเรียกมา . ชอบ สามารถดึงข้อมูล (), ข้อความ () ด้วย ส่งคืน คำมั่นสัญญา วัตถุ . ดังนั้นเมื่อสร้างข้อความตอบกลับสำเร็จจากสตรีมการตอบกลับ, แล้ว () จะจัดการข้อความตอบกลับนั้น (htmlText ในโค้ดด้านบน).
เมื่อข้อความ HTML ของเว็บไซต์พร้อมใช้งานเราจะใช้ DOMParser APIแยกมันเป็นเอกสาร DOM . DOMParser วิเคราะห์คำสตริงข้อความ XML / HTML ลงในเอกสาร DOM วิธีการของมัน, parseFromString (), ใช้เวลา สองข้อโต้แย้ง : ข้อความที่จะแยกวิเคราะห์ และ ชนิดของเนื้อหา .
จากนั้นเราก็สร้างเอกสาร DOM ขึ้นมา หา href ค่าของที่เกี่ยวข้อง ใช้ querySelector () วิธีการเพื่อรับ URL ของฟีด.
การแยกและการแสดงฟีด เมื่อเราได้รับฟีด URL ของเว็บไซต์แล้วเราจำเป็นต้อง ดึงข้อมูลและอ่านเอกสาร RSS พบได้ที่ URL นั้น.
fetch (feedUrl) .then ((res) => res.text (). แล้ว ((xmlTxt) => var domParser = DOMParser ใหม่ () ให้ doc = domParser.parseFromString (xmlTxt, 'text / xml') doc .querySelectorAll ('item'). forEach ((รายการ) => ให้ h1 = document.createElement ('h1') h1.textContent = item.querySelector ('ชื่อเรื่อง') textContent document.querySelector ('output') appendChild (h1)))) เช่นเดียวกับที่เราดึงข้อมูลและแยกวิเคราะห์เว็บไซต์ตอนนี้เรา รับและแยกวิเคราะห์ฟีด XML ลงในเอกสาร DOM . เพื่อให้บรรลุเป้าหมายนี้เราใช้ 'ข้อความ / XML' ประเภทเนื้อหาใน parseFromString () วิธี.
ในเอกสารที่แยกวิเคราะห์เรา เลือกทั้งหมด ใช้ querySelectorAll วิธีการและ วนรอบแต่ละอัน .
ภายในแต่ละองค์ประกอบเราทำได้ เข้าถึงแท็ก ชอบ </code>, <code><description></code>, และ <code><link></code>, ที่กำลังแบกเนื้อหาฟีด และแอปพลิเคชั่นตัวอ่าน RSS อย่างง่ายของเราก็เสร็จสิ้นคุณสามารถจัดรูปแบบเนื้อหาของฟีดที่ดึงมาได้ตามที่คุณต้องการ.</p> <h4>การสาธิต Github</h4> <p>คุณสามารถตรวจสอบ <strong>รุ่นรายละเอียดเพิ่มเติม</strong> ของรหัสที่ใช้ในโพสต์นี้ใน repo Github ของเรา รุ่นที่มีรายละเอียดมากขึ้น <strong>ดึงข้อมูลฟีดสามรายการ</strong> (Mozilla Hacks, Hongkiat และบล็อก Webkit) <strong>ใช้ไฟล์ JSON</strong> และยังเพิ่มสไตล์ CSS บางอย่างลงในตัวอ่าน RSS.</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6284591903398394"
data-ad-slot="6432271471"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
</div>
</div>
<div class="col-md-4">
<div class="bar">
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6284591903398394"
data-ad-slot="6432271471"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="barpost">
<div class="bar-post-img"><a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html"><img src="//savtec.org/img/images_7/how-to-create-a-secretly-disguised-folder-without-extra-software_11.png" alt=""></a></div>
<div class="bar-post-h1"> <a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html">วิธีการสร้างโฟลเดอร์ปลอมตัวอย่างลับๆโดยไม่มีซอฟต์แวร์เพิ่มเติม</a> </div>
</div>
<div class="barpost">
<div class="bar-post-img"><a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html"><img src="//savtec.org/img/images/how-to-create-a-secured-and-locked-folder-in-windows-xp.jpg" alt=""></a></div>
<div class="bar-post-h1"> <a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html">วิธีสร้างโฟลเดอร์ที่ปลอดภัยและถูกล็อคใน Windows XP</a> </div>
</div>
<div class="barpost">
<div class="bar-post-img"><a href="/articles/coding/how-to-create-a-responsive-navigation.html"><img src="//savtec.org/img/images_2/how-to-create-a-responsive-navigation.jpg" alt=""></a></div>
<div class="bar-post-h1"> <a href="/articles/coding/how-to-create-a-responsive-navigation.html">วิธีสร้าง Navigation Responsive</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="prevnext">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="post">
<div class="prevnext-title">บทความต่อไป</div>
<div class="post-img"><a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html">
<img src="//savtec.org/img/images_7/how-to-create-a-search-shortcut-on-the-desktop-in-windows-81_6.png" alt="">
</a></div>
<div class="post-h1"> <a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html">วิธีสร้างทางลัดการค้นหาบนเดสก์ท็อปใน Windows 8.1</a> </div>
</div>
</div>
<div class="col-md-6">
<div class="post">
<div class="prevnext-title">บทความก่อนหน้า</div>
<div class="post-img"><a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html">
<img src="//savtec.org/img/images/how-to-create-a-routine-with-amazon-alexa.jpg" alt="">
</a></div>
<div class="post-h1"> <a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html">วิธีการสร้างกิจวัตรประจำวันด้วย Amazon Alexa</a> </div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="langs-block">
<ul class="langs-list">
<li class="site-lang"><a href="https://www.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TH"></i></a></li>
<li class="site-lang"><a href="https://de.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DE"></i></a></li>
<li class="site-lang"><a href="https://ar.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-AE"></i></a></li>
<li class="site-lang"><a href="https://bg.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-BG"></i></a></li>
<li class="site-lang"><a href="https://cs.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-CZ"></i></a></li>
<li class="site-lang"><a href="https://da.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DK"></i></a></li>
<li class="site-lang"><a href="https://el.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-GR"></i></a></li>
<li class="site-lang"><a href="https://es.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ES"></i></a></li>
<li class="site-lang"><a href="https://et.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-EE"></i></a></li>
<li class="site-lang"><a href="https://fi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FI"></i></a></li>
<li class="site-lang"><a href="https://fr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FR"></i></a></li>
<li class="site-lang"><a href="https://he.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IL"></i></a></li>
<li class="site-lang"><a href="https://hi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IN"></i></a></li>
<li class="site-lang"><a href="https://hr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HR"></i></a></li>
<li class="site-lang"><a href="https://hu.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HU"></i></a></li>
<li class="site-lang"><a href="https://id.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ID"></i></a></li>
<li class="site-lang"><a href="https://it.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IT"></i></a></li>
<li class="site-lang"><a href="https://ja.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-JP"></i></a></li>
<li class="site-lang"><a href="https://ko.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-KR"></i></a></li>
<li class="site-lang"><a href="https://lt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LT"></i></a></li>
<li class="site-lang"><a href="https://lv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LV"></i></a></li>
<li class="site-lang"><a href="https://ms.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-MY"></i></a></li>
<li class="site-lang"><a href="https://nl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NL"></i></a></li>
<li class="site-lang"><a href="https://no.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NO"></i></a></li>
<li class="site-lang"><a href="https://pl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PL"></i></a></li>
<li class="site-lang"><a href="https://pt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PT"></i></a></li>
<li class="site-lang"><a href="https://ro.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RO"></i></a></li>
<li class="site-lang"><a href="https://ru.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RU"></i></a></li>
<li class="site-lang"><a href="https://sk.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SK"></i></a></li>
<li class="site-lang"><a href="https://sl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SI"></i></a></li>
<li class="site-lang"><a href="https://sr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RS"></i></a></li>
<li class="site-lang"><a href="https://sv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SE"></i></a></li>
<li class="site-lang"><a href="https://tr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TR"></i></a></li>
<li class="site-lang"><a href="https://ua.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-UA"></i></a></li>
<li class="site-lang"><a href="https://vi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-VN"></i></a></li>
</ul>
</div>
<div class="row align-items-center">
<div class="col-md-3">
© <script>
var currentTime = new Date();
var year = currentTime.getFullYear();
document.write(year);
</script> <a href="/">Savtec</a>
</div>
<div class="col-md-9">
ข้อมูลที่เป็นประโยชน์และเคล็ดลับการพัฒนาเว็บ การเขียนโปรแกรม, ออกแบบเว็บไซต์, CSS, HTML, JAVASCRIPT กำหนดค่าและติดตั้ง WINDOWS อีกครั้ง การสร้างเว็บไซต์และแอปพลิเคชันตั้งแต่เริ่มต้น
</div>
</div>
</div>
</footer>
<link rel="stylesheet" href="css/flags.css">
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
</body>
</html>
