Questo tutorial mostra come utilizzare jQuery e il plugin jGFeed per recuperare i feed di notizie in remoto e scrivere i risultati nel markup esistente. jGFeed è un plugin jQuery che ti permette di ottenere "qualsiasi" feed RSS da qualsiasi host e restituisce un oggetto JSON per un facile utilizzo.

Questo tutorial include uno screencast disponibile per i membri Tuts + Premium.

Il codice di esempio in questa esercitazione potrebbe non funzionare in Internet Explorer 7 o versioni precedenti ma è stato testato con successo su Firefox, Safari, Chrome e IE8.

Passaggio 1: organizzazione dei file per il tutorial

Prima di iniziare a scrivere qualsiasi codice, creiamo una directory in cui posizionare i file del lettore di feed. Ho creato una directory nel mio desktop chiamata "feedreader". All'interno di questa directory crea un altro chiamato asset.

Dovremo anche scaricare una copia della sorgente jGFeed. È possibile farlo qui. Per questo esempio ho scaricato la versione compressa del file e l'ho inserita nella directory 'assets'.

Infine, creiamo alcuni file di testo vuoti per contenere markup, javascript e stili. Ho creato la seguente struttura di file:

 | - beni | | - feedreader.js | | - jquery.jgfeed-min.js | '- styles.css' - index.html

La struttura del file dovrebbe assomigliare a:

Nota che index.html, feedreader.js e styles.css dovrebbero essere vuoti in questa fase.

Passaggio 2: il markup

Il nostro markup per questo tutorial sarà molto semplice, e stiamo assumendo che tu conosca già un po 'di HTML, quindi lo introdurremo tutto in una volta.

Nel nostro file index.html ci collegheremo al foglio di stile che utilizzeremo in seguito per modellare il lettore di feed, quindi aggiungeremo un elenco di link ai feed che vogliamo ottenere e infine aggiungeremo i file javascript necessari per l'esempio.

Si noti che aggiungiamo i file Javascript alla fine del corpo. Questo per migliorare la velocità di caricamento percepita delle tue pagine, poiché il browser può iniziare a visualizzare l'output senza dover attendere il caricamento degli script.

Aggiungi il seguente markup a index.html:

         
Esempio di lettore di feed jQuery + jGFeed AJAX
 
 
  .lupomontero  
 
  Nettuts+  
 
  jQuery  
 
  Imparare jQuery  
 
 
 
 Clicca sui link qui sopra per scaricare i feed 
 
      

Ora quando apriamo questo file nel browser web dovremmo vedere la seguente pagina contenente gli elementi iniziali per il nostro lettore di feed.

Si noti che questo markup sarebbe perfetto per i browser che non eseguono Javascript, nel senso che la pagina offre comunque collegamenti validi ai feed, ma ovviamente porterebbero il browser in una nuova posizione invece di visualizzare i feed all'interno del nostro lettore.

Screencast completo

Passaggio 3: Sostituisci l'evento Onclick predefinito dei collegamenti

Finora, quando facciamo clic su un collegamento, il nostro browser viene indirizzato a una nuova posizione, la posizione specificata nell'attributo "href" del collegamento. Questo è il normale comportamento dei link, ma in questo caso vogliamo impedire al browser di andare ovunque e recuperare l'URL in modo asincrono, elaborare la risposta e stampare i dati all'interno del markup esistente, il che significa che non dobbiamo lasciare il sito e i feed di notizie sono presentati nel modo che vogliamo.

