Acest tutorial arată cum se utilizează jQuery și pluginul jGFeed pentru a prelua fluxurile de știri de la distanță și pentru a scrie rezultatele în marcajul existent. jGFeed este un plugin jQuery care vă permite să obțineți "orice" feed RSS din "orice" gazdă și returnează un obiect JSON pentru o utilizare ușoară.

Acest tutorial include un screencast disponibil pentru membrii Tuts + Premium.

Codul exemplu din acest tutorial ar putea să nu funcționeze în Internet Explorer 7 sau mai devreme, dar a fost testat cu succes pe Firefox, Safari, Chrome și IE8.

Pasul 1: Organizarea fișierelor pentru Tutorial

Înainte de a începe să scriem orice cod, să creăm un director în care să plasăm fișierele cititoarelor de feed. Am creat un director pe Desktop numit 'feedreader'. În interiorul acestui director creați un altul numit active.

De asemenea, va trebui să descărcăm o copie a sursei jGFeed. Puteți face acest lucru aici. Pentru acest exemplu, am descărcat versiunea comprimată a fișierului și l-am plasat în directorul "active".

În cele din urmă, să creăm niște fișiere text goale pentru a ține marcajele, javascriptul și stilurile. Am creat următoarea structură de fișier:

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

Structura fișierului ar trebui să arate ca:

Rețineți că index.html, feedreader.js și styles.css ar trebui să fie goale în acest stadiu.

Pasul 2: marcarea

Marcajul nostru pentru acest tutorial va fi foarte simplu și presupunem că deja cunoașteți câteva coduri HTML, așa că le vom prezenta în același timp.

În fișierul index.html vom face legătura cu foaia de stil pe care o vom folosi mai târziu pentru a modela cititorul de fluxuri, apoi adăugăm o listă de linkuri către feedurile pe care dorește să le obținem și, în final, adăugăm fișierele javascript necesare pentru exemplu.

Rețineți că adăugăm fișierele Javascript la sfârșitul corpului. Acest lucru este de a îmbunătăți viteza de încărcare percepută a paginilor dvs., deoarece browserul poate începe să afișeze ieșirea fără a trebui să aștepte încărcarea script-urilor.

Adăugați următoarea marcaj la index.html:

         
jQuery + jGFeed AJAX Feed Reader Exemplu
 
 
  .lupomontero  
 
  Nettuts+  
 
  jQuery  
 
  Învățarea jQuery  
 
 
 
 Faceți clic pe linkurile de mai sus pentru a prelua feedurile 
 
      

Acum, când deschidem acest fișier în browserul web, ar trebui să vedem următoarea pagină care conține elementele inițiale pentru cititorul nostru de feed-uri.

Rețineți că acest marcaj ar fi perfect funcțional pentru browserele care nu rulează Javascript, în sensul că pagina ar oferi în continuare link-uri valide la feed-uri, dar ar lua în mod evident browserul într-o locație nouă în loc să afișeze fluxurile din cititorul nostru.

Full Screencast

Pasul 3: Înlocuiți Evenimentul Onclick Implicit cu Legăturile

Până acum, când faceți clic pe un link, browserul nostru este direcționat către o nouă locație, locația specificată în atributul "href" al linkului. Acesta este comportamentul normal al legăturilor, însă în acest caz dorim să împiedicăm navigarea de oriunde și să preluăm în mod asincron URL-ul, să procesăm răspunsul și să tipăm datele în marcajul existent, ceea ce înseamnă că nu trebuie să părăsim site-ul iar fluxurile de știri sunt prezentate așa cum vrem.

