Når vi er i nærheten av vår jQuery mini-opplæringsserie, er det på tide at vi tok en mer grundig titt på en av de mest brukte funksjonene i jQuery. AJAX tillater et nettsted å kommunisere med en server i bakgrunnen uten at hele siden skal lastes inn. Fra uendelige statusstrømmer i Facebook-stil til å sende skjemadata, er det en million forskjellige virkelige situasjoner der denne teknikken kan være nyttig.
Hvis du ikke har lest de forrige veiledningene, foreslår jeg at du gjør det før du takler dette når de bygger på hverandre.
- Innledning: Hva er jQuery og hvorfor skal du bryr deg? Gjør Internett interaktivt: En introduksjon til jQuery Å gjøre Internett-interaktiv: En introduksjon til jQuery jQuery er et klientsideskriptbibliotek som nesten alle moderne nettsider bruker - det gjør nettsteder interaktive. Det er ikke det eneste Javascript-biblioteket, men det er den mest utviklede, mest støttede og mest brukte .... Les mer
- 1: Selectors and Basics jQuery Tutorial - Komme i gang: Grunnleggende & Selectors jQuery Opplæringsprogram - Komme i gang: Grunnleggende og Selectors I forrige uke snakket jeg om hvor viktig jQuery er for enhver moderne webutvikler og hvorfor det er kjempebra. Denne uken, jeg tror det er på tide at vi fikk våre hender skitne med noe kode og lærte hvordan ... Les mer
- 2: Metoder Introduksjon til jQuery (del 2): Metoder og funksjoner Introduksjon til jQuery (del 2): Metoder og funksjoner Dette er en del av en igangværende introduksjon til jQuery webprogrammeringsserier. Del 1 dekket grunnleggende om jQuery om hvordan å inkludere det i prosjektet og selektorer. I del 2 fortsetter vi med ... Les mer
- 3: Venter på sidelast og anonyme funksjoner Introduksjon til jQuery (del 3): Venter på siden for å laste og anonyme funksjoner Introduksjon til jQuery (del 3): Venter på siden for å laste inn og anonyme funksjoner jQuery er uten tvil en viktig ferdighet for den moderne webutvikleren, og i denne korte mini-serien håper jeg å gi deg kunnskapen om å begynne å bruke det i dine egne webprosjekter. I ... Les mer
- 4: Hendelser jQuery opplæring (del 4) - Event Lyttere jQuery opplæring (del 4) - Event Lyttere I dag skal vi sparke det oppe og virkelig vise hvor jQuery skinner - hendelser. Hvis du fulgte de tidligere opplæringsprogrammene, bør du nå ha en ganske god forståelse av grunnkoden ... Les mer
- Feilsøking med verktøylinjer for Chrome Utvikle webområdeproblemer med verktøylinjer for Chrome Utviklerverktøy eller Firebug Finn ut nettsideproblemer med Chrome Developer Tools eller Firebug Hvis du har fulgt mine jQuery-opplæringsprogrammer så langt, kan det hende at du allerede har kjørt inn noen kodeproblemer og ikke vet hvordan å fikse dem. Når du møter en ikke-funksjonell bit av kode, er det veldig ... Les mer
En hva?
AJAX er et akronym for asynkron Javascript og XML, men søkeordet her er asynkront . Asynkron refererer til det faktum at disse forespørslene forekommer i bakgrunnen, og ikke forstyrrer brukeropplevelsen. Du har sikkert aldri merket det før, men hvis et nettsted oppdaterer seg dynamisk, er det en god sjanse for at AJAX bruker det.
Før AJAX, hvilken som helst form for samhandling med en server, enten det henter ny data eller sender informasjon tilbake fra brukeren, må det ha blitt gjort med en ny sidebelastning og omdirigeringer.
I dag skal vi se på å bruke en tredjepartstjeneste, Flickr - fra hvem vi kan bruke AJAX til å hente noen bilder ved hjelp av en JSON datatype. Det spiller ingen rolle hvordan Flickr implementerer mottakssiden av ting, for det er skjønnheten til APIer - alt vi trenger å vite er en API-nettadresse, hva slags data vi skal komme tilbake, og hvordan å manipulere det.
For videre lesing skrev jeg en annen opplæring for en stund siden om håndtering av AJAX i WordPress for et skjema for kontaktskjema. En veiledning om bruk av AJAX i WordPress. En veiledning om bruk av AJAX. I WordPress AJAX er en bemerkelsesverdig nettteknologi som flyttet oss utover det enkle "klikklinken", gå til en annen side "struktur av Internett 1.0. Det gjør det mulig for nettsteder å dynamisk hente og vise innhold uten brukeren ... Les mer, så du vil kanskje sjekke det ut også; Det innebærer å skrive din egen PHP-håndterer, og integrere det i den "offisielle" WordPress AJAX-prosessen.
AJAX-metoden
Her er det grunnleggende formatet for en AJAX-forespørsel:
$.ajax({ type: "GET or POST", url: "API or your PHP handler URL ", datatype:"JSON", // depending on what kind of data you want back, but JSON is the most common data: { //a set of key:"value" pairs }, success:function(data){ //handle a successful return of data }, error:function(message){ //handle the error } }); Dette ser ganske komplisert først - ikke hjulpet av mangel på innrykk fra denne kodepluggen - men du vil se hvor lett det er når du kommer til en ekte verdenseksempel.
Flickr API AJAX
I dette eksemplet skal vi ta tak i kodene som er knyttet til det nåværende WordPress-innlegget, og hente noen bilder som skal legges ved slutten av artikkelen. Det finnes et lignende eksempel i jQuery-dokumentasjonen, men det bruker en snarvei-metode som kalles getJSON () i stedet for å forklare et fullstendig AJAX-format. Selv om dette er en gyldig måte å gjøre ting på, hvis du vet at du bare kommer til å få JSON-data tilbake, føler jeg meg at det å lære den faktiske AJAX-metoden er viktigere, så er det slik vi skal gjøre det.
Først en opp single.php, og vi vil prøve å ekko ut en enkel komma-separat liste over gjeldende postkoder. Vanligvis vil du bruke the_tags () for å gjøre dette, men det er ikke bra da vi vil til slutt lagre disse som en variabel, mens the_tags () ekko dem rett ut preformatted. I stedet bruker vi get_the_tags ():
name.", "; }?> Dette fungerer fint, så vi sender ut dette innvendig i en AJAX-forespørsel til Flickr API-nettadressen som følger (merk, dette er et skjermbilde - for å bevare innrykk, er koden tilgjengelig på denne PasteBin).
På dette punktet gjør alt det til å skrive ut til nettleserkonsollen, eller varsle en feilmelding hvis det er en. For å faktisk gjøre noe med de returnerte dataene, legg til et sted for bildene som skal plasseres:
Og rediger suksessparameteren for AJAX-anropet for å iterere over elementene som returneres.
$.each(data.items, function(i, item){ if(i==3) return false; // stop when we have 3 $("#flickr").append(" 
"); }); Og der har vi det. Vi legger til 3 elementer fra det returnerte JSON-objektet (dataene er null indeksert, så hvis vi kommer til element 3, er vi faktisk på fjerde element. Forvirrende, jeg vet. På det tidspunktet bruker vi tilbake falsk å hoppe ut av hver () iteratoren). Jeg har allerede undersøkt innholdet i gjenstandene som returneres, så jeg kjenner data strukturen og jeg utvider bare en kobling og IMG-referanse. Hvis du er interessert i å vite hva annet er returnert, bare kaste en console.log (item) der inne.
Her er resultatene på teststedet mitt og hele koden på denne PasteBin. Legg merke til at resultatene som returneres er i utgangspunktet søppelpost - innlegget mitt inneholdt taggen DIY for en walk-in kyllingkjøring, og Flickr har gitt meg DIY strikking. Hyggelig. Selvfølgelig er dette en av hindringene du møter når du arbeider med en API og gjør ting automatisk; Du kan enten ta på nytt innleggene dine (et betydelig foretak), endre forespørselen om å be om "alle" tagger i stedet for "noen" (sannsynligvis ikke returnere noe i dette tilfellet), eller kom med et nytt tilpasset felt som du vil angi et målrettet søkeord for bruk med APIen (sannsynligvis det enkleste).
SEO hensyn
Dette er ikke et viktig poeng, men siden du er i bransjen med å utvikle nettsteder, bør det nevnes: søkemotorer vil ikke indeksere innhold som ikke eksisterer ved sidebelastning, for eksempel alt gjort via AJAX. Det absolutt verste du kan gjøre, er å fullstendig AJAXify bloggen din slik at hjemmesiden bare var en iframe-aktig container for alt innholdet som er lastet inn dynamisk. Bruk AJAX klokt, for å forbedre sidens innhold, ikke som en erstatning . Eller få alvorlige konsekvenser.
Takk for at du leser, og jeg håper jeg har gitt deg noen ideer. Selvfølgelig er Flickr ikke den eneste APIen der ute - bare Google " offentlig API ", og du er sikker på å finne flere ting du kan leke med.
Neste uke blir den siste leksjonen i jQuery Tutorial-serien når vi sjekker ut pluginet for jQuery UI. Som alltid, kommentarer og forslag velkommen; Hvis du har et spørsmål som andre vil ha nytte av, bør du vurdere å legge det til vårt svarsted.