JQuery juhendaja (5. osa): AJAX kõik!

Reklaam

JQuery minijuhendussarja lõpu lähedal on käes aeg uurida põhjalikumalt jQuery ühte enim kasutatud funktsiooni. AJAX võimaldab veebisaidil suhelda taustal asuva serveriga, ilma et oleks vaja kogu lehte uuesti laadida. Alates Facebooki-laadsetest lõpmatutest olekuvoogudest kuni vormiandmete esitamiseni on miljon erinevat päriselusituatsiooni, kus see tehnika võib olla kasulik.

Kui te pole eelmisi õpetusi lugenud, soovitan teil seda enne lahendada, kuna need üksteisele toetuvad.

• Sissejuhatus: Mis on jQuery ja miks peaks teid huvitama? Veebi interaktiivseks tegemine: jQuery sissejuhatusjQuery on kliendipoolne skriptikogu, mida kasutab peaaegu iga kaasaegne veebisait - see muudab veebisaidid interaktiivseks. See pole ainus Javascripti teek, kuid see on kõige enam arenenud, kõige toetatud ja laialdasemalt kasutatav ... Loe rohkem
• 1: valijad ja põhitõed jQuery juhendaja - alustamine: põhitõed ja valijadEelmisel nädalal rääkisin sellest, kui oluline on jQuery iga kaasaegse veebiarendaja jaoks ja miks see on fantastiline. Sel nädalal arvan, et on aeg käes käsi mõne koodiga määrida ja saime teada, kuidas ...
  instagram viewer
  Loe rohkem
• 2: meetodid JQuery (2. osa) sissejuhatus: meetodid ja funktsioonidSee on osa pidevast jQuery veebiprogrammeerimissarja tutvustamisest. 1. osa hõlmas jQuery põhitõdesid selle kaasamiseks oma projekti ja valijaid. 2. osas jätkame ... Loe rohkem
• 3: lehe laadimise ja anonüümsete funktsioonide ootamine JQuery (3. osa) sissejuhatus: lehe ootamine ja anonüümsed funktsioonidjQuery on vaieldamatult kaasaegse veebiarendaja jaoks oluline oskus ja loodan selles lühikeses miniseerias anda teile teadmisi, et saaksite seda oma veebiprojektides kasutama hakata. ... Loe rohkem
• 4: sündmused jQuery juhendaja (4. osa) - sündmuste kuulajadTäna hakkame seda üles tõstma ja näitame, kus jQuery paistab - sündmused. Kui järgisite varasemaid õpetusi, peaks teil nüüd olema põhikoodist üsna hea arusaam ... Loe rohkem
• Silumine Chrome'i arendaja tööriistadega Saate teada saada veebisaidi probleeme Chrome'i arendaja tööriistade või FirebugigaKui olete seni jQuery õpetusi jälginud, võib-olla olete juba mõne koodiprobleemiga kokku puutunud ja pole teada, kuidas neid parandada. Mittefunktsionaalse bitti koodiga silmitsi seistes on see väga ... Loe rohkem

Mis asi?

AJAX on lühend Asünkroonne Javascript ja XML, kuid märksõna siin on asünkroonne. Asünkroonne viitab asjaolule, et need taotlused esinevad taustal, ei sega kasutaja sirvimiskogemust. Te pole seda kunagi varem isegi märganud, kuid kui veebisait värskendab end dünaamiliselt, on suur võimalus, et ta kasutab selleks AJAX-i.

Enne AJAX-i oleks igasugune serveriga suhtlemine, olgu see siis uute andmete toomine või kasutajalt teabe postitamine, tehtud uue lehe laadimise ja ümbersuunamiste abil.

Täna käsitleme kolmanda osapoole teenuse Flickri kasutamist - kellelt saame AJAX-i abil mõnda pilti tuua, kasutades JSON-i andmetüüpi. Tegelikult pole tähtis, kuidas Flickr asjade vastuvõtmise poolt rakendab, sest see on ilu API-d - kõik, mida peame teadma, on API URL, milliseid andmeid me tagasi saadame ja kuidas neid manipuleerida.

Edasiseks lugemiseks kirjutasin mõnda aega tagasi veel ühe õpetuse AJAX-i käsitlemine WordPressis kontaktvormi esitamiseks Juhend AJAXi kasutamiseks WordPressisAJAX on tähelepanuväärne veebitehnoloogia, mis viis meid kaugemale lihtsast „klõpsake lingist, minge teisele lehele“ Interneti 1.0 struktuur. See võimaldab veebisaitidel sisu dünaamiliselt tuua ja kuvada ilma kasutaja ... Loe rohkem , nii et võiksite seda ka kontrollida; see hõlmab oma PHP-töötleja kirjutamist ja selle integreerimist WordPress AJAX-i ametlikku protsessi.

AJAX-meetod