Deschideți fișierul gol pe care l-am salvat ca active / feedreader.js (aici vom scrie scriptul) și adăugați următoarele javascript:

 $ (document) .ready (function () // Hook to click pentru linkurile ajax-feed-trigger links $ ('a.ajax-feed-trigger'). e.preventDefault (); // Stocați referința la obiectul containerului în local var var container = $ ('# ajax-feed-container'); // Goliți containerul div și temporar adăugați containerul container.empty (). ('href'); alert (href); / / Get feed folosind jGFeed); // End a.ajax-feed- declanșează evenimentul de clic);

Codul de mai sus suprascrie comportamentul implicit al legăturilor pe evenimentul onclick folosind metoda clic a lui jQuery pe toate etichetele "a" ale clasei "ajax-feed trigger". În interiorul metodei de clic, primul lucru pe care îl facem este să împiedicăm comportamentul implicit folosind funcția preventDefault () a lui javascript, apoi goliți containerul div, adăugăm clasa de încărcare care ne va permite să modelam starea de încărcare și pentru moment vom arăta valoarea din atributul href al link-ului clicked. Vom folosi un apel pentru alertă () pentru a verifica dacă codul nostru funcționează până acum.

Înapoi în browser, când dăm clic pe link-uri, ar trebui să vedem un dialog de alertă cu adresa URL a link-ului clicat.

Pasul 4: Obținerea fluxului de știri ca obiect JSON folosind jGFeed

Următorul pas va fi să trimiteți cererea HTTP actuală cu jGFeed și să verificați dacă am primit răspunsul pe care l-am așteptat.

Pluginul jGFeed ia următoarele argumente:

• url - Adresa URL a fluxului pe care doriți să îl încărcați
• apel invers - funcția de apel invers pentru a apela după ce este încărcat fluxul RSS
• num (opțional) - numărul intrărilor de blog care se încarcă (implicit la 3)
• cheie (opțional) - cheia API Google pentru a fi utilizată în timpul încărcării fluxurilor RSS.

Mai multe informații despre jGFeed:
http://jquery-howto.blogspot.com/2009/05/google-feeds-api-jquery-plugin.html

În acest exemplu vom transmite valoarea atributului href al link-ului ca url, o funcție anonimă de apel invers și vom specifica că dorim să limităm rezultatele la 5.

În assets / feedreader.js adăugați apelul la jGFeed astfel încât scriptul ar trebui să arate acum ca lista de mai jos:

 $ (document) .ready (function () // Hook to click pentru linkurile ajax-feed-trigger links $ ('a.ajax-feed-trigger'). e.preventDefault (); // Stocați referința la obiectul containerului în local var var container = $ ('# ajax-feed-container'); // Goliți containerul div și temporar adăugați containerul container.empty (). ('href'); // Obțineți feed folosind jGFeed $ .jGFeed (href, function (feeds) // Verificați dacă există erori dacă (! feeds) // a existat o eroare container.append ('Eroare la preluarea feedului'); return false;, 5); // End jGFeed); // End a.ajax-feed-trigger click event);

Acum putem folosi Firebug pentru a vedea ce face jGFeed. Faceți clic pe oricare dintre link-uri, deschideți fila "Net" din Firebug și găsiți solicitarea JSON. Ar trebui să spună ceva ca "Încărcare GET? V1.0 & callback = jsonp12". Dacă extindeți vizualizarea, ar trebui să puteți vedea obiectul JSON și datele din interiorul acestuia.

Pasul 5: Crearea dinamică a marcajului pentru fiecare intrare de alimentare

Acum, că știm că primim datele, putem continua să facem ceva cu ea. În acest caz, dorim să iterăm prin intrările din feed și să adăugăm un șir cu marcaj HTML containerului existent pe care l-am creat în fișierul index.html.

Cu toate acestea, înainte de iterarea prin intrări trebuie să pregătim containerul. Ascundem div, pentru a ne asigura că nu vedem nimic până nu terminăm să manipulăm conținutul etichetei recipientului. De asemenea, eliminăm clasa de încărcare ca acum div divizată și adăugăm titlul feedului într-o etichetă de titlu.

Utilizăm o buclă pentru a itera peste proprietatea de intrări a obiectului fluxurilor care este returnată de jGFeed la funcția noastră de apel invers. În cadrul buclă, construim pur și simplu un șir cu câteva marcări HTML pentru a afișa proprietățile fiecărei intrări. La sfârșitul fiecărei iterații adăugăm acest șir HTML la containerul de alimentare.

Odata ce am terminat popularea containerului div cu toate intrarile pe care le numim metoda show () a lui JQuery pentru a se estompa in div si in cele din urma a face din nou vizibila.

 $ (document) .ready (function () // Hook to click pentru linkurile ajax-feed-trigger links $ ('a.ajax-feed-trigger'). e.preventDefault (); // Stocați referința la obiectul containerului în local var var container = $ ('# ajax-feed-container'); // Goliți containerul div și temporar adăugați containerul container.empty (). ('href'); // Obțineți feed folosind jGFeed $ .jGFeed (href, function (feeds) // Verificați dacă există erori dacă (! feeds) // a existat o eroare container.append ('Eroare la preluarea feedului'); return false; container.hide (); container.removeClass ('loading'); container.append ('
'+ feeds.title +'
„); // Intrările de feed de proces pentru (var i = 0; i
„; html + = input.title + '
„; html + = '
„; html + = entry.publishedDate + '
„; html + = '
 Postat de '; html + = entry.author + '
„; html + = '
„; html + = entry.contentSnippet + '
„; html + = '