JQuery-opas (osa 5): AJAX he kaikki!

Mainos

Kun olemme lähellä jQuery-pienoisoppaissarjamme loppua, on aika tutkia tarkemmin yhtä jQueryn eniten käytettyjä ominaisuuksia. AJAX sallii verkkosivuston kommunikoida palvelimen kanssa taustalla ilman, että koko sivua tarvitsee ladata uudelleen. Facebook-tyylisissä äärettömissä tilavirroissa lomaketietojen lähettämiseen on miljoona erilaista tosielämän tilannetta, joissa tämä tekniikka voi olla hyödyllinen.

Jos et ole lukenut aiempia opetusohjelmia, suosittelen, että teet sen ennen kuin käsittelet tätä, koska ne rakentuvat toisiinsa.

• Johdanto: Mikä on jQuery ja miksi sinun pitäisi välittää? Verkon tekeminen interaktiiviseksi: Johdatus jQueryynjQuery on asiakaspuolen komentosarjakirjasto, jota lähes kaikki nykyaikaiset verkkosivustot käyttävät - se tekee verkkosivustoista vuorovaikutteisia. Se ei ole ainoa Javascript-kirjasto, mutta se on kehittynein, tuetuin ja eniten käytetty ... Lue lisää
• 1: Valitsimet ja perusteet jQuery-opas - Aloittaminen: Perusteet ja valitsimetViime viikolla puhuin siitä, kuinka tärkeä jQuery on kaikille nykyaikaisille web-kehittäjille ja miksi se on mahtava. Tällä viikolla mielestäni on aika saada kädet likaantumaan jollain koodilla ja oppia kuinka ...
  instagram viewer
  Lue lisää
• 2: Menetelmät Johdanto jQueryyn (osa 2): Menetelmät ja toiminnotTämä on osa käynnissä olevaa aloittelijaa jQuery-web-ohjelmasarjoihin. Osa 1 kattoi jQuery-perusteet sen sisällyttämisestä projektiisi ja valitsimiin. Osassa 2 jatkamme ... Lue lisää
• 3: Sivun latauksen ja nimettömien toimintojen odottaminen Johdanto jQueryyn (osa 3): Sivun odottaminen ladattavaksi ja nimettömät toiminnotjQuery on kiistatta välttämätön taito nykyaikaiselle web-kehittäjälle, ja toivon voivani antaa sinulle tämän lyhyen minisarjan tiedon käytön aloittamiseksi omissa verkkoprojekteissasi. Sisään... Lue lisää
• 4: Tapahtumat jQuery-opas (osa 4) - Tapahtuman kuuntelijatTänään me ryhdymme siihen loven ja näytämme todella missä jQuery loistaa - tapahtumat. Jos seurasi aiempia opetusohjelmia, sinun pitäisi nyt olla melko hyvä ymmärrys peruskoodista ... Lue lisää
• Virheenkorjaus Chromen kehittäjätyökaluilla Selvitä verkkosivustojen ongelmat Chrome-kehittäjätyökaluilla tai FirebugillaJos olet toistaiseksi seurannut jQuery-oppaani, olet jo saattanut joutua joihinkin koodiongelmiin etkä tiedä kuinka korjata ne. Kun se kohtaa toimimattoman koodibitin, se on erittäin ... Lue lisää

Mikä?

AJAX on lyhenne sanasta Asynkroninen Javascript ja XML, mutta avainsana tässä on asynkroninen. Asynkroninen tarkoittaa tosiasiaa, että nämä pyynnöt esiintyvät taustalla, eivät keskeyttämättä käyttäjän selauskokemusta. Et ole luultavasti edes huomannut sitä aikaisemmin, mutta jos verkkosivusto päivittää itseään dynaamisesti, on olemassa suuri mahdollisuus, että se käyttää AJAX: ää siihen.

Ennen AJAX: ää, kaikenlainen vuorovaikutus palvelimen kanssa, olipa kyse sitten uuden tiedon noutamisesta tai tietojen lähettämisestä takaisin käyttäjältä, olisi pitänyt tehdä uuden sivun lataamisen ja uudelleenohjauksen avulla.

Tänään tarkastelemme ulkopuolisen palvelun, Flickrin, käyttöä, jolta voimme käyttää AJAX: ää hakea joitain kuvia JSON-tietotyypin avulla. Sillä ei ole väliä kuinka Flickr toteuttaa asioiden vastaanottopuolen, koska se on kauneutta API - kaikki, mitä meidän on tiedettävä, on API-URL-osoite, millaisia ​​tietoja me palautamme ja kuinka niitä käsitellä.

Lisälukemista varten kirjoitin jonkin aikaa sitten toisen oppaan käsittelemme AJAX: ää WordPressissä yhteyslomakkeen lähettämistä varten Opetusohjelma AJAX: n käytöstä WordPressissäAJAX on merkittävä verkkotekniikka, joka on siirtänyt meidät pelkän "napsauta linkkiä, siirry toiselle sivulle" ulkopuolelle Internet 1.0: n rakenne. Sen avulla verkkosivustot voivat dynaamisesti hakea ja näyttää sisältöä ilman käyttäjä ... Lue lisää , joten kannattaa tarkistaa myös tämä; siihen sisältyy oman PHP-käsittelijän kirjoittaminen ja integroiminen “viralliseen” WordPress AJAX -prosessiin.

AJAX-menetelmä

