Internet

jQuery Tutorial (Partea 5) AJAX-le pe toate!

jQuery Tutorial (Partea 5) AJAX-le pe toate! / Internet

Pe măsură ce ne apropiem de sfârșitul seriei mini-tutorial jQuery, este timpul să ne uităm 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ărcarea întregii pagini. De la fluxurile de stat infinite în stil Facebook la trimiterea datelor din formular, există un milion de situații diferite în viața reală în care această tehnică poate fi utilă.

Dacă nu ați citit tutorialele anterioare, vă sugerăm 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? Efectuarea interacțiunii pe Web: o introducere în jQuery Efectuarea Interactivității pe Web: o introducere în jQuery jQuery este o bibliotecă de scripting pe partea clientului pe care aproape orice site web modern o folosește - face site-urile interactive. Nu este singura bibliotecă Javascript, dar este cea mai dezvoltată, cea mai utilizată și cea mai utilizată ... Read More
  • 1: selectori și elemente de bază jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii Săptămâna trecută, am vorbit despre cât de important este jQuery pentru orice dezvoltator de web modern și de ce e minunat. În această săptămână, cred că este timpul să ne murdărim mâinile cu un cod și să învățăm cum ... Citiți mai multe
  • 2: Metode Introducere La jQuery (Partea 2): Metode și funcții Introducere JQuery (Partea 2): Metode și funcții Aceasta este o parte a unei introduceri incipiente a serverelor de programare web jQuery. Partea 1 a acoperit elementele de bază ale jQuery cu privire la modul de includere a acestora în proiect și selectori. În partea a doua, vom continua cu ... Citește mai mult
  • 3: În așteptarea încărcării de pagină și a funcțiilor anonime Introducere În jQuery (Partea 3): Așteptare pentru pagină Pentru încărcare și funcții anonime Introducere În jQuery (Partea 3): Așteptarea paginii Funcții de încărcare și anonime jQuery este o abilitate esențială pentru dezvoltatorul web modern și, în această scurtă mini-serie, sper să vă dau cunoștințele pentru a începe să o utilizați în propriile proiecte web. În ... Citește mai mult
  • 4: Evenimente jQuery Tutorial (Partea 4) - Ascultarea participantilor jQuery Tutorial (Partea 4) - Ascultarea evenimentelor Astazi o sa-i dam o nota si sa aratam unde jQuery straluceste - evenimente. Dacă ați urmat tutorialele trecute, acum ar trebui să aveți o înțelegere destul de bună a codului de bază ... Read More
  • Depanarea cu instrumentele de dezvoltator Chrome Aflați problemele site-urilor Web cu ajutorul instrumentelor pentru dezvoltatori Chrome sau Firebug Imaginează-ți problemele site-ului cu ajutorul instrumentelor pentru dezvoltatori Chrome sau Firebug Dacă ați urmat tutorialele mele jQuery până acum, este posibil să fi întâlnit deja unele probleme de cod și să nu știi cum să le repare. Atunci când se confruntă cu un bit non-funcțional de cod, este foarte ... Citește mai mult

O ce?

AJAX este un acronim pentru Asynchronous Javascript și XML, dar cuvântul cheie este aici asincron. Asynchronous se referă la faptul că aceste solicitări au loc în fundal, fără a întrerupe experiența de navigare a utilizatorului. Probabil că niciodată nu ați observat acest lucru înainte, dar dacă un site se actualizează dinamic, există o șansă bună să utilizați AJAX pentru a face acest lucru.

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

Astăzi vom analiza utilizarea unui serviciu terță parte, Flickr - de la care putem folosi AJAX pentru a prelua câteva imagini utilizând un tip de date JSON. Nu contează cum Flickr implementează partea de primire a lucrurilor, pentru că asta este frumusețea lui API-uri - tot ce trebuie să știm este o adresă URL API, ce fel de date ne vom întoarce și cum să o manipulăm.

Pentru mai multă lectură, am scris un alt tutorial cu ceva timp în urmă despre manipularea AJAX în WordPress pentru o trimitere a formularului de contact Un Tutorial despre utilizarea AJAX în WordPress Un tutorial despre utilizarea AJAX În WordPress AJAX este o tehnologie web remarcabilă care ne-a mutat dincolo de simpla “dați clic pe link, accesați altă pagină” structura Internetului 1.0. Permite site-urilor web să preia dinamic și să afișeze conținut fără utilizatorul ... Citește mai mult, deci, poate doriți să verificați și acest lucru; implică scrierea propriului handler PHP și integrarea acestuia în “oficial” Procesul WordPress AJAX.

