Deze tutorial laat zien hoe je jQuery en de jGFeed plug-in kunt gebruiken om nieuwsfeeds op afstand op te halen en de resultaten in de bestaande opmaak te schrijven. jGFeed is een jQuery-plug-in waarmee u 'elke' RSS-feed van 'elke' host kunt ophalen en een JSON-object retourneert voor eenvoudig gebruik.

Deze tutorial bevat een screencast die beschikbaar is voor leden van Tuts + Premium.

De voorbeeldcode in deze zelfstudie werkt mogelijk niet in Internet Explorer 7 of eerder, maar is met succes getest in Firefox, Safari, Chrome en IE8.

Stap 1: De bestanden voor de zelfstudie ordenen

Voordat we beginnen met het schrijven van een code, laten we een map maken waar de feedlezerbestanden worden geplaatst. Ik heb een map op mijn bureaublad gemaakt met de naam 'feedreader'. In deze map maakt u een nieuwe met de naam assets.

We zullen ook een kopie van de jGFeed-bron moeten downloaden. Je kunt dit hier doen. Voor dit voorbeeld heb ik de gecomprimeerde versie van het bestand gedownload en in de map 'assets' geplaatst.

Laten we tot slot enkele lege tekstbestanden maken om de markup, javascript en stijlen te behouden. Ik heb de volgende bestandsstructuur gemaakt:

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

De bestandsstructuur zou er ongeveer zo uit moeten zien:

Merk op dat index.html, feedreader.js en styles.css in dit stadium leeg moeten zijn.

Stap 2: De markup

Onze opmaak voor deze tutorial zal heel eenvoudig zijn, en we gaan ervan uit dat je al wat HTML kent, dus we introduceren het allemaal tegelijk.

In ons index.html-bestand zullen we linken naar het stylesheet dat we later zullen gebruiken om de feedlezer te stijlen, vervolgens een lijst met links toevoegen aan de feeds die we willen krijgen en tenslotte de javascript-bestanden toevoegen die nodig zijn voor het voorbeeld.

Merk op dat we de Javascript-bestanden aan het einde van de body toevoegen. Dit is om de waargenomen laadsnelheid van uw pagina's te verbeteren, omdat de browser de uitvoer kan weergeven zonder te moeten wachten tot de scripts zijn geladen.

Voeg de volgende markup toe aan index.html:

         
jQuery + jGFeed AJAX Feed Reader Voorbeeld
 
 
  .lupomontero  
 
  Nettuts+  
 
  jQuery  
 
  JQuery leren  
 
 
 
 Klik op bovenstaande links om feeds op te halen 
 
      

Wanneer we nu dit bestand in de webbrowser openen, zien we de volgende pagina met de eerste elementen voor onze feedlezer.

Merk op dat deze opmaak perfect functioneel zou zijn voor browsers die geen Javascript gebruiken, in die zin dat de pagina nog steeds geldige links naar de feeds zou bieden, maar ze zouden de browser natuurlijk naar een nieuwe locatie brengen in plaats van de feeds in onze lezer weer te geven.

Volledige screencast

Stap 3: Overschrijf de standaard Onclick-gebeurtenis van de koppelingen

Tot nu toe, wanneer we op een link klikken, wordt onze browser naar een nieuwe locatie geleid, de locatie die is opgegeven in het kenmerk 'href' van de link. Dit is het normale gedrag van links, maar in dit geval willen we voorkomen dat de browser ergens naartoe gaat en in plaats daarvan de URL asynchroon ophalen, het antwoord verwerken en de gegevens afdrukken binnen de bestaande opmaak, wat betekent dat we de site niet hoeven te verlaten en de nieuwsfeeds worden gepresenteerd zoals we dat willen.

