jQuery Tutorial (5. dio) AJAX Them All!

Kako se bliži kraj naše mini tutorial serije jQuery, krajnje je vrijeme da detaljnije razmotrimo jednu od najčešće korištenih 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 web interaktivne: Uvod u jQuery Izrada Interneta interaktivna: Uvod u jQuery jQuery je biblioteka skripti na strani klijenta koju koristi gotovo svaka moderna web stranica - to čini web stranice interaktivnim. To nije jedina Javascript knjižnica, već je najrazvijenija, najviše podržana i najčešće korištena ...
• 1: Selektori i osnove jQuery Tutorial - Prvi koraci: Osnove i Selektori jQuery Tutorial - Prvi koraci: Osnove i Selektori Prošli tjedan sam govorio o tome koliko je jQuery važan bilo kojem modernom web programeru i zašto je sjajan. Ovaj tjedan, mislim da je došlo vrijeme da se umažemo rukama s nekim kodom i naučimo kako…
• 2: Metode i funkcije Uvod u jQuery (2. dio): Metode i funkcije Uvod u jQuery (2. dio): Metode i funkcije Ovo je dio stalnog uvođenja početnika u seriju web programa za jQuery. Prvi dio je pokrenuo osnove jQueryja o tome kako ga uključiti u svoj projekt i odabire. U drugom dijelu, nastavit ćemo s…
• 3: Čekanje na učitavanje stranice i anonimne funkcije Uvod u jQuery (3. dio): Čekanje na stranicu za učitavanje i anonimne funkcije Uvod u jQuery (3. dio): Čekanje na stranicu za učitavanje i anonimne funkcije jQuery je vjerojatno osnovna vještina za moderni web programer, a u ovoj kratkoj mini seriji nadam se da ću vam dati znanje kako biste je počeli koristiti u vlastitim web projektima. U…
• 4: Događaji jQuery Tutorial (Dio 4) - Slušatelji događaja jQuery Tutorial (Dio 4) - Slušatelji događanja Danas ćemo to povisiti i stvarno pokazati gdje jQuery sjaji - događaji. Ako ste pratili prethodne vodiče, sada biste trebali dobro razumjeti osnovni kod ...
• Otklanjanje pogrešaka s Chrome alatima za razvojne programere Otkrivanje problema s web-lokacijama s alatom za razvojne programere Chrome ili Firebug Otkrivanje problema s web-lokacijama s alatima za razvojne programere Chrome ili Firebug Ako ste dosad pratili moje jQuery tutorijale, možda ste se već susreli s nekim problemima s kodom i ne znate kako popraviti ih. Kad se suočite s nefunkcionalnim bitnim kodom, vrlo je ...

Š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 razmotriti korištenje usluge treće strane, Flickr - od koje možemo koristiti AJAX za dohvaćanje nekih slika pomoću JSON vrste podataka. Zapravo nije 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 neko vrijeme još jedan tutorial o rukovanju AJAX-om u WordPress-u radi slanja kontaktnog obrasca. Tutorial o korištenju AJAX-a u WordPress-u Tutorial o korištenju AJAX-a u WordPress-u AJAX je izvanredna web tehnologija koja nas je odvela dalje od jednostavne “kliknite vezu, idite na drugu stranicu” struktura Interneta 1.0. Omogućuje web lokacijama da dinamično dohvaćaju i prikazuju sadržaj bez korisnika ..., pa ćete to možda morati provjeriti; To uključuje pisanje vlastitog PHP alata i njegovo integriranje u “službeno” WordPress AJAX postupak.

AJAX metoda

Evo osnovnog formata AJAX zahtjeva:

$ .ajax (vrsta: "GET ili POST", url: "API ili URL vašeg PHP obradnika", vrsta podataka: "JSON", // ovisno o vrsti podataka koju želite vratiti, ali JSON su najčešći podaci: // skup ključeva: parovi "vrijednost", uspjeh: funkcija (podaci) // rukovanje uspješnim povratkom podataka, pogreška: funkcija (poruka) // obraditi pogrešku);

U početku ovo 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ći do primjera stvarnog svijeta.

Flickr API AJAX

U ovom ćemo primjeru zgrabiti oznake povezane s trenutnim WordPress postom i dohvatiti neke slike koje ćemo dodati na kraju članka. Sličan je primjer u jQuery dokumentaciji, ali koristi prečac koji se zove 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 ćemo to učiniti.

Prvo, jedan gore single.php i pokušat ćemo odjeknuti jednostavan popis trenutnih oznaka posta za odvojeni zarez. Tipično, ti bi koristi the_tags () to učiniti, 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 ():

Ime.","; ?>

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 - u svrhu očuvanja uvlačenja, kod je dostupan na ovom PasteBin-u).

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 iteraciju iznad stavke koji su vraćeni.

$ .each (data.items, funkcija (i, stavka) if (i == 3) vracanje false; // zaustaviti kad imamo 3 $ ("# flickr"). append ("
SEO razmatranja
To nije glavna poanta, ali budući da se bavite razvojem web stranica, to treba napomenuti: 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 sličan iframe-u za sav sadržaj koji se dinamički učitava. Pametno koristite AJAX 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 koga će drugi imati koristi, razmislite o tome kako ga objaviti na našoj stranici s odgovorima.