Metoda AJAX

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

$ .ajax (tip: "GET sau POST", url: "API sau adresa URL a handlerului PHP", datatype: "JSON", // în funcție de tipul de date pe care doriți să îl returnați, dar JSON este cea mai comună dată: // un set de chei: perechi de valoare, succes: funcția (date) // gestionarea unei returnări reușite a datelor, eroare: funcția (mesajul) // gestionarea erorii);

Acest lucru pare destul de complex la început - nu este ajutat de lipsa de indentare de la acest plug-in de cod - dar veți vedea cât de ușor este când ajungeți la un exemplu real al lumii.

Flickr API AJAX

În acest exemplu, vom apuca etichetele asociate postării curente WordPress și vom prelua câteva imagini pentru a le adăuga la sfârșitul articolului. Există un exemplu similar în documentația jQuery, dar se folosește o metodă de reducere a numelui getJSON () în loc să explici un format complet AJAX. În timp ce aceasta este o modalitate validă de a face lucruri dacă știți că veți obține numai date JSON, simt că învățarea metodei actuale AJAX este mai importantă, așa că așa vom face.

În primul rând, unul în sus single.php și vom încerca să reluăm o listă separată de virgule separate a etichetelor postare actuale. De obicei, ai folosi the_tags () pentru a face acest lucru, dar acest lucru nu este bun pe măsură ce dorim să stocăm în cele din urmă aceste variabile, în timp ce the_tags () le ecou direct în format pre-formatat. În schimb, vom folosi get_the_tags ():

Nume.","; ?>

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

În acest moment, tot ceea ce face pentru a ieși în consola browserului sau pentru a avertiza un mesaj de eroare dacă există unul. Pentru a face ceva cu datele returnate, adăugați undeva pentru a plasa imaginile:

Și editați succes parametru al apelului AJAX pentru a repeta versiunea articole care sunt returnate.

$ i (date.items, function (i, item) if (i == 3) return false; // stop atunci cand avem 3 $ ("# flickr") append (""););

Și acolo o avem. Suntem alăturarea 3 elemente din obiectul JSON returnat (datele sunt indexate la zero, deci dacă ajungem la elementul 3, suntem de fapt la cel de-al patrulea element.) Confuz, știu. return false să scape din fiecare() iterator).Am examinat deja conținutul obiectelor returnate, așa că știu structura de date și extrag doar o legătură și o referință IMG. Dacă sunteți interesat să știți ce altceva se întoarce, aruncați o console.log (element) acolo.

Iată rezultatele pe site-ul meu de testare și codul complet la acest PasteBin. Observați că rezultatele returnate sunt, în principiu, junk - postul meu a inclus eticheta DIY Pentru o mers pe jos în pui, și Flickr mi-a dat tricotat DIY. Frumos. Desigur, aceasta este una dintre obstacolele cu care vă confruntați atunci când lucrați cu un API și faceți lucrurile în mod automat; puteți fie să vă reetichetați postările (o întreprindere considerabilă), să schimbați cererea de solicitare “toate” în loc de “orice” (probabil că nu veți reveni la nimic în acest caz) sau să veniți cu un câmp nou personalizat la care să specificați un cuvânt cheie direcționat care să fie utilizat cu API (probabil cel mai simplu).

SEO Considerații

Acesta nu este un punct important, dar din moment ce sunteți în afacerea de a dezvolta site-uri web, ar trebui menționat: motoarele de căutare nu vor indexa conținutul care nu există la încărcarea paginii, cum ar fi orice realizat prin AJAX. Cel mai rău lucru absolut pe care l-ați putea face ar fi să vă AJAXiflați pe deplin blog-ul, astfel încât pagina de pornire să fie doar un container tip iframe pentru întregul conținut încărcat dinamic. Utilizați AJAX înțelept, pentru a spori conținutul paginii, nu ca un înlocuire. Sau se confruntă cu consecințe directe.

Mulțumesc că ai citit și sper că ți-am dat niște idei. Desigur, Flickr nu este singurul API aflat acolo - doar Google “public API” și veți găsi cu siguranță mai multe lucruri cu care ați putea juca.

Săptămâna viitoare va fi ultima lecție din seria jQuery Tutorial, pe măsură ce verificăm pluginul jQuery UI. Ca oricând, comentariile și sugestiile sunt binevenite; dacă aveți o întrebare pe care o vor beneficia altele, vă recomandăm să o postați pe site-ul nostru de răspunsuri.

Explorați mai multe despre: jQuery, Programare, Dezvoltare Web.