Denne opplæringen viser hvordan du bruker jQuery og jGFeed-plugin for å hente nyhetsfeeder eksternt og skrive resultatene i eksisterende oppslag. jGFeed er en jQuery-plugin som lar deg få 'noen' RSS-feed fra 'noen' vert og returnerer et JSON-objekt for enkel bruk.

Denne opplæringen inneholder en screencast tilgjengelig for Tuts + Premium medlemmer.

Eksempelkoden i denne opplæringen virker kanskje ikke i Internet Explorer 7 eller tidligere, men den har blitt testet på Firefox, Safari, Chrome og IE8.

Trinn 1: Organisering av filene for opplæringen

Før vi begynner å skrive noen kode, la oss lage en katalog hvor du skal plassere feed leserfilene. Jeg har opprettet en katalog i skrivebordet mitt, kalt 'feedreader'. Inne i denne katalogen opprett en annen som heter eiendeler.

Vi må også laste ned en kopi av jGFeed-kilden. Du kan gjøre det her. For dette eksempelet har jeg lastet ned den komprimerte versjonen av filen og plassert den i 'assets'-katalogen.

Til slutt, la oss lage noen tomme tekstfiler for å holde markeringen, javascript og stiler. Jeg har opprettet følgende filstruktur:

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

Filstrukturen skal se ut som:

Vær oppmerksom på at index.html, feedreader.js og styles.css skal være tomme på dette stadiet.

Trinn 2: Markup

Vår oppfølging for denne opplæringen kommer til å være veldig enkel, og vi antar at du allerede kjenner litt HTML, så vi vil presentere alt på en gang.

I vår index.html-fil vil vi lenke til stilarket som vi skal bruke senere for å stilmate leseren, og deretter legge til en liste over koblinger til feeds vi ønsker å få og til slutt legge til javascript-filene som trengs for eksempelet.

Legg merke til at vi legger til Javascript-filene på slutten av kroppen. Dette er å forbedre opplevd lasthastighet på sidene dine, da nettleseren kan begynne å vise utdata uten å måtte vente på at skriptene skal lastes inn.

Legg til følgende merking til index.html:

         
jQuery + jGFeed AJAX Feed Reader Eksempel
 
 
  .lupomontero  
 
  Nettuts+  
 
  jQuery  
 
  Læring jQuery  
 
 
 
 Klikk på koblinger ovenfor for å hente feeds 
 
      

Nå når vi åpner denne filen i nettleseren, bør vi se følgende side som inneholder de første elementene til vår leser.

Vær oppmerksom på at denne merkingen vil være perfekt for bruk av nettlesere som ikke kjører Javascript, i den forstand at siden fortsatt vil gi gyldige koblinger til feeds, men de ville åpenbart ta nettleseren til en ny plassering i stedet for å vise feeds i leseren vår.

Full Screencast

Trinn 3: Overstyr Linker Standard Onclick Event

Så langt, når vi klikker på en kobling, blir nettleseren din rettet til en ny plassering, stedet som er angitt i linkens href-attributt. Dette er den normale oppførselen til koblinger, men i dette tilfellet vil vi forhindre at nettleseren går hvor som helst og istedenfor henter URL-adressen asynkront, behandler svaret og skriver ut dataene i eksisterende oppslag, noe som betyr at vi ikke trenger å forlate nettstedet og nyhetsfeedene presenteres slik vi ønsker.