Siin on AJAX-i päringu põhivorming:

$ .ajax ({tüüp: "GET or POST", URL: "API või teie PHP-käitleja URL", andmetüüp: "JSON", // sõltuvalt sellest, milliseid andmeid soovite tagasi saada, kuid JSON on kõige rohkem levinud andmed: {// võtmekomplekt: "väärtus" paarid}, edukus: funktsioon (andmed) {// käsitlema andmete edukat tagastamist}, tõrge: funktsioon (teade) {// veaga hakkama saama } });

See tundub alguses üsna keeruline - seda ei aita selle koodi pistikprogrammi taande puudumine -, kuid näete, kui lihtne see on pärismaailma näite juurde pääsemisel.

Flickri API AJAX

Selles näites haarame praeguse WordPressi postitusega seotud sildid ja toome mõned pildid artikli lõppu. Seal on sarnane näide jQuery dokumentatsioonis, kuid see kasutab otseteede meetodit nimega getJSON () selle asemel, et selgitada AJAX-vormingut. Ehkki see on kehtiv toimimisviis, kui teate, et soovite ainult JSON-i andmeid tagasi saada, on minu arvates olulisem tegeliku AJAX-meetodi õppimine, nii et seda teeme ka meie.

Esiteks üks üles single.php ja proovime kajastada praeguste postitussiltide lihtsat komadega eraldi loendit. Tavaliselt kasutaksite the_tags () seda teha, kuid see ei ole hea, kuna tahame neid lõpuks muutujana säilitada the_tags () kajab need otse vormindatud kujul. Selle asemel kasutame get_the_tags ():

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

See töötab kenasti, nii et väljastame selle AJAX-i päringu Flickri API URL-i järgmiselt (pange tähele, see on ekraanipilt - taande säilitamiseks on kood saadaval aadressil see PasteBin).

Sel hetkel teeb see kõik brauseri konsooli väljundiks või veateate teavitamiseks, kui selline on olemas. Kui soovite tagastatud andmetega midagi ette võtta, lisage sinna paigutatavate piltide asukoht:

Ja redigeerige edu AJAX-i kõne parameeter iteratsiooni üle üksused mis tagastatakse.

$ .each (data.items, funktsioon (i, element) {if (i == 3) return false; // lõpetage, kui meil on 3 dollarit ("# flickr"). append (""); });

Ja seal see meil on. Me oleme lisades 3 eset tagastatud JSON-i objektilt (andmed on indekseerimata nullist, nii et kui jõuda 3. üksuseni, oleme tegelikult neljandas üksuses. Segane, ma tean. Sel hetkel me kasutame tagasi vale välja hüpata iga() iteraator) .Olen juba uurinud tagastatud objektide sisu, nii et ma tean andmete ülesehitust ja eraldan ainult linki ja IMG-viiteid. Kui soovite teada, mida veel tagastatakse, visake lihtsalt a console.log (element) seal.

Siin on minu testi saidi tulemused ja täielik kood selles PasteBinis. Pange tähele, et tagastatud tulemused on põhimõtteliselt rämps - minu postituses oli silt DIY le sissekäigu kanajooksja Flickr kudus mulle DIY. Tore. Muidugi on see üks takistustest, millega kokku puutute, kui töötate API-ga ja teete asju automaatselt; võite oma postitused uuesti sildistada (märkimisväärne ettevõtmine), muuta taotlust küsida kõigi märkide asemel „kõik” (tõenäoliselt tagastatakse) sel juhul mitte midagi) või looge uus kohandatud väli, millele määraksite API-ga kasutatava märksõna (tõenäoliselt lihtsaim).

SEO kaalutlused

See pole oluline punkt, kuid kuna teil on veebisaitide arendamine, peaks see nii olema mainitud: otsingumootorid ei indekseeri sisu, mida pole lehe laadimisel olemas, näiteks midagi tehtud AJAX-i kaudu. Absoluutselt halvim asi, mida saaksite teha, oleks oma ajaveebi täielik AJAXifitseerimine, nii et avaleht oli kogu dünaamiliselt laaditud sisu jaoks iframe-laadne konteiner. Kasutage AJAXi targalt täiustama lehe sisu, mitte kui a asendamine. Või seiske silmitsi kohutavate tagajärgedega.

Täname, et lugesite ja loodan, et olen teile mõned ideed andnud. Muidugi pole Flickr ainus sealne API - lihtsalt Google “avalik API”Ja olete kindel, et leiate veel asju, millega saaksite mängida.

Järgmine nädal on jQuery juhendaja sarja viimane õppetund, kui kontrollime jQuery kasutajaliidese pistikprogrammi. Nagu ikka, on kommentaarid ja ettepanekud teretulnud; Kui teil on mõni küsimus, millest saavad kasu teised, kaaluge selle postitamist meie vastuste saidile.