„jQuery“ vadovėlis (5 dalis): AJAX jie visi!

Skelbimas

Artėjant „jQuery“ mini vadovėlių serijos pabaigai, atėjo laikas pažvelgti į vieną iš labiausiai naudojamų „jQuery“ funkcijų. AJAX leidžia svetainei bendrauti su serveriu fone, nereikalaujant viso puslapio perkrauti. Nuo „Facebook“ stiliaus begalinių būsenų srautų iki formos duomenų pateikimo yra milijonas skirtingų realaus gyvenimo situacijų, kuriose ši technika gali būti naudinga.

Jei neskaitėte ankstesnių vadovėlių, siūlau jums tai padaryti prieš pradedant spręsti, nes jie grindžiasi vienas kitu.

• Įvadas: kas yra „jQuery“ ir kodėl jums tai turėtų rūpėti? Padaryti internetą interaktyviu: „jQuery“ įvadas„jQuery“ yra kliento scenarijų biblioteka, kurią naudoja beveik kiekviena šiuolaikinė svetainė - ji daro svetaines interaktyviomis. Tai ne vienintelė „Javascript“ biblioteka, tačiau ji yra labiausiai išsivysčiusi, labiausiai palaikoma ir plačiausiai naudojama ... Skaityti daugiau
• 1: Pasirinkėjai ir pagrindai „jQuery“ pamoka - pradžia: pagrindai ir parinkėjaiPraėjusią savaitę aš kalbėjau apie tai, kokia svarbi „jQuery“ bet kuriam šiuolaikiniam interneto kūrėjui ir kodėl tai nuostabu. Šią savaitę, manau, atėjo laikas susitepti rankas su kažkokiu kodu ir išmokti, kaip ...
  instagram viewer
  Skaityti daugiau
• 2: Metodai „JQuery“ (2 dalis) įvadas: metodai ir funkcijosTai pradedančiųjų pradedančiojo „jQuery“ interneto programavimo serijos įžangos dalis. 1 dalyje aprašyti „jQuery“ pagrindai, kaip įtraukti ją į savo projektą, ir parinkėjai. 2 dalyje mes tęsime su ... Skaityti daugiau
• 3: Laukiama puslapio įkėlimo ir anoniminių funkcijų Įvadas į „jQuery“ (3 dalis): Laukiama, kol puslapis bus įkeltas, ir anoniminės funkcijos„jQuery“ yra neabejotinai būtinas šiuolaikinio interneto kūrėjo įgūdis, todėl tikiuosi suteikti jums žinių, kad galėtumėte ja naudotis naudodamiesi savo internetiniais projektais, šioje trumpoje mini serijoje. Į ... Skaityti daugiau
• 4: Renginiai „jQuery“ vadovėlis (4 dalis) - renginių klausytojaiŠiandien mes pradėsime tai pažymėti ir tikrai parodysime, kur šviečia „jQuery“ - įvykiai. Jei sekėte ankstesnius vadovus, dabar turėtumėte gana gerai suprasti pagrindinį kodą ... Skaityti daugiau
• Derinimas naudojant „Chrome“ kūrėjo įrankius Išsiaiškinkite svetainių, susijusių su „Chrome“ kūrėjų įrankiais ar „Firebug“, problemasJei iki šiol sekėte mano „jQuery“ vadovus, galbūt jau susidūrėte su kai kuriomis kodo problemomis ir nežinote, kaip jas išspręsti. Kai susiduri su nefunkciniu bitų kodu, tai labai ... Skaityti daugiau

Kas?

AJAX yra santrumpa Asinchroninis „Java“ scenarijus ir XML, bet čia yra raktinis žodis asinchroninis. Asinchroninis reiškia, kad šios užklausos atsiranda fone, netrukdydamos naršyti po vartotojo. Tikriausiai niekada to net nepastebėjote, bet jei svetainė dinamiškai atnaujina savo veiklą, yra didelė tikimybė, kad ji tai atliks naudodama AJAX.

Prieš AJAX bet kokia sąveikos su serveriu forma, nesvarbu, ar tai būtų naujų duomenų gavimas, ar informacijos paskelbimas iš vartotojo, turėjo būti atlikta naudojant naują puslapio įkėlimą ir nukreipimus.

Šiandien mes žiūrėsime naudodamiesi trečiosios šalies paslauga „Flickr“, iš kurios mes galime naudoti AJAX, kad gautume keletą nuotraukų, naudodami JSON duomenų tipą. Iš tikrųjų nesvarbu, kaip „Flickr“ įgyvendina daiktų priėmimą, nes tai yra to grožis API - viskas, ką turime žinoti, yra API URL, kokius duomenis grįšime ir kaip jais manipuliuoti.

Tolesniam skaitymui prieš kurį laiką parašiau dar vieną vadovėlį tvarkydami AJAX „WordPress“, norėdami pateikti kontaktinę formą AJAX naudojimo vadove „WordPress“ instrukcijaAJAX yra nuostabi žiniatinklio technologija, kuri perkėlė mus už paprastesnės „spustelėjimo nuorodos, eik į kitą puslapį“ ribų. interneto 1.0 struktūra. Tai leidžia svetainėms dinamiškai atsisiųsti ir rodyti turinį be Vartotojas... Skaityti daugiau , todėl galbūt norėsite patikrinti ir tai; tai reiškia, kad reikia parašyti savo PHP tvarkyklę ir integruoti ją į „oficialų“ WordPress AJAX procesą.

AJAX metodas

Štai pagrindinis AJAX užklausos formatas:

$ .ajax ({tipas: „GET or POST“, URL: „API arba jūsų PHP tvarkytuvo URL“, duomenų tipas: „JSON“, // atsižvelgiant į tai, kokių duomenų norite atsiųsti, bet JSON yra pats geriausias bendrieji duomenys: {// raktų rinkinys: "vertės" poros}, sėkmė: funkcija (duomenys) {// tvarkyti sėkmingą duomenų grąžinimą}, klaida: funkcija (pranešimas) {// tvarkyti klaidą } });

Iš pradžių tai atrodo gana sudėtinga - nepadeda šio kodo įskiepio įtrauka - tačiau pamatysite, kaip lengva patekti į realaus pasaulio pavyzdį.

„Flickr“ API AJAX

Šiame pavyzdyje mes sugriebsime žymes, susietas su dabartiniu „WordPress“ įrašu, ir pateiksime keletą vaizdų, kurie bus pridedami straipsnio pabaigoje. Ten yra panašus pavyzdys „jQuery“ dokumentacijoje, tačiau jis naudoja trumpųjų metodų, vadinamų getJSON () užuot aiškinęs visą AJAX formatą. Nors tai yra tinkamas būdas atlikti veiksmus, jei žinote, kad atgausite tik JSON duomenis, manau, kad svarbiau yra išmokti tikrojo AJAX metodo, taigi, kaip mes tai padarysime.

Pirma, vienas aukštyn single.php ir mes bandysime atkartoti paprastą kableliais atskirą dabartinių įrašų žymų sąrašą. Paprastai jūs naudojate the_tags () tai padaryti, bet tai nėra gerai, nes mes norime, kad jie galų gale būtų išsaugoti kaip kintamasis the_tags () atkuria juos iš anksto suformatuotus. Vietoj to naudosime get_the_tags ():

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

Tai veikia gerai, todėl šią AJAX užklausos dalį išvesime į „Flickr“ API URL taip: (atkreipkite dėmesį, tai yra ekrano kopija - norint išsaugoti įtrauką, kodą galima rasti šį „PasteBin“).

Šiuo metu visa tai daroma norint išvesti į naršyklės pultą arba įspėti apie klaidos pranešimą, jei jo yra. Norėdami iš tikrųjų ką nors padaryti su grąžinamais duomenimis, pridėkite kai kuriuos paveikslėlius, kuriuos reikia įdėti:

Ir redaguokite sėkmė AJAX skambučio iteracijos per parametrą daiktai kurie grąžinami.

$ .each (data.items, function (i, item) {if (i == 3) return false; // sustokite, kai turime 3 USD ("# flickr"). append (""); });

Ir ten mes tai turime. Mes esame pridedantis 3 elementai iš grąžinto JSON objekto (duomenys nulio indeksuojami, taigi, jei pateksite į 3 elementą, mes iš tikrųjų esame ketvirtame elemente. Paini, žinau. Tuo metu mes naudojame grąžinti klaidingą iššokti iš kiekvienas () iteratorius). Aš jau išnagrinėjau grąžintų objektų turinį, todėl žinau duomenų struktūrą ir išskiriu tik nuorodą ir IMG nuorodą. Jei norite sužinoti, kas dar grąžinta, tiesiog išmeskite a console.log (elementas) ten.

Štai rezultatai mano bandymo svetainėje ir visas kodas šiame „PasteBin“. Atkreipkite dėmesį, kad grąžinti rezultatai iš esmės yra nepageidaujami - mano įraše buvo žyma Pasidaryk pats dėl pasivaikščiojimas vištiena, o „Flickr“ suteikė mezgimo „pasidaryk pats“. Malonu. Žinoma, tai yra viena iš kliūčių, su kuriomis susiduriate dirbdami su API ir darydami reikalus automatiškai; galite arba vėl pažymėti savo įrašus (nemažas įsipareigojimas), pakeisti prašymą paprašyti „visų“ žymų, o ne „bet kokių“ (tikėtina, kad grįš nieko šiuo atveju) arba sugalvokite naują pasirinktinį lauką, kuriame nurodytumėte tikslinį raktinį žodį, kurį norite naudoti su API (tikriausiai lengviausia).

SEO sumetimai

Tai nėra pagrindinis dalykas, tačiau kadangi jūs kuriate svetaines, tai turėtų būti paminėta: paieškos varikliai neindeksuos turinio, kurio nėra įkeliant puslapį, pvz., nieko nepadaryto per AJAX. Absoliučiai blogiausias dalykas, kurį galėtumėte padaryti, būtų visiškai AJAXifikuoti savo tinklaraštį, kad pagrindinis puslapis būtų tik į „iframe“ panašus viso turinio, į kurį įkeliamas dinaminis turinys, konteineris. Protingai naudokitės AJAX padidinti puslapio turinį, o ne kaip pakeitimas. Arba susiduria su skaudžiomis pasekmėmis.

Ačiū, kad skaitote, ir tikiuosi, kad pateikiau jums keletą idėjų. Žinoma, „Flickr“ nėra vienintelė ten esanti API - tiesiog „Google“viešoji APIIr tikrai rasite daugiau dalykų, su kuriais galėtų žaisti.

Kitą savaitę bus paskutinė „jQuery Tutorial“ serijos pamoka, kai patikrinsime „jQuery“ vartotojo sąsajos papildinį. Kaip visada, komentarai ir pasiūlymai laukiami; Jei turite klausimų, kurie bus naudingi kitiems, apsvarstykite galimybę paskelbti jį mūsų atsakymų svetainėje.