Open het lege bestand dat we hebben opgeslagen als assets / feedreader.js (dit is waar we ons script gaan schrijven) en voeg het volgende javascript toe:

 $ (document) .ready (function () // Hook-to-click-gebeurtenis voor ajax-feed-trigger-links $ ('a.ajax-feed-trigger'). klik (functie (e) // Voorkomen dat standaard klikactie e.preventDefault (); // Bewaar verwijzing naar containerobject in lokale var var container = $ ('# ajax-feed-container'); // Maak container-div leeg en voeg tijdelijk "laden" -stijl toe container.empty (). addClass ('laden') // Koppelingen krijgen href-kenmerk var href = $ (this) .attr ('href'); alert (href); // Haal feed op met jGFeed); // End a.ajax-feed- trigger klikgebeurtenis);

De bovenstaande code overschrijft het standaardgedrag van de onclick-gebeurtenis met links met behulp van de klikmethode van jQuery op alle 'a'-tags van klasse' ajax-feed trigger '. Binnen de klikmethode is het eerste wat we doen het voorkomen van het standaardgedrag met behulp van javascript's preventDefault (), dan legen we de container div, voegen we de laadklasse toe die ons in staat zal stellen om de ladende 'staat' te stylen en nu laten we alleen de waarde zien van het href-kenmerk van de aangeklikte koppeling. We gebruiken een oproep om te waarschuwen () om te controleren of onze code tot nu toe werkt.

Terug in de browser, wanneer we op de links klikken, zouden we een waarschuwingsdialoog moeten zien met de URL van de geklikte link.

Stap 4: De nieuwsfeed verkrijgen als een JSON-object met jGFeed

De volgende stap is om het daadwerkelijke HTTP-verzoek met jGFeed te verzenden en te controleren of we het antwoord hebben dat we verwachtten.

De jGFeed-plug-in neemt de volgende argumenten:

• url - URL van de feed die u wilt laden
• callback - callback-functie om te bellen nadat RSS-feed is geladen
• aantal (optioneel) - aantal te laden blogitems (standaard 3)
• sleutel (optioneel) - Google API-sleutel om te gebruiken tijdens het laden van RSS-feeds.

Meer info over jGFeed:
http://jquery-howto.blogspot.com/2009/05/google-feeds-api-jquery-plugin.html

In dit voorbeeld zullen we de waarde van het href-kenmerk van de link doorgeven als de URL, een anonieme callback-functie en we zullen specificeren dat we de resultaten willen beperken tot 5.

Voeg in assets / feedreader.js de aanroep toe aan jGFeed, zodat het script er nu als volgt uit moet zien te zien:

 $ (document) .ready (function () // Hook-to-click-gebeurtenis voor ajax-feed-trigger-links $ ('a.ajax-feed-trigger'). klik (functie (e) // Voorkomen dat standaard klikactie e.preventDefault (); // Bewaar verwijzing naar containerobject in lokale var var container = $ ('# ajax-feed-container'); // Maak container-div leeg en voeg tijdelijk "laden" -stijl toe container.empty (). addClass ('laden'); // Koppelingen krijgen href-kenmerk var href = $ (this) .attr ('href'); // Krijg feed met jGFeed $ .jGFeed (href, function (feeds) // Controleer op fouten als (! feeds) // er was een fout container.append ('Fout bij ophalen feeds'); return false;, 5); // End jGFeed); // End a.ajax-feed-trigger klik event);

We kunnen nu Firebug gebruiken om te zien wat jGFeed aan het doen is. Klik op een van de koppelingen, open het tabblad 'Net' in Firebug en zoek het JSON-verzoek. Het zou iets moeten zeggen als 'GET load? V1.0 & callback = jsonp12'. Als u de weergave uitvouwt, moet u het JSON-object en de gegevens erin kunnen zien.

Stap 5: De markup voor elke feedvermelding dynamisch opbouwen

Nu we weten dat we de gegevens krijgen, kunnen we er iets mee doen. In dit geval willen we de invoer in de feed herhalen en een tekenreeks met HTML-markering toevoegen aan de bestaande container die we hebben gemaakt in ons index.html-bestand.

Voordat we echter de items doorlopen, moeten we de container voorbereiden. We verbergen de div om ervoor te zorgen dat we niets zien totdat we klaar zijn met het manipuleren van de inhoud van de containertag. We verwijderen ook de laadklasse zoals nu de div verborgen is en voegen de feedtitel toe aan een heading-tag.

We gebruiken een for-lus om de eigenschappen entry van het feeds-object dat door jGFeed is geretourneerd naar onze callback-functie te herhalen. Binnen de lus bouwen we eenvoudig een string met een beetje HTML-markering om de eigenschappen van elk item weer te geven. Aan het einde van elke iteratie voegen we deze HTML-tekenreeks toe aan de feedcontainer.

Zodra we klaar zijn met het vullen van de container-div met alle ingangen die we JQuery's show () -methode noemen om de div in te faden en deze eindelijk weer zichtbaar te maken.

 $ (document) .ready (function () // Hook-to-click-gebeurtenis voor ajax-feed-trigger-links $ ('a.ajax-feed-trigger'). klik (functie (e) // Voorkomen dat standaard klikactie e.preventDefault (); // Bewaar verwijzing naar containerobject in lokale var var container = $ ('# ajax-feed-container'); // Maak container-div leeg en voeg tijdelijk "laden" -stijl toe container.empty (). addClass ('laden'); // Koppelingen krijgen href-kenmerk var href = $ (this) .attr ('href'); // Krijg feed met jGFeed $ .jGFeed (href, function (feeds) // Controleer op fouten als (! feeds) // er was een fout container.append ('Fout bij ophalen feeds.'); return false; container.hide (); container.removeClass ('loading'); container.append ('
'+ feeds.title +'
'); // Process feed entries for (var i = 0; i'; html + = '
'; html + = entry.publishedDate + '
'; html + = '
 Gepost door '; html + = entry.author + '
'; html + = '
'; html + = entry.contentSnippet + '
'; html + = '