Tässä on AJAX-pyynnön perusmuoto:

$ .ajax ({tyyppi: "GET or POST", URL: "API tai PHP-käsittelijän URL-osoite", tietotyyppi: "JSON", // riippuen siitä, millaisia ​​tietoja haluat palauttaa, mutta JSON on eniten yleinen data: {// avainsarja: "arvo" -parit}, menestys: toiminto (data) {// käsittelee onnistunut tietojen palautus}, virhe: toiminto (viesti) {// käsittele virhe } });

Tämä näyttää aluksi melko monimutkaiselta - jota ei auttanut tämän koodi-laajennuksen puutteellinen sisennys - mutta näet kuinka helppoa se on, kun pääset oikean maailman esimerkkiin.

Flickr API AJAX

Tässä esimerkissä tartumme nykyiseen WordPress-viestiin liittyviin tunnisteisiin ja haemme joitain kuvia artikkelin loppuun lisättäviksi. Siellä samanlainen esimerkki jQuery-dokumentaatiossa, mutta se käyttää oikotiemenetelmää nimeltään getJSON () sen sijaan, että selitettäisiin täysi AJAX-muoto. Vaikka tämä on kelvollinen tapa tehdä asioita, jos tiedät, että aiot vain saada JSON-tietoja takaisin, tunnen, että varsinaisen AJAX-menetelmän oppiminen on tärkeämpää, joten me teemme sen.

Ensin yksi ylös single.php ja yritämme kaikua yksinkertainen pilkuilla erillinen luettelo nykyisistä postitunnisteista. Yleensä käyttäisit the_tags () tehdä tämä, mutta se ei ole hyvä, koska haluamme lopulta tallentaa nämä muuttujana samalla the_tags () kaikuu ne suoraan esimuotoiltuina. Sen sijaan käytämme get_the_tags ():

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

Tämä toimii hienosti, joten lähetämme tämän AJAX-pyynnön Flickr API -osoitteeseen seuraavasti (huomaa, tämä on kuvakaappaus - sisennyksen säilyttämiseksi koodi on saatavana osoitteessa tämä PasteBin).

Tässä vaiheessa kaikki mitä se tekee, se lähettää selainkonsolille tai hälyttää virheilmoituksen, jos sellainen on. Lisää tosiasiallisesti palautettujen tietojen kanssa jotakin sijoitettavia kuvia varten:

Ja muokkaa menestys parametri AJAX - kutsua iteroimaan kohdetta jotka palautetaan.

$ .each (data.kohdat, funktio (i, tuote) {if (i == 3) palauttaa vääriä; // lopeta kun meillä on 3 dollaria ("# flickr"). append (""); });

Ja siellä meillä se on. Olemme liittämis- 3 tuotetta palautetusta JSON -objektista (tiedot ovat nolla-indeksoituja, joten jos siirrytään kohtaan 3, olemme tosiasiassa neljäs. Sekava, tiedän. Tuolloin käytämme palauta väärä hypätä ulos kukin () iteraattori) .Olen jo tutkinut palautettujen objektien sisällöt, joten tiedän tietorakenteen ja poistan vain linkin ja IMG-viitteen. Jos haluat tietää, mitä muuta palautetaan, heitä vain konsoli.logi (tuote) siellä.

Tässä ovat testisivustoni tulokset ja täysi koodi tässä PasteBinissä. Huomaa, että palautetut tulokset ovat periaatteessa roskaa - viestini sisälsi tunnisteen tee-se-itse varten a walk-in kana-ajo, ja Flickr on antanut minulle DIY-neulomisen. Kiva. Tämä on tietysti yksi esteistä, joita kohtaat työskennellessäsi sovellusliittymän kanssa ja tekemällä asioita automaattisesti; voit joko merkitä viestisi uudelleen (huomattava yritys), muuttaa pyyntöä "kaikki" tunnisteiden "minkä tahansa" sijasta (todennäköisesti palauttaa) tai tässä tapauksessa mitään) tai luo uusi mukautettu kenttä, jolle määrität kohdennetun avainsanan käytettäväksi sovellusliittymän kanssa (todennäköisesti helpoin).

SEO-näkökohdat

Tämä ei ole tärkeä asia, mutta koska yrität kehittää verkkosivustoja, sen pitäisi olla mainittu: hakukoneet eivät indeksoi sisältöä, jota ei ole sivun lataamisen aikana, kuten mitään tehtyä AJAX: n kautta. Ehdottomasti pahin asia, jonka voit tehdä, olisi täydellinen AJAXify blogisi siten, että kotisivu oli vain iframe-kaltainen säilö koko dynaamisesti ladattavalle sisällölle. Käytä AJAX: ta viisaasti parantaa sivun sisältöä, ei korvaus. Tai kohtaavat vakavat seuraukset.

Kiitos käsittelystä ja toivon, että olen antanut sinulle ideoita. Flickr ei tietenkään ole ainoa sovellusliittymä siellä - vain Google “julkinen sovellusliittymä”Ja olet varma, että löydät lisää asioita, joilla voit pelata.

Ensi viikolla järjestetään jQuery Tutorial -sarjan viimeinen oppitunti, kun tarkistamme jQuery UI -laajennuksen. Kuten koskaan, kommentit ja ehdotukset ovat tervetulleita; Jos sinulla on kysymys, josta muut hyötyvät, harkitse sen lähettämistä vastauksille -sivustolle.