JQuery Tutorial (partea a 5-a): AJAX Toți!

Publicitate

Când ne apropiem de sfârșitul mini-tutorialului nostru jQuery, a venit timpul să aruncăm o privire mai detaliată la una dintre cele mai utilizate caracteristici ale jQuery. AJAX permite unui site web să comunice cu un server în fundal, fără a solicita reîncărcării întregii pagini. De la fluxurile de stare infinită în stil Facebook până la trimiterea datelor de formular, există un milion de situații reale din viața reală în care această tehnică poate fi utilă.

Dacă nu ați citit tutorialele anterioare, vă sugerez să faceți acest lucru înainte de a aborda acest lucru pe măsură ce se construiesc unul pe celălalt.

• Introducere: Ce este jQuery și de ce ar trebui să vă pese? Crearea web interactivă: o introducere în jQueryjQuery este o bibliotecă de scripturi din partea clientului pe care aproape fiecare site-ul modern o folosește - face site-urile interactive. Nu este singura bibliotecă Javascript, dar este cea mai dezvoltată, cea mai susținută și cea mai utilizată ... Citeste mai mult
instagram viewer
• 1: selectori și elemente de bază jQuery Tutorial - Noțiuni introductive: Noțiuni de bază și selectoriSăptămâna trecută, am vorbit despre cât de important este jQuery pentru orice dezvoltator web modern și de ce este minunat. Săptămâna aceasta, cred că a venit timpul să ne murdărim cu niște coduri și am învățat cum ... Citeste mai mult
• 2: Metode Introducere în jQuery (Partea 2): Metode și funcțiiAceasta face parte dintr-o introducere pentru începători în seria de programare web jQuery. Prima parte a abordat elementele de bază ale jQuery despre cum să o incluzi în proiectul tău și selectori. În partea 2, vom continua cu ... Citeste mai mult
• 3: În așteptarea funcției de încărcare a paginii și funcții anonime Introducere în jQuery (Partea 3): Așteptarea paginii de încărcare și funcții anonimejQuery este, probabil, o abilitate esențială pentru dezvoltatorul web modern, iar în această mini-serie scurtă sper să vă ofer cunoștințele pentru a începe să o folosiți în propriile proiecte web. În... Citeste mai mult
• 4: Evenimente jQuery Tutorial (Partea 4) - Ascultători de evenimenteAstăzi vom face o notch și vom arăta cu adevărat unde strălucește jQuery - evenimente. Dacă ați urmat tutorialele anterioare, acum ar trebui să înțelegeți destul de bine codul de bază ... Citeste mai mult
• Debugging cu instrumente pentru dezvoltatori Chrome Descoperiți problemele site-ului web cu instrumentele pentru dezvoltatori Chrome sau FirebugDacă ați urmat tutorialele mele jQuery până acum, este posibil să aveți deja probleme cu codul și nu știți cum să le rezolvați. Când este confruntat cu un bit de funcție care nu funcționează, este foarte ... Citeste mai mult

O ce?

AJAX este un acronim pentru Javascript și XML asincron, dar cuvântul cheie este aici asincron. Asincron se referă la faptul că aceste solicitări apar în fundal, neîntrerupând experiența de navigare a utilizatorului. Probabil că nu l-ați observat niciodată înainte, dar dacă un site web se actualizează dinamic, există șanse mari să folosească AJAX pentru a face acest lucru.

Înainte de AJAX, orice formă de interacțiune cu un server, fie că este vorba despre preluarea de noi date sau postarea informațiilor înapoi de la utilizator, ar fi trebuit să se facă folosind o nouă încărcare de pagină și redirecții.

Astăzi vom analiza utilizarea unui serviciu terț, Flickr - de la care putem folosi AJAX pentru a obține câteva imagini folosind un tip de date JSON. Nu contează de fapt modul în care Flickr pune în aplicare partea primitoare a lucrurilor, deoarece aceasta este frumusețea API-uri - tot ce trebuie să știm este o adresă URL API, ce fel de date vom reveni și cum să le manipulăm.

Pentru lectură suplimentară, am scris un alt tutorial în urmă cu ceva timp gestionarea AJAX în WordPress pentru trimiterea unui formular de contact Un tutorial despre utilizarea AJAX în WordPressAJAX este o tehnologie web remarcabilă care ne-a mutat dincolo de simplul „clic pe link, accesați o altă pagină” structura Internet 1.0. Permite site-urilor să preia și să afișeze dinamic conținutul fără utilizator... Citeste mai mult , așa că poate doriți să verificați și acest lucru; implică scrierea propriului dvs. manager PHP și integrarea acestuia în procesul oficial „AJAX” WordPress.

Metoda AJAX

Iată formatul de bază al unei solicitări AJAX:

