JQuery Tutorial (5. dio): AJAX Them All!

Oglas

Kako se bliži kraj naše mini tutorial serije jQuery, došlo je vrijeme da detaljnije razmotrimo jednu od najkorištenijih značajki jQueryja. AJAX omogućava web mjestu da komunicira s poslužiteljem u pozadini bez potrebe da se cijela stranica ponovno učita. Od beskonačnih tokova statusa na Facebooku do slanja podataka obrasca, postoji milijun različitih situacija iz stvarnog života u kojima ova tehnika može biti korisna.

Ako niste pročitali prethodne vodiče, predlažem vam da to učinite prije nego što se pozabavite tim nadmetanjem.

• Uvod: Što je jQuery i zašto biste se trebali brinuti? Izrada Interneta interaktivna: uvod u jQueryjQuery je biblioteka skripta na strani klijenta koju koristi gotovo svaka moderna web stranica - to čini web stranice interaktivnim. To nije jedina Javascript knjižnica, ali je najrazvijenija, najviše podržana i najčešće korištena ... Čitaj više
• 1: Selektori i osnove jQuery Tutorial - Prvi koraci: Osnove i izborniciProšli tjedan sam govorio o tome koliko je jQuery važan bilo kojem modernom web programeru i zašto je to fenomenalno. Ovaj tjedan mislim da je došlo vrijeme da se ruke umažemo nekim šifrom i naučimo kako ...
  instagram viewer
  Čitaj više
• 2: Metode Uvod u jQuery (2. dio): Metode i funkcijeOvo je dio stalnog uvoda za početnike u jQuery seriju web programiranja. Prvi dio je pokrenuo osnove jQueryja o tome kako ga uključiti u svoj projekt i odabire. U drugom dijelu, nastavit ćemo s ... Čitaj više
• 3: Čekanje na učitavanje stranice i anonimne funkcije Uvod u jQuery (3. dio): Čekanje na stranicu za učitavanje i anonimne funkcijejQuery je vjerojatno osnovna vještina modernog web programera, a u ovoj kratkoj mini seriji nadam se da ću vam dati znanje kako biste je počeli koristiti u vlastitim web projektima. U... Čitaj više
• 4: Događaji jQuery Tutorial (4. dio) - Slušatelji događanjaDanas ćemo to otvoriti i stvarno pokazati gdje jQuery sjaji - događaji. Ako ste slijedili prethodne vodiče, sada biste trebali dobro razumjeti osnovni kod ... Čitaj više
• Otklanjanje pogrešaka s alatima za razvojne programere Chrome Otkrijte probleme s web-lokacijama pomoću alata za razvojne programere Chrome ili FirebugaAko ste dosad pratili moje jQuery tutorijale, možda ste već naišli na neke probleme s kodom i ne znate kako ih riješiti. Kad se suočite s nefunkcionalnim bitnim kodom, vrlo je ... Čitaj više

Što?

AJAX je akronim za Asinhroni Javascript i XML, ali ključna riječ ovdje je asinhron. Asinkrono se odnosi na činjenicu da se ovi zahtjevi pojavljuju u pozadini, ne prekidajući iskustvo pregledavanja korisnika. Vjerovatno to nikad niste ni primijetili, ali ako se web stranica dinamički ažurira, postoji velika šansa da to koristi AJAX.

Prije AJAX-a, bilo koji oblik interakcije s poslužiteljem, bilo da se radi o dohvaćanju novih podataka ili o objavljivanju podataka od korisnika, trebao bi se obaviti korištenjem učitavanja nove stranice i preusmjeravanja.

Danas ćemo pogledati korištenje usluge treće strane, Flickr - od koje možemo koristiti AJAX za dohvaćanje nekih slika pomoću JSON podatkovne vrste. Nije zapravo važno kako Flickr provodi primanje strane stvari, jer u tome je ljepota Apis - sve što trebamo znati jest API URL, kakve ćemo podatke dobiti i kako njima manipulirati.

Za daljnje čitanje napisao sam prije nekoliko sati još jedan udžbenik rukovanje AJAX-om u WordPress-u radi slanja obrasca za kontakt Tutorial o korištenju AJAX-a u WordPress-uAJAX je izvanredna internetska tehnologija koja nas je odmaknula od jednostavne veze "klik, idi na drugu stranicu" struktura Interneta 1.0. Omogućuje web lokacijama da dinamično dohvaćaju i prikazuju sadržaj bez korisnik... Čitaj više , pa biste mogli provjeriti i ovo; To uključuje pisanje vlastitog PHP alata i njegovo integriranje u "službeni" WordPress AJAX postupak.

AJAX metoda

Evo osnovnog formata AJAX zahtjeva:

