Почетна » Цодинг » Како креирати апликацију РСС читача у ЈаваСцрипту

    Како креирати апликацију РСС читача у ЈаваСцрипту

    РСС (Реалли Симпле Синдицатион) је стандардизовани формат који користе издавачи на мрежи синдикат њиховог садржаја другим сајтовима и услугама. Ан РСС доцумент, такође познат као а напајање, је КСМЛ доцумент са садржајем који издавач жели да дистрибуира.

    РСС извори доступни су на готово свим веб сајтовима и блоговима на мрежи за читаоца останите у току са њиховим садржајем. Могу се наћи и на веб сајтове који нису засновани на тексту као што је ИоуТубе, где можете да користите феед ИоуТубе канала информисан о најновијим видео записима.

    Позивају се програми који приступају овим феедовима и читају и приказују њихов садржај РСС читачи. Можете креирати једноставан РСС читач у ЈаваСцрипт-у. У овом водичу ћемо видети како.

    Структура РСС феед-а

    РСС феед има коријенски елемент зове , слично налази се у ХТМЛ документима. Унутар таг, постоји елемент, врста као у ХТМЛ-у укључује многе поделементе садржи дистрибуирани садржај веб сајта.

    Храна обично носи нешто основне информације као што су наслов, УРЛ и опис веб сајта и појединачне ажуриране постове, чланке или друге садржаје тог веб сајта. Ове информације се налазе у </code>, <code><link></code>, и <code><description></code> елементима.</p> <p>Када су те ознаке <strong>директно присутни унутра <code><channel></code></strong>, они имају наслов, УРЛ и опис веб сајта. Када су <strong>присутан унутра <code><item></code></strong> то <strong>садржи информације о ажурираним постовима</strong>, они представљају исту информацију као и раније, али и појединачне садржаје који сваки од њих <code><item></code> заступати.</p> <p>Има и неких <strong>изборни елементи</strong> који могу бити присутни у РСС фееду, пружајући додатне информације као што су слике или ауторска права на дистрибуирани садржај. О томе можете сазнати у овоме <strong>РСС 2.0 спецификација</strong> ат цибер.харвард.еду.</p> <p>Ево примера како <strong>РСС феед веб сајта</strong> можда изгледа овако:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Хонгкиат хттпс://ввв.хонгкиат.цом/ Савјети за дизајн, водич и инспирација ен-ус Замислите било који ЦСС стил са ЦСС статистиком Јесте ли се икада запитали колико је ЦСС правила у стилу? Или сте икада желели да видите ... 18/05/2017 хттпс://ввв.хонгкиат.цом/блог/цсс-стилесхеет-витх-цсс-статс/ Амазон Ецхо Схов - Најновији паметни уређај са погоном на Алека Амазон није чудан концепту паметних кућних система са уграђеним дигиталним помоћником. На крају крајева,… 17/05/2017 хттпс://ввв.хонгкиат.цом/блог/алека-девице-амазон-ецхо-схов/

    Дохваћање хране

    Морамо да дохвати феед са нашом апликацијом РСС читача. На веб локацији може бити УРЛ РСС фееда пронађено унутар помоћу ознаке апплицатион / рсс + кмл тип. На пример, наћи ћете следећу везу са РСС каналом на сајту Хонгкиат.цом.

    Прво, да видимо како добијте УРЛ адресу веб сајта усинг ЈаваСцрипт.

     фетцх (вебситеУрл). тхен ((рес) => рес.тект ().) ((хтмлТкт) => вар домПарсер = нови ДОМПарсер () нека доц = домПарсер.парсеФромСтринг (хтмлТкт, 'тект / хтмл') вар феедУрл = доц.куериСелецтор ('линк [типе = "апплицатион / рсс + кмл"]'). хреф)). цатцх (() => цонсоле.еррор ('Грешка при дохваћању веб локације'))

    Тхе фетцх () метода је глобални метод који асинхроно преузима ресурс. УРЛ ресурса узима као аргумент (УРЛ веб сајта у нашем коду). То враћа а Промисе објекта, тако да када метод успешно дође до веб сајта (тј Промисе је испуњена), прва функција унутар онда() изјава рукује преузетим одговором (рес у горњем коду).

    Добијен одговор је тада потпуно читати у текстуални низ помоћу текст () метода. Овај текст представља ХТМЛ текст наше преузете веб-локације. Као фетцх (), текст () такође враћа а Промисе објекат. Дакле, када успешно креира текст одговора из одговора, онда() обрадиће текст одговора (хтмлТект у горњем коду).

    Када је ХТМЛ текст веб-локације доступан, користимо га ДОМПарсер АПИ до анализирати га у ДОМ документ. ДОМПарсер анализира КСМЛ / ХТМЛ текстуални низ у ДОМ документ. Његова метода, парсеФромСтринг (), траје два аргумента: тхе текст који треба анализирати анд тхе Тип садржаја.

    Затим, из креираног ДОМ документа, ми финд тхе хреф вриједност релевантне таг помоћу куериСелецтор () да бисте добили УРЛ фееда.

    Анализирање и приказивање фееда

    Када добијемо УРЛ адресу веб сајта, морамо преузмите и прочитајте РСС документ пронађено на тој УРЛ адреси.

     фетцх (феедУрл). тхен ((рес) => рес.тект ().) ((кмлТкт) => вар домПарсер = нови ДОМПарсер () нека доц = домПарсер.парсеФромСтринг (кмлТкт, 'тект / кмл') доц форЕацх ((итем) => нека х1 = доцумент.цреатеЕлемент ('х1') х1.тектЦонтент = итем.куериСелецтор ('титле'). тектЦонтент доцумент.куериСелецтор ('оутпут'). аппендЦхилд (х1))))

    На исти начин као што смо преузимали и анализирали веб страницу, сада смо добијте и анализирајте КСМЛ феед у ДОМ документ. Да бисмо то постигли, користимо 'тект / кмл' тип садржаја у парсеФромСтринг () метода.

    У анализираном документу, ми изаберите све елементи помоћу куериСелецторАлл метода и кроз сваку петљу.

    Унутар сваког елемента можемо приступне ознаке као </code>, <code><description></code>, и <code><link></code>, који носе садржај хране. И наша једноставна РСС читач апликација је готова, можете стилизовати садржај преузетих феедова како желите.</p> <h4>Гитхуб демо</h4> <p>Можете погледати <strong>детаљнија верзија</strong> кода који се користи у овом посту у нашем Гитхуб репо-у. Детаљнија верзија <strong>дохвата три фееда</strong> (Мозилла Хацкс, Хонгкиат и Вебкит блог) <strong>користећи ЈСОН датотеку</strong> и додаје неке ЦСС стилове у РСС читач.</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">Како створити заштићену и закључану мапу у суставу Виндовс КСП</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">Како креирати прилагодљиву навигацију</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">Креирање пречице за претраживање на радној површини у оперативном систему Виндовс 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">Како створити рутину с Амазон Алека</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"> Корисни савети и савети за развој веба. Програмирање, веб дизајн, ЦСС, ХТМЛ, ЈАВАСЦРИПТ. Конфигуришите и поново инсталирајте ВИНДОВС. Израда сајтова и апликација од почетка. </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>