$ .ajax ({type: "GET or POST", url: "API sau URL-ul dvs. de gestionare PHP", datatype: "JSON", // în funcție de ce tip de date doriți înapoi, dar JSON este cel mai date comune: {// un set de chei: perechi „valoare”}, succes: funcție (date) {// gestionează o returnare cu succes a datelor}, eroare: funcție (mesaj) {// gestionează eroarea } });

Acest lucru pare destul de complex la început - nu este ajutat de lipsa indentării de la acest plugin de cod, dar veți vedea cât de ușor este atunci când ajungeți la un exemplu din lumea reală.

API Flickr AJAX

În acest exemplu, vom apuca etichetele asociate cu actuala postare WordPress și vom aduce câteva imagini pentru a le adăuga la sfârșitul articolului. Există un exemplu similar în documentația jQuery, dar folosește o metodă scurtă numită getJSON () în loc să explice un format complet AJAX. Deși acesta este un mod valid de a face lucrurile dacă știți că veți primi doar datele JSON înapoi, consider că învățarea metodei AJAX este mai importantă, așa că vom face acest lucru.

În primul rând, unul sus single.php și vom încerca să ecologizăm o simplă listă separată de virgule cu etichetele postare curente. De obicei, ați folosi the_tags () să facem acest lucru, dar nu este bine așa cum vrem să le stocăm în cele din urmă ca o variabilă the_tags () le răsună direct în format pre-formatat. În schimb, vom folosi get_the_tags ():

php. $ taglist = get_the_tags (); foreach (listă $ tag ca etichetă $) { echo $ tag-> nume. ","; }

Acest lucru funcționează frumos, așa că vom trimite acest lucru în interiorul unei solicitări AJAX către adresa URL a API-ului Flickr după cum urmează (notă, aceasta este o captură de ecran - pentru a păstra indentarea, codul este disponibil la acest PasteBin).

În acest moment, face totul pentru a ieși în consola browserului sau pentru a alerta un mesaj de eroare dacă există. Pentru a face ceva cu datele returnate, adăugați undeva imaginile plasate:

Și editați secțiunea succes parametrul apelului AJAX pentru a repeta mesajul articole care sunt returnate.

$ .each (data.items, funcție (i, articol) {if (i == 3) return fals; // opriți când avem 3 $ ("# flickr"). append (""); });

Și acolo îl avem. Suntem Adăugarea 3 articole din obiectul JSON returnat (datele sunt indexate zero, așa că dacă ajungem la articolul 3, suntem de fapt la al patrulea articol. Confuz, știu. În acel moment, folosim returnează fals să sari din fiecare() iterator). Am examinat deja conținutul obiectelor returnate, deci știu structura de date și extrag doar o legătură și o referință IMG. Dacă sunteți interesat să știți ce altceva este returnat, nu trebuie decât să aruncați console.log (articol) acolo.

Iată rezultatele pe site-ul meu de testare și cod complet la acest PasteBin. Observați că rezultatele returnate sunt practic nesigure - postarea mea a inclus eticheta DIY Pentru o plimbare cu pui, iar Flickr mi-a oferit tricotaj DIY. Grozav. Desigur, acesta este unul dintre obstacolele cu care te confrunți atunci când lucrezi cu o API și faci lucrurile în mod automat; puteți fie să vă re-etichetați postările (o întreprindere considerabilă), puteți modifica solicitarea pentru a solicita etichete „toate” în loc de „oricare” (probabil să vă întoarceți) nimic în acest caz) sau să creezi un câmp personalizat la care să specifici un cuvânt cheie pe care să-l folosești cu API-ul (probabil Cel mai simplu).

Considerații SEO

Acesta nu este un punct important, dar din moment ce te ocupi de dezvoltarea de site-uri web, ar trebui să fie menționat: motoarele de căutare nu vor indexa conținut care nu există la încărcarea paginii, cum ar fi orice lucru făcut prin AJAX Cel mai rău lucru absolut pe care l-ai putea face ar fi să AJAXify blogul tău, astfel încât pagina de pornire a fost doar un container asemănător iframe pentru tot conținutul încărcat în mod dinamic. Folosiți AJAX cu înțelepciune, pentru spori conținutul paginii, nu ca a înlocuire. Sau se confruntă cu consecințe grave.

Vă mulțumesc pentru lectură și sper că v-am oferit câteva idei. Desigur, Flickr nu este singura API de acolo - doar Google „API publică”Și sunteți sigur că veți găsi mai multe lucruri cu care ați putea juca.

Săptămâna viitoare va fi lecția finală din seria Tutoriale jQuery, în timp ce vom verifica plugin-ul jQuery UI. Ca întotdeauna, comentariile și sugestiile sunt binevenite; dacă aveți o întrebare de care vor beneficia alții, luați în considerare publicarea pe site-ul nostru Răspunsuri.