$ .ajax ({vrsta: "GET ili POST", url: "API ili vaš PHP URL obrađivač", vrsta podataka: "JSON", // ovisno o vrsti podataka koju želite vratiti, ali JSON je najviše uobičajeni podaci: {// skup ključa: parovi "vrijednost"}, uspjeh: funkcija (podaci) {// rukovanje uspješnim povratkom podataka}, pogreška: funkcija (poruka) {// rješavanje pogreške } });

U početku to izgleda prilično složeno - ne pomaže im nedostatak uvlačenja u ovom dodatku za kod - ali vidjet ćete koliko je lako kada dođete do primjera iz stvarnog svijeta.

Flickr API AJAX

U ovom ćemo primjeru dohvatiti oznake povezane s trenutnim WordPress postom i dohvatiti neke slike koje ćemo dodati na kraju članka. Tamo je sličan primjer u jQuery dokumentaciji, ali upotrebljava se metoda prečaca nazvana getJSON () radije nego da objašnjavate potpuni AJAX format. Iako je ovo važeći način vršenja poslova, ako znate da ćete dobiti samo JSON podatke, smatram da je učenje stvarne AJAX metode važnije, tako da ćemo to i učiniti.

Prvo, jedan gore single.php a mi ćemo pokušati ponoviti jednostavan odvojeni popis zarezom trenutačnih oznaka posta. Tipično, ti bi koristi the_tags () to raditi, ali to nije dobro jer ih želimo na kraju pohraniti kao varijablu, dok the_tags () odjekuje ih unaprijed formatirano. Umjesto toga, upotrijebit ćemo get_the_tags ():

PHP. $ tagslist = get_the_tags (); foreach ($ taglist kao $ tag) { echo $ tag-> name. ","; }

To lijepo funkcionira, pa ćemo ga poslati unutar AJAX zahtjeva na Flickr API URL na sljedeći način (imajte na umu, ovo je snimka zaslona - da biste sačuvali uvlačenje, kôd je dostupan na ovaj PasteBin).

U ovom trenutku, sve to čini kako bi se prikazao na konzoli preglednika ili upozorio na poruku o pogrešci, ako postoji. Da biste zapravo napravili nešto s vraćenim podacima, dodajte negdje za postavljene slike:

I uredite uspjeh parametar poziva AJAX za ponavljanje preko stavke koji su vraćeni.

$ .each (data.items, funkcija (i, stavka) {if (i == 3) vraćaju false; // zaustavi se kada imamo 3 $ ("# flickr"). append (""); });

I tu ga imamo. mi smo dodavajući 3 stavke iz vraćenog JSON objekta (podaci su indeksirani nula, tako da ako dođemo do točke 3, zapravo smo na četvrtoj stavci. Zbunjujuće, znam. U tom trenutku koristimo vratiti lažno iskočiti iz svaki() iterator). Već sam pregledao sadržaj vraćenih objekata, tako da znam strukturu podataka i izdvajam samo vezu i IMG referencu. Ako vas zanima što vam se još vraća, jednostavno bacite console.log (stavka) unutra.

Evo rezultata na mojem testnom mjestu i puni kod ovog PasteBina. Primijetite da su vraćeni rezultati u osnovi smeće - moj je post uključio oznaku DIY za hodanje s piletinom, a Flickr mi je dao DIY pletenje. Lijepo. Naravno, ovo je jedna od prepreka s kojima se susrećete kada radite s API-om i radite stvari automatski; možete ili ponovo označiti svoje postove (značajan poduhvat), promijeniti zahtjev i zatražiti "sve" oznake umjesto "bilo koje" (vjerojatno će se vratiti ništa u ovom slučaju) ili smislite novo prilagođeno polje u kojem biste odredili ciljanu ključnu riječ koja se koristi s API-jem (vjerojatno najlakše).

SEO razmatranja

To nije glavna poanta, ali budući da se bavite razvojem web stranica to bi trebalo biti spomenuto: tražilice neće indeksirati sadržaj koji ne postoji pri učitavanju stranice, kao što je bilo što učinjeno putem AJAX-a. Apsolutno najgore što biste mogli učiniti je potpuno u potpunosti AJAXificirati svoj blog, tako da je početna stranica samo spremnik nalik iframeu za sav sadržaj koji se dinamički učitava. Koristite AJAX mudro za povećati sadržaj stranice, a ne kao zamjena. Ili se suočite s teškim posljedicama.

Hvala na čitanju i nadam se da sam vam dao nekoliko ideja. Naravno, Flickr nije jedini API vani - samo Google "javni API"I sigurno ćete pronaći više stvari s kojima biste se mogli igrati.

Sljedeći tjedan bit će zadnja lekcija iz serije jQuery Tutorial dok provjeravamo jQuery UI dodatak. Kao i uvijek, komentari i prijedlozi su dobrodošli; ako imate pitanje od kojeg će drugi imati koristi, razmislite o tome kako ga objaviti na našoj stranici s odgovorima.