Vadnica za jQuery (5. del): AJAX Them All!

Oglas

Ko se bliža konec naše mini tutorial serije jQuery, je čas, da podrobneje pogledamo eno najpogosteje uporabljenih funkcij jQueryja. AJAX omogoča spletnemu mestu, da komunicira s strežnikom v ozadju, ne da bi bilo treba ponovno naložiti celotno stran. Od neskončnih tokov stanja na Facebooku do pošiljanja podatkov o obrazcih je milijon različnih resničnih življenjskih situacij, v katerih je ta tehnika lahko koristna.

Če še niste prebrali prejšnjih vadnic, predlagam, da se tega lotite, preden se tega lotite, ko gradijo drug drugega.

• Uvod: Kaj je jQuery in zakaj bi morali skrbeti? Izdelava spletnega interaktivnega: uvod v jQueryjQuery je skriptna knjižnica na strani odjemalca, ki jo uporablja skoraj vsako sodobno spletno mesto - spletna mesta naredijo interaktivne. To ni edina Javascript knjižnica, ampak je najbolj razvita, najbolj podprta in najbolj razširjena ... Preberi več
• 1: Izbirniki in osnove Vadnica za jQuery - Uvod: Osnove in izbirnikiPrejšnji teden sem govoril o tem, kako pomemben je jQuery za vsakega sodobnega spletnega razvijalca in zakaj je super. Ta teden mislim, da je čas, da si umažemo roke z neko kodo in se naučimo, kako ...
  instagram viewer
  Preberi več
• 2: Metode Uvod v jQuery (2. del): Metode in funkcijeTo je del stalne predstavitve začetnikov v seriji spletnih programov jQuery. Prvi del je obravnaval osnove jQueryja, kako ga vključiti v svoj projekt, in izbirnike. V drugem delu bomo nadaljevali z ... Preberi več
• 3: Čakanje na nalaganje strani in anonimne funkcije Uvod v jQuery (3. del): Čakanje na stran za nalaganje in anonimne funkcijejQuery je zagotovo bistvena spretnost sodobnega spletnega razvijalca in v tej kratki mini seriji upam, da vam bom dal znanje, da ga začnete uporabljati v svojih lastnih spletnih projektih. V ... Preberi več
• 4: Dogodki Vadnica za jQuery (4. del) - Poslušalci dogodkovDanes bomo to zarezali in res pokazali, kje se sveti jQuery - dogodki. Če ste sledili preteklim vajam, bi morali zdaj dokaj dobro razumeti osnovno kodo ... Preberi več
• Odpravljanje napak z orodji za razvijalce za Chrome Ugotovite težave s spletnim mestom z orodji za razvijalce Chrome ali FirebugČe ste doslej spremljali moje vaje za jQuery, ste morda že naleteli na nekaj težav s kodo in ne veste, kako jih odpraviti. Ko se soočimo z nefunkcionalnim bitnim kodom, je zelo ... Preberi več

Kaj?

AJAX je kratica za Asinhroni Javascript in XML, vendar je ključna beseda tukaj asinhrono. Asinhrono se nanaša na dejstvo, da se te zahteve pojavljajo v ozadju in ne prekinjajo uporabnikove izkušnje z brskanjem. Verjetno ga še nikoli niste opazili, če pa se spletno mesto dinamično posodablja, obstaja velika možnost, da to uporabi AJAX.

Pred AJAX bi bilo treba kakršno koli interakcijo s strežnikom, naj bo to, da pridobiva nove podatke ali pošlje informacije nazaj od uporabnika, opraviti z nalaganjem nove strani in preusmeritvami.

Danes si bomo ogledali uporabo storitve tretje osebe, Flickr - od katere bomo lahko uporabili AJAX za pridobivanje nekaterih slik s podatkovnim tipom JSON. Pravzaprav ni pomembno, kako Flickr izvaja prejemno stran stvari, ker je to lepota API-ji - vse kar moramo vedeti je URL API, kakšne podatke bomo dobili nazaj in kako z njimi ravnati.

Za nadaljnje branje sem pred časom napisal še eno vadnico ravnanje z AJAX v WordPressu za oddajo kontaktnega obrazca Vadnica o uporabi AJAX v WordPressuAJAX je izjemna spletna tehnologija, ki nas je preselila mimo preproste povezave "klik, pojdi na drugo stran" struktura interneta 1.0. Spletnim mestom omogoča, da dinamično pridobivajo in prikazujejo vsebino brez uporabnik ... Preberi več , da boste morda želeli preveriti tudi to; vključuje pisanje lastnega PHP-a in njegovo vključitev v "uradni" WordPress AJAX postopek.

Metoda AJAX

Tu je osnovna oblika zahteve AJAX:

$ .ajax ({vrsta: "GET ali POST", URL: "API ali URL vašega PHP ravnatelja", podatkovni tip: "JSON", // odvisno od tega, kakšne podatke želite nazaj, vendar je JSON najbolj skupni podatki: {// niz ključev: "vrednost" parov}, uspeh: funkcija (podatki) {// ročaj za uspešno vrnitev podatkov}, napaka: funkcija (sporočilo) {// ravnanje z napako } });

Na začetku je videti precej zapleteno - ne pomaga pomanjkanje vdolbin v tem vtičniku, vendar boste videli, kako enostavno je, ko pridete do primera iz resničnega sveta.

Flickr API AJAX

V tem primeru bomo zgradili oznake, povezane s trenutno objavo v WordPressu, in na koncu članka prispeli nekaj slik, ki jih bomo dodali. Tam je podoben primer v dokumentaciji jQuery, vendar uporablja način, imenovan bližnjica getJSON () namesto da bi pojasnili celoten format AJAX. Čeprav je to veljaven način, če veste, da boste podatke dobili samo JSON, menim, da je učenje dejanske metode AJAX pomembnejše, tako da bomo to storili.

Najprej ena navzgor single.php poskušali bomo odkriti preprost seznam vejic, ki so trenutno ločene z vejicami. Običajno bi uporabili the_tags () to storiti, vendar to ni dobro, saj jih želimo sčasoma shraniti kot spremenljivko the_tags () odmevi jih naravnost vnaprej oblikovane. Namesto tega bomo uporabili get_the_tags ():

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

To deluje lepo, zato bomo to pošljeli znotraj zahteve AJAX URL-ju API-ja Flickr (upoštevajte, da je posnetek zaslona - da bi ohranili vdolbine, je koda na voljo na ta pasteBin).

V tem trenutku vse to stori, da odda v konzolo brskalnika ali opozori na sporočilo o napaki, če obstaja. Če želite dejansko vrniti nekaj z vrnjenimi podatki, dodajte nekje nameščene slike:

In uredite uspeh parameter AJAX klica za ponovitev nad predmeti ki se vrnejo.

$ .each (data.items, funkcija (i, točka) {if (i == 3) vrne false; // ustavi se, ko imamo 3 $ ("# flickr"). append (""); });

In tam ga imamo. Smo priloga 3 elemente iz vrnjenega JSON predmeta (podatki so indeksirani nič, tako da če pridemo do točke 3, smo dejansko v četrtem elementu. Zmedeno, vem. V tem trenutku uporabimo vrniti napačno da skočimo iz vsak () iterator). Pregledala sem že vsebino vrnjenih predmetov, zato poznam strukturo podatkov in izvlečem samo povezavo in referenco IMG. Če vas zanima, kaj se še vrne, vrzite console.log (element) tam.

Tu so rezultati na mojem testnem mestu in celotno kodo na tem mestu PasteBin. Upoštevajte, da so vrnjeni rezultati v bistvu smeti - moja objava je vsebovala oznako Naredi sam za piščančji tek, in Flickr mi je dal samostojno pletenje. Lepo. Seveda je to ena od težav, s katerimi se srečujete pri delu z API-jem in samodejnem ravnanju; lahko bodisi ponovno označite svoje objave (velik podvig), spremenite zahtevo in zahtevate oznake "vse" namesto "kakršnih koli" (verjetno se bodo vrnili nič v tem primeru) ali ustvarite novo polje po meri, v katerega bi določili ciljno ključno besedo, ki jo želite uporabljati z API-jem (verjetno najlažje).

SEO premisleki

To ni pomembna točka, toda ker se ukvarjate z razvojem spletnih mest, bi moralo biti omenjeno: iskalniki ne bodo indeksirali vsebine, ki ne obstaja ob nalaganju strani, kot je bilo storjeno prek AJAX. Absolutno najslabše, kar bi lahko naredili, je, da v celoti AJAXify svoj blog, tako da je bila domača stran zgolj vsebnik, podoben ogrodju, za vso vsebino, ki se dinamično naloži. Uporabite AJAX pametno, da izboljšati vsebino strani, ne kot zamenjava. Ali pa se soočite s strašnimi posledicami.

Hvala za branje in upam, da sem vam dal nekaj idej. Seveda Flickr ni edini API tam - samo Google "javni API"In zagotovo boste našli več stvari, s katerimi bi se lahko igrali.

Naslednji teden bo zadnja lekcija v seriji jQuery Tutorial, ko bomo preverjali vtičnik za jQuery UI. Kot vedno so komentarji in predlogi dobrodošli; če imate vprašanje, od katerega bodo imeli koristi drugi, razmislite o objavi na našem spletnem mestu z odgovori.