Apri il file vuoto che abbiamo salvato come assets / feedreader.js (questo è dove scriveremo il nostro script) e aggiungi il seguente javascript:

 $ (document) .ready (function () // Agganciato all'evento click per i link ajax-feed-trigger $ ('a.ajax-feed-trigger'). click (function (e) // Previene l'azione di clic predefinita e.preventDefault (); // Memorizza il riferimento all'oggetto contenitore in var var container = $ ('# ajax-feed-container'); // Vuota div contenitore e aggiunge temporaneamente lo stile "loading" container.empty (). addClass ('caricamento'); // Ottieni collegamenti href attributo var href = $ (this) .attr ('href'); alert (href); // Ottieni feed utilizzando jGFeed); // Termina a.ajax-feed- evento click trigger);

Il codice sopra sovrascrive il comportamento predefinito dell'evento onclick dei link utilizzando il metodo click di jQuery su tutti i tag 'a' di classe 'trigger' ajax-feed '. All'interno del metodo click la prima cosa che facciamo è impedire il comportamento predefinito usando preventDefault () di javascript, quindi svuotiamo il contenitore div, aggiungiamo la classe di caricamento che ci permetterà di disegnare lo 'stato' di caricamento e per ora mostriamo solo il valore dell'attributo href del link cliccato. Useremo una chiamata per avvisare () per verificare che il nostro codice funzioni fino a quel momento.

Di nuovo nel browser, quando clicchiamo sui link dovremmo vedere una finestra di avviso con l'URL del link cliccato.

Passaggio 4: Ottenere il feed delle notizie come un oggetto JSON utilizzando jGFeed

Il prossimo passo sarà inviare la richiesta HTTP effettiva con jGFeed e controllare che abbiamo ottenuto la risposta che ci aspettavamo.

Il plugin jGFeed accetta i seguenti argomenti:

• url: l'URL del feed che desideri caricare
• richiamata - funzione di richiamata per chiamare dopo che è stato caricato il feed RSS
• num (opzionale) - numero di post di blog da caricare (il valore predefinito è 3)
• chiave (facoltativo): la chiave API di Google da utilizzare durante il caricamento dei feed RSS.

Maggiori informazioni su jGFeed:
http://jquery-howto.blogspot.com/2009/05/google-feeds-api-jquery-plugin.html

In questo esempio passeremo il valore dell'attributo href del link come url, una funzione di callback anonimo e specificheremo che vogliamo limitare i risultati a 5.

In assets / feedreader.js aggiungi la chiamata a jGFeed in modo che lo script ora assomigli alla seguente lista:

 $ (document) .ready (function () // Agganciato all'evento click per i link ajax-feed-trigger $ ('a.ajax-feed-trigger'). click (function (e) // Previene l'azione di clic predefinita e.preventDefault (); // Memorizza il riferimento all'oggetto contenitore in var var container = $ ('# ajax-feed-container'); // Vuota div contenitore e aggiunge temporaneamente lo stile "loading" container.empty (). addClass ('caricamento'); // Ottieni collegamenti href attributo var href = $ (this) .attr ('href'); // Ottieni feed usando jGFeed $ .jGFeed (href, function (feeds) // Controlla gli errori se (! feeds) // si è verificato un errore container.append ('Errore durante il recupero del feed.'); return false;, 5); // End jGFeed); // End a.ajax-feed-trigger click evento);

Ora possiamo usare Firebug per vedere cosa sta facendo jGFeed. Fare clic su uno dei collegamenti, aprire la scheda "Rete" in Firebug e individuare la richiesta JSON. Dovrebbe dire qualcosa come 'GET load? V1.0 & callback = jsonp12'. Se si espande la vista, si dovrebbe essere in grado di vedere l'oggetto JSON e i dati al suo interno.

Passaggio 5: creazione del markup per ogni voce di feed in modo dinamico

Ora che sappiamo che stiamo ottenendo i dati possiamo procedere a fare qualcosa con esso. In questo caso vogliamo ripetere le voci nel feed e aggiungere una stringa con markup HTML al contenitore esistente che abbiamo creato nel nostro file index.html.

Tuttavia, prima di scorrere le voci, è necessario preparare il contenitore. Nascondiamo il div per assicurarci di non vedere nulla finché non avremo finito di manipolare il contenuto del tag del contenitore. Rimuoviamo anche la classe di caricamento poiché ora il div è nascosto e aggiunge il titolo del feed in un tag di intestazione.

Usiamo un ciclo for per iterare sulla proprietà delle voci dell'oggetto feed che viene restituito da jGFeed alla nostra funzione di callback. All'interno del ciclo costruiamo semplicemente una stringa con alcuni markup HTML per visualizzare le proprietà di ogni voce. Alla fine di ogni iterazione aggiungiamo questa stringa HTML al contenitore del feed.

Una volta terminato di compilare il contenitore div con tutte le voci, chiamiamo il metodo show () di JQuery per dissolvere il div e renderlo finalmente visibile.

 $ (document) .ready (function () // Agganciato all'evento click per i link ajax-feed-trigger $ ('a.ajax-feed-trigger'). click (function (e) // Previene l'azione di clic predefinita e.preventDefault (); // Memorizza il riferimento all'oggetto contenitore in var var container = $ ('# ajax-feed-container'); // Vuota div contenitore e aggiunge temporaneamente lo stile "loading" container.empty (). addClass ('caricamento'); // Ottieni collegamenti href attributo var href = $ (this) .attr ('href'); // Ottieni feed usando jGFeed $ .jGFeed (href, function (feeds) // Controlla gli errori se (! feeds) // si è verificato un errore container.append ('Errore durante il recupero del feed.'); return false; container.hide (); container.removeClass ('loading'); container.append ('
'+ feeds.title +'
'); // Elabora le voci del feed per (var i = 0; i'; html + = '
'; html + = entry.publishedDate + '
'; html + = '
 Pubblicato da '; html + = entry.author + '
'; html + = '
'; html + = entry.contentSnippet + '
'; html + = '