Trang chủ » Mã hóa » Cách tạo ứng dụng RSS Reader trong JavaScript

    Cách tạo ứng dụng RSS Reader trong JavaScript

    RSS (Cung cấp thực sự đơn giản) là một định dạng chuẩn được sử dụng bởi các nhà xuất bản trực tuyến để cung cấp nội dung của họ đến các trang web và dịch vụ khác. An Tài liệu RSS, còn được gọi là nuôi, là một Tài liệu XML mang nội dung mà nhà xuất bản muốn phân phối.

    Nguồn cấp dữ liệu RSS có sẵn trên hầu hết các trang web tin tức và blog trực tuyến cho độc giả của họ luôn cập nhật với nội dung của họ. Họ cũng có thể được tìm thấy trên trang web không dựa trên văn bản chẳng hạn như YouTube, nơi bạn có thể sử dụng nguồn cấp dữ liệu của kênh YouTube để thông báo về các video mới nhất.

    Các chương trình truy cập các nguồn cấp dữ liệu này, và đọc và hiển thị nội dung của chúng được gọi Trình đọc RSS. Bạn có thể tạo một chương trình đọc RSS đơn giản bằng JavaScript. Trong hướng dẫn này, chúng ta sẽ xem cách.

    Cấu trúc của một nguồn cấp dữ liệu RSS

    Một nguồn cấp dữ liệu RSS có một yếu tố gốc gọi là , tương tự như thẻ tìm thấy trong các tài liệu HTML. Bên trong thẻ, có một yếu tố, loại như trong HTML, đó bao gồm nhiều yếu tố phụ chứa nội dung phân tán của trang web.

    Một thức ăn thường mang một số thông tin cơ bản chẳng hạn như tiêu đề, URL và mô tả của trang web và của bài viết cập nhật cá nhân, bài viết hoặc nội dung khác của trang web đó. Những thông tin này được tìm thấy trong </code>, <code><link></code>, và <code><description></code> các yếu tố tương ứng.</p> <p>Khi các thẻ này là <strong>trực tiếp trình bày bên trong <code><channel></code></strong>, họ giữ tiêu đề, URL và mô tả của trang web. Khi họ <strong>hiện tại bên trong <code><item></code></strong> cái đó <strong>giữ thông tin về các bài viết được cập nhật</strong>, chúng đại diện cho cùng một thông tin như trước đây nhưng nội dung riêng lẻ mà mỗi nội dung <code><item></code> đại diện.</p> <p>Ngoài ra còn có một số <strong>yếu tố tùy chọn</strong> có thể có trong nguồn cấp dữ liệu RSS, cung cấp thông tin bổ sung như hình ảnh hoặc bản quyền đối với nội dung được phân phối. Bạn có thể tìm hiểu về chúng trong này <strong>Đặc tả RSS 2.0</strong> tại cyber.harvard.edu.</p> <p>Đây là một ví dụ về cách <strong>Nguồn cấp dữ liệu RSS của một trang web</strong> có thể trông giống như:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hồng Kông https://www.hongkiat.com/ Mẹo thiết kế, hướng dẫn và truyền cảm hứng en-chúng tôi Trực quan hóa bất kỳ Biểu định kiểu CSS nào với Chỉ số CSS Bạn đã bao giờ tự hỏi có bao nhiêu quy tắc CSS trong một bản định kiểu chưa? Hoặc bạn đã bao giờ muốn xem 18/5/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - Thiết bị thông minh mới nhất do Alexa cung cấp Amazon không xa lạ gì với khái niệm hệ thống nhà thông minh với trợ lý kỹ thuật số nhúng. Rốt cuộc là thế 17/5/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

    Lấy thức ăn

    Chúng ta cần phải lấy thức ăn với ứng dụng đọc RSS của chúng tôi. Trên trang web, URL của nguồn cấp RSS có thể là tìm thấy bên trong sử dụng thẻ ứng dụng / rss + xml kiểu. Ví dụ: bạn sẽ tìm thấy liên kết nguồn cấp RSS sau đây trên Hongkiat.com.

    Trước tiên, hãy xem làm thế nào để lấy URL nguồn cấp dữ liệu của một trang web sử dụng JavaScript.

     tìm nạp (websiteUrl) .then ((res) => res.text (). sau đó ((htmlTxt) => var domParser = new DOMParser () let doc = domParser.parseFromString (htmlTxt, 'text / html') feedUrl = doc.querySelector ('link [type = "application / rss + xml"]'). href)). Catch (() => console.error ('Lỗi khi tìm nạp trang web'))

    Các lấy () phương pháp là một phương pháp toàn cầu lấy không đồng bộ một tài nguyên. Nó lấy URL của tài nguyên làm đối số (URL của trang web trong mã của chúng tôi). Nó trả lại một Hứa vì vậy, khi phương thức tìm nạp thành công trang web (nghĩa là Hứa được hoàn thành), chức năng đầu tiên bên trong sau đó() tuyên bố xử lý các phản hồi tìm nạp (độ phân giải trong mã trên).

    Phản hồi được tải về sau đó đọc đầy đủ vào một chuỗi văn bản sử dụng bản văn() phương pháp. Văn bản này đại diện cho Văn bản HTML của trang web tìm nạp của chúng tôi. Như lấy (), bản văn() cũng thế trả lại một Hứa vật. Vì vậy, khi nó tạo thành công một văn bản phản hồi từ luồng phản hồi, sau đó() sẽ xử lý văn bản phản hồi đó (htmlText trong mã trên).

    Khi văn bản HTML của trang web có sẵn, chúng tôi sử dụng API DOMParser đến phân tích nó thành một tài liệu DOM. DOMParser phân tích chuỗi văn bản XML / HTML thành tài liệu DOM. Phương pháp của nó, parseFromString (), lấy hai đối số: các văn bản được phân tích cú pháp và loại nội dung.

    Sau đó, từ tài liệu DOM đã tạo, chúng tôi tìm href giá trị của có liên quan nhãn sử dụng querySelector () phương thức để có được URL của nguồn cấp dữ liệu.

    Phân tích cú pháp và hiển thị nguồn cấp dữ liệu

    Khi chúng tôi có URL nguồn cấp dữ liệu của trang web, chúng tôi cần phải tìm nạp và đọc tài liệu RSS tìm thấy tại URL đó.

     tìm nạp (feedUrl) .then ((res) => res.text (). then ((xmlTxt) => var domParser = new DOMParser () let doc = domParser.parseFromString (xmlTxt, 'text / xml') .querySelector ALL ('item'). forEach ((item) => let h1 = document.createEuity ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output). appendChild (h1))))

    Theo cùng một cách như chúng tôi đã tìm nạp và phân tích trang web, bây giờ chúng tôi lấy và phân tích nguồn cấp dữ liệu XML vào tài liệu DOM. Để đạt được điều này, chúng tôi sử dụng 'văn bản / xml' loại nội dung trong parseFromString () phương pháp.

    Trong tài liệu được phân tích cú pháp, chúng tôi chọn tất cả yếu tố sử dụng querySelector ALL phương pháp và lặp qua từng.

    Bên trong mỗi yếu tố, chúng ta có thể thẻ truy cập như </code>, <code><description></code>, và <code><link></code>, đó là mang nội dung thức ăn. Và, ứng dụng đọc RSS đơn giản của chúng tôi đã hoàn tất, bạn có thể định kiểu nội dung của các nguồn cấp dữ liệu được tìm nạp theo ý muốn.</p> <h4>Bản demo của Github</h4> <p>Bạn có thể kiểm tra <strong>phiên bản chi tiết hơn</strong> của mã được sử dụng trong bài viết này trong repo Github của chúng tôi. Phiên bản chi tiết hơn <strong>lấy ba nguồn cấp dữ liệu</strong> (Mozilla Hacks, Hongkiat và blog Webkit) <strong>sử dụng tệp JSON</strong> và cũng thêm một số kiểu CSS vào trình đọc 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">Cách tạo một thư mục được ngụy trang bí mật mà không cần phần mềm bổ sung</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">Cách tạo thư mục bảo mật và khóa trong 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">Cách tạo điều hướng đáp ứng</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">Bài viết tiếp theo</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">Cách tạo lối tắt tìm kiếm trên màn hình nền trong Windows 8.1</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Bài báo trước</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">Cách tạo một thói quen với 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"> Thông tin hữu ích và lời khuyên phát triển web. Lập trình, thiết kế web, CSS, HTML, JAVASCRIPT. Cấu hình và cài đặt lại WINDOWS. Tạo các trang web và ứng dụng từ đầu. </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>