Homepage » Coding » RSS-olvasó alkalmazás létrehozása a JavaScript-ben
RSS-olvasó alkalmazás létrehozása a JavaScript-ben
RSS (igazán egyszerű szindikáció) egy szabványosított formátum, amelyet az online kiadók használnak szindikálja tartalmukat más weboldalakhoz és szolgáltatásokhoz. egy RSS dokumentum, más néven a takarmány, egy XML dokumentum a kiadó által terjeszteni kívánt tartalmat.
Az RSS-hírcsatornák szinte minden online híroldalon és blogon elérhetőek az olvasók számára maradjon naprakész a tartalmukkal. Ezek is megtalálhatók nem szöveg alapú webhelyek például a YouTube-on, ahol a YouTube-csatorna feedjét használhatja a legújabb videókról.
Azokat a programokat hívják meg, amelyek hozzáférnek az ilyen hírcsatornákhoz, és elolvasják és megjelenítik azok tartalmát RSS-olvasók. Egy egyszerű RSS-olvasóprogramot hozhat létre a JavaScript-ben. Ebben a bemutatóban megtudjuk, hogyan kell.
Az RSS-hírcsatorna felépítése
RSS-hírcsatorna van egy gyökér elem hívott , hasonló a a HTML dokumentumokban található címke. Benne címke, van egy elem, hasonló HTML-ben számos alelemet tartalmaz a webhely elosztott tartalmát tartalmazza.
A takarmány általában néhányat hordoz alapinformációk például a cím, az URL és a weboldal és a egyedi frissített bejegyzések, cikkek vagy egyéb tartalom honlapján. Ezek az információk megtalálhatók a </code>, <code><link></code>, és <code><description></code> elemeket.</p> <p>Amikor ezek a címkék vannak <strong>közvetlenül jelen van <code><channel></code></strong>, megtartják a webhely címét, URL-jét és leírását. Mikor ők <strong>jelen van benne <code><item></code></strong> hogy <strong>tartja a frissített bejegyzésekre vonatkozó információkat</strong>, ugyanazokat az információkat képviselik, mint az előző, de az egyes tartalmaké <code><item></code> képvisel.</p> <p>Van néhány is <strong>választható elemek</strong> amely egy RSS-hírcsatornában jelen lehet, kiegészítő információkat, például képeket vagy szerzői jogokat biztosítva az elosztott tartalomhoz. Tudod megismerkedni velük ebben <strong>RSS 2.0 specifikáció</strong> a cyber.harvard.edu oldalon.</p> <p>Itt van egy minta arról, hogy a <strong>Egy weboldal RSS-feedje</strong> úgy nézhet ki, mint:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Tervezési tippek, bemutató és inspirációken-usBármely CSS-stíluslap megjelenítése CSS statisztikávalMindig azon tűnődtem, hogy hány CSS szabály van a stíluslapon? Vagy valaha is látni akarta… 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - A legújabb Alexa-alapú Smart DeviceAz Amazon nem idegen a beágyazott digitális asszisztenssel rendelkező intelligens otthoni rendszerek fogalmának. Végtére is, a… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/
A feed beolvasása
Meg kell húzza be a feedet RSS-olvasó alkalmazásunkkal. Egy weboldalon az RSS-hírcsatorna URL-címe lehet belül található címke a application / rss + xml típus. Például a következő RSS-hírcsatorna linket találja a Hongkiat.com-on.
Először nézzük meg, hogyan kap egy webhely feed URL-jét JavaScript használatával.
fetch (websiteUrl) .then ((res) => res.text (). majd ((htmlTxt) => var domParser = új DOMParser () legyen doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('link [type = "application / rss + xml"]'). href)) fogás (() => console.error ('Hiba a webhely lekérésekor'))
A fetch () módszer egy globális módszer aszinkron módon lekér egy erőforrást. Az erőforrás URL-jét argumentumként veszi (a webhely URL-je a kódunkban). Azt visszatér a Ígéret objektum, így amikor a módszer sikeresen beolvassa a webhelyet (azaz a Ígéret teljesül), az első funkció a azután() nyilatkozat kezeli a beolvasott választ (res a fenti kódban).
Ekkor a beolvasott válasz teljesen olvasható szöveges karakterláncba használni a szöveg() eljárás. Ez a szöveg a Letöltött webhelyünk HTML-szövege. Mint fetch (), szöveg() is visszatér a Ígéret tárgy. Tehát, ha sikeresen létrehoz egy válaszszöveget a válaszfolyamból, azután() kezelni fogja a válasz szövegét (htmlText a fenti kódban).
Miután elérhetővé vált a weboldal HTML szövege, használjuk DOMParser API nak nek DOM dokumentumba elemzi. DOMParser elemzi az XML / HTML szövegláncot egy DOM dokumentumba. Módszere, parseFromString (), vesz két érv: a elemezni kívánt szöveget és a tartalom típus.
Ezután a létrehozott DOM dokumentumból mi Találd meg href értékét címke használni a querySelector () módszer, hogy megkapja a feed URL-jét.
A feed elemzése és megjelenítése
Miután megkaptuk a webhely feed URL-jét, szükségünk van rá letölteni és olvasni az RSS dokumentumot az URL-en található.
fetch (feedUrl) .then ((res) => res.text (). majd ((xmlTxt) => var domParser = új DOMParser () legyen doc = domParser.parseFromString (xmlTxt, 'text / xml') doc .querySelectorAll ('item') .EE ((item) => let h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output'). appendChild (h1))))
Ugyanúgy, mint a webhely feltöltése és elemzése, most mi kapja meg és elemzi az XML feedet egy DOM dokumentumba. Ennek eléréséhez a 'Text / xml' tartalom típusa a parseFromString () eljárás.
Az elemzett dokumentumban mi válassza ki az összeset elemek használni a querySelectorAll módszer és hurok keresztül.
