Den typiska processen att skapa en dynamisk matningslista kräver en viss typ av backend-språk. Självklart kan det fungera bra om du är bekant med Rails eller PHP, men jag vill presentera en metod för att dra RSS-flöden via jQuery. Problemet är att få tillgång till Ajax-förfrågningar från en extern server och sedan konvertera den här XML-informationen till något lite lättare att läsa.
Vi kommer att fokusera på Google Feed API som är mycket lättare än det ser ut. Det finns ett antal anpassade möjligheter att spela med alternativen och få tillgång till andra alternativa teman. Allt vi behöver dra är den första sidan av resultaten för matningsresultatet, tillsammans med varje titel och URL-länken. När du har det här skriptet fungerar det väldigt lätt att anpassa layouten och till och med inkludera lite innehåll från flödet! Kolla in min provdemo nedan för att få en uppfattning om vad vi ska skapa.
Live Demo - Hämta källkod
Komma igång
Det första steget är att göra ett grundläggande dokument inklusive jQuery-biblioteket som en resurs. Jag kommer att använda några funktioner som publiceras på Stack Overflow som hjälper oss att uppnå detta RSS-flöde. Typiskt när du skriver en webbapp så här behöver du åtkomst till cross-domain-parsing via något backend-språk. PHP är ofta den enklaste lösningen för webbutvecklare.
Eftersom vi använder Google Feed API, kommer det att ta plats som vårt backend-skript. Således kan allt läsas via jQuery Ajax och konverteras sedan till JSON så att vi kan analysera bättre. Här är mitt dokumenthuvud som innehåller jQuery tillsammans med ett anpassat manus parser.js.
Det bästa med min kod är hur vi kan fylla i allt via JavaScript. Alla interna RSS-element på sidan kommer att skrivas in i HTML, men det kommer inte att visas i dokumentkällan. Allt innehåll publiceras dynamiskt och du kan snabbt redigera matningskällorna för att ändra på varje sida omladdning.
Detta är hela helheten av kroppsinnehållet. Varje klass av .feedcontainer används för att tillämpa samma grundläggande stilar på rubriker och länkar. ID-namnen riktas via jQuery så att vi kan köra vår anpassade RSS-funktion och sedan lägga till nytt innehåll med metoden .html ().
RSS-analysering i jQuery
Vi kan hoppa över de flesta av CSS-stilar eftersom de är ganska grundläggande. Ta en titt på mitt stilark om du vill se hur någon av justeringen är klar. Men flytta över till parser.js Det finns två funktioner där man specifikt hanterar RSS / JSON-konvertering. Den andra är en kapitaliseringsfunktion som automatiskt tvingar RSS-feed-titeln? attribut att stanna kapitaliserad.
Detta parseRSS () funktionen publicerades i en relaterad Stack Overflow-fråga och det beskriver en perfekt lösning som körs endast med jQuery. Vi behöver fortfarande en server eftersom metoden .ajax () inte kan köras utan en HTTP-ström. Men du behöver inte stöd för andra språk som är en stor lättnad. Idealiskt kan vi lita på att Google ska hålla det här i obestämd tid eftersom det är en enorm resurs för utvecklare.
Funktionskoden själv är lätt att förstå om du är bekant med .ajax (). Först passerar vi i webbadressen för att fråga, vilken är den avlägsna Google Feed API-länken. Vi behöver data typ inställd som JSON och efter det framgångsrika ajaxsamtalet bör vi köra en ny funktion för att visa HTML-innehållet. Observera att parametern vi skickar heter data som håller JSON-svaret.
Response Loop
Observera att jag också lämnat en kommentar med koden console.log (data.responseData.feed) om du vill visa produktionen av alla JSON-innehåll. Det är möjligt att visa mer än bara fodertitel och URL-länkar. Men jag ville hålla det här exemplet trimmet av onödiga krusiduller. Du har möjlighet att lägga till fler saker på egen vilja direkt från denna funktion.
Inom den framgångsrika ajax-samtalfunktionen har jag inbäddat en .each () -lopp för att iterera över objekten i flödet. Observera att denna matris kan nås via data.responseData.feed.entries som vi blir till en nyckel och värdepar. Det är ganska enkelt eftersom vi bara behöver en strängvariabel för att hålla HTML. Sedan använder jQuery .append () allt innehåll läggs tillbaka till sidan.
Titelutgången ligger inte inom denna .each () loop eftersom den bara ska läggas till en gång för varje flöde. Men också det använder en annan anpassad funktion som är skriven för att aktivera varje första bokstav inom någon JavaScript-sträng. Några av RSS-flödena kommer att ha alla bokstäver i små bokstäver, vilket kan se konstigt ut. Här är funktionskoden och den är väldigt kort.
Tänk på att RSS-flöden kan ha mycket mer information att publicera. Ibland hittar du även miniatyrbilder som är inbäddade i XML-flödet. Detta gör det möjligt att inkludera artikelbilder i din egen RSS webapp! Möjligheterna är praktiskt taget oändliga med enkel åtkomst till Googles Feed API.
Live Demo - Hämta källkod
Slutgiltiga tankar
RSS-flöden är fortfarande mycket populära bland webbutvecklare eftersom det är en vanlig metod att överföra data mellan webbplatser.Detta gör det möjligt för Internet-marknadsförare att enkelt publicera uppdateringar på Twitter eller Facebook direkt från webbplatsens RSS-flöde. Jag skulle rekommendera att ladda ner en kopia av min källkod och leka runt i din egen tid. Dessutom ser du om du kan lägga till någon egen funktion eller bygga en användbar webapp relaterad till populära RSS-flöden.