Il tipico processo di creazione di un elenco di feed dinamico richiede un tipo di linguaggio di back-end. Ovviamente questo può funzionare bene se hai familiarità con Rails o PHP, ma voglio presentare un metodo per estrarre feed RSS tramite jQuery. Il problema è accedere alle richieste Ajax da un server esterno e quindi convertire queste informazioni XML in qualcosa di più semplice da leggere.
Ci concentreremo sull'API di Google Feed, che è molto più semplice di quanto sembri. Ci sono un certo numero di possibilità personalizzate per giocare con le opzioni e accedere ad altri temi alternativi. Tutto ciò di cui abbiamo bisogno è la prima pagina dei risultati del feed, insieme a ciascun titolo e al link dell'URL. Una volta che questo script funziona, è molto semplice personalizzare il layout e persino includere un po 'di contenuto dal feed! Guarda la mia demo di esempio qui sotto per avere un'idea di cosa creeremo.
Demo dal vivo - Scarica il codice sorgente
Iniziare
Il primo passo è creare un documento di base che includa la libreria jQuery come risorsa. Userò un paio di funzioni pubblicate su Stack Overflow che ci aiutano a raggiungere questo feed RSS. Tipicamente quando si scrive una webapp come questa è necessario accedere all'analisi cross-domain tramite un qualche linguaggio di back-end. PHP è spesso la soluzione più semplice per gli sviluppatori web.
Poiché utilizziamo l'API di Google Feed, diventerà il nostro script di back-end. Quindi tutto può essere letto tramite jQuery Ajax e quindi convertito in JSON in modo da poter analizzare meglio. Ecco l'intestazione del mio documento che include jQuery insieme a uno script personalizzato parser.js.
La parte migliore del mio codice è come possiamo compilare tutto tramite JavaScript. Tutti gli elementi RSS interni nella pagina saranno scritti in HTML, ma non verranno visualizzati nella fonte del documento. Tutti i contenuti sono pubblicati dinamicamente e puoi modificare rapidamente le fonti di feed per cambiare ogni pagina ricaricata.
Questa è la piena interezza del contenuto del corpo. Ogni classe di .feedcontainer è usato per applicare gli stessi stili di base su intestazioni e collegamenti. I nomi degli ID sono presi di mira tramite jQuery in modo che possiamo eseguire la nostra funzione RSS personalizzata e quindi aggiungere nuovi contenuti utilizzando il metodo .html ().
Analisi RSS in jQuery
Possiamo saltare la maggior parte degli stili CSS perché sono piuttosto basici. Dai un'occhiata al mio foglio di stile se vuoi vedere come viene eseguito l'allineamento. Ma andare oltre parser.js ci sono due funzioni in cui si gestisce specificamente la conversione RSS / JSON. L'altro è una funzione di capitalizzazione che forza automaticamente il titolo del feed RSS? attributo per rimanere in maiuscolo.
Questo parseRSS () la funzione è stata pubblicata in una domanda relativa allo Stack Overflow e delinea una soluzione perfetta che funziona solo con jQuery. Abbiamo ancora bisogno di un server perché il metodo .ajax () non può essere eseguito senza un flusso HTTP. Ma non hai bisogno di supporto per altre lingue di back-end che è un enorme sollievo. Idealmente possiamo fidarci di Google per mantenere questa esecuzione a tempo indeterminato in quanto è una risorsa tremenda per gli sviluppatori.
Il codice funzione stesso è facile da capire se si ha familiarità con .ajax (). Per prima cosa passiamo nell'URL da interrogare, che è il link dell'API di Google Feed remoto. Abbiamo bisogno del tipo di dati impostato come JSON e dopo la chiamata ajax di successo dovremmo eseguire una nuova funzione per visualizzare i contenuti HTML. Si noti che il parametro che passiamo viene chiamato dati che contiene la risposta JSON.
Il ciclo di risposta
Notare che ho lasciato anche un commento con il codice console.log (data.responseData.feed) se si desidera visualizzare l'output di tutti i contenuti JSON. È possibile visualizzare oltre al titolo del feed e ai collegamenti URL. Ma volevo mantenere questo esempio senza fronzoli inutili. Hai la possibilità di aggiungere più cose a tuo piacimento direttamente da questa funzione.
All'interno della fortunata funzione di chiamata ajax ho incorporato un ciclo .each () per scorrere gli articoli all'interno del feed. Si noti che è possibile accedere a questo array tramite data.responseData.feed.entries che trasformiamo in una coppia chiave e valore. È abbastanza semplice perché abbiamo solo bisogno di una variabile stringa per contenere l'HTML. Quindi utilizzando jQuery .append () tutto il contenuto viene aggiunto nuovamente alla pagina.
L'output del titolo non è all'interno di questo ciclo .each () perché dovrebbe essere aggiunto una sola volta per ogni feed. Ma sta anche usando un'altra funzione personalizzata scritta per capitalizzare ogni prima lettera all'interno di qualsiasi stringa JavaScript. Alcuni dei feed RSS avranno tutte le lettere del titolo in minuscolo che possono sembrare strani. Ecco il codice della funzione ed è molto breve.
Tieni presente che i feed RSS possono avere molte più informazioni da pubblicare. A volte troverai persino immagini di anteprima incorporate nel codice XML del feed. Ciò rende possibile includere le immagini degli articoli all'interno della propria webapp RSS! Le possibilità sono praticamente infinite con un facile accesso alle API di feed di Google.
Demo dal vivo - Scarica il codice sorgente
Pensieri finali
I feed RSS sono ancora molto popolari tra gli sviluppatori web perché è un metodo comune di trasferimento di dati tra siti web.Ciò consente agli esperti di marketing su Internet di pubblicare facilmente aggiornamenti su Twitter o Facebook direttamente dal feed RSS del sito web. Dovrei raccomandare di scaricare una copia del mio codice sorgente e giocherellare nel tuo tempo libero. Inoltre vedi se puoi aggiungere una delle tue funzionalità o creare un'app web utile relativa ai popolari feed RSS.