Åpne den tomme filen vi lagret som assets / feedreader.js (dette er hvor vi skal skrive skriptet vårt) og legg til følgende javascript:

 $ (dokument) .ready (funksjon () // Hook for å klikke hendelsen for ajax-feed-trigger-koblinger $ ('a.ajax-feed-trigger'). klikk (funksjon (e) // Forhindre standard klikk handling e.preventDefault (); // Store referanse til containerobjekt i lokal var var container = $ ('# ajax-feed-container'); // Tom beholder div og midlertidig legge til "loading" style container.empty (). addClass ('loading'); // Få lenker href attributt var href = $ (dette) .attr ('href'); varsel (href); // Få feed ved hjelp av jGFeed); / End a.ajax-feed- utløser klikkhendelse);

Koden ovenfor overstyrer standard oppførselen til linkene onclick-hendelsen ved hjelp av jQuery's klikkmetode på alle 'a' -koder av klasse 'ajax-feederutløser'. Innenfor klikkmetoden er det første som vi gjør, å forhindre at standardadferdene bruker javascript's preventDefault (), så tømmer vi container div, legger til lasteklassen som lar oss stilere lastetilstanden og for nå viser vi bare verdien av href-attributtet til den klikkte lenken. Vi vil bruke et anrop for å varsle () for å sjekke at koden fungerer så langt.

Tilbake i nettleseren, når vi klikker på koblingene, bør vi se en varslingsdialog med nettadressen til den klikkte lenken.

Trinn 4: Få nyhetsfeed som et JSON-objekt ved hjelp av jGFeed

Det neste trinnet vil være å sende den faktiske HTTP-forespørselen med jGFeed og sjekke at vi fikk svaret vi forventet.

JGFeed-pluginet tar følgende argumenter:

• URL - URL til feedet du vil laste inn
• tilbakeringing - tilbakeringingsfunksjon for å ringe etter at RSS-feed er lastet
• num (valgfritt) - antall blogginnlegg å laste (standard til 3)
• nøkkel (valgfritt) - Google API-nøkkel for bruk mens du laster inn RSS-feeder.

Mer informasjon om jGFeed:
http://jquery-howto.blogspot.com/2009/05/google-feeds-api-jquery-plugin.html

I dette eksemplet vil vi passere verdien av linkens href-attributt som url, en anonym tilbakeringingsfunksjon, og vi vil spesifisere at vi vil begrense resultatene til 5.

I aktiva / feedreader.js legger du anropet til jGFeed slik at manuskriptet nå skal se ut som oppføringen nedenfor:

 $ (dokument) .ready (funksjon () // Hook for å klikke hendelsen for ajax-feed-trigger-koblinger $ ('a.ajax-feed-trigger'). klikk (funksjon (e) // Forhindre standard klikk handling e.preventDefault (); // Store referanse til containerobjekt i lokal var var container = $ ('# ajax-feed-container'); // Tom beholder div og midlertidig legge til "loading" style container.empty (). addClass ('loading'); // Få linker href attributt var href = $ (dette) .attr ('href'); // Få feed ved hjelp av jGFeed $ .jGFeed (href, funksjon (feeds) // Se etter feil hvis (! feeds) // det oppstod en feil container.append ('Feil henter feed'); return false;, 5); // End jGFeed); // End a.ajax-feed-trigger-klikk begivenhet );

Vi kan nå bruke Firebug for å se hva jGFeed gjør. Klikk på noen av koblingene, åpne fanen 'Net' i Firebug og finn JSON-forespørselen. Det burde si noe som 'GET load? V1.0 & callback = jsonp12'. Hvis du utvider visningen, bør du kunne se JSON-objektet og dataene i den.

Trinn 5: Bygg opp merkingen for hver innmatning dynamisk

Nå som vi vet at vi får dataene, kan vi fortsette å gjøre noe med det. I dette tilfellet ønsker vi å iterere gjennom oppføringene i feedet og legge til en streng med HTML-merking til den eksisterende beholderen vi opprettet i vår index.html-fil.

Men før det gjennomføres gjennom oppføringene, må vi forberede beholderen. Vi skjuler diven for å sikre at vi ikke ser noe før vi er ferdig med å manipulere innholdet i containeretiketten. Vi fjerner også laste klassen som nå div er skjult og legger til fôrtittelen i en overskrift tag.

Vi bruker en for-løkke til å iterere over oppføringsegenskapene til feedsobjektet som returneres av jGFeed til vår tilbakeringingsfunksjon. Innenfor løkken bygger vi bare en streng med noe HTML-oppslag for å vise egenskapene til hver oppføring. Ved slutten av hver iterasjon legger vi til denne HTML-strengen i feedbeholderen.

Når vi er ferdig med å fylle container div med alle oppføringene, kaller vi JQuery's show () -metode for å falme i div og endelig gjøre den synlig igjen.

 $ (dokument) .ready (funksjon () // Hook for å klikke hendelsen for ajax-feed-trigger-koblinger $ ('a.ajax-feed-trigger'). klikk (funksjon (e) // Forhindre standard klikk handling e.preventDefault (); // Store referanse til containerobjekt i lokal var var container = $ ('# ajax-feed-container'); // Tom beholder div og midlertidig legge til "loading" style container.empty (). addClass ('loading'); // Få linker href attributt var href = $ (dette) .attr ('href'); // Få feed ved hjelp av jGFeed $ .jGFeed (href, funksjon (feeds) // Se etter feil hvis (! feeds) // det oppstod en feil container.append ('Feil henter feed'); return false; container.hide (); container.removeClass ('loading'); container.append ('
'+ feeds.title +'
'); // Prosessmatoppføringer for (var i = 0; i'; html + = '
'; html + = entry.publishedDate + '
'; html + = '
 Postet av '; html + = entry.author + '
'; html + = '
'; html + = entry.contentSnippet + '
'; html + = '