JQuery Tutorial (Del 5): AJAX dem alle!

Annonse

Da vi nær slutten av min-tutorial-serien for jQuery, er det på tide at vi tar en mer dyptgående titt på en av de mest brukte funksjonene i jQuery. AJAX lar et nettsted kommunisere med en server i bakgrunnen uten å kreve at hele siden lastes inn på nytt. Fra Facebook-stil uendelige statusstrømmer til innsending av skjemadata, det er 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 mens de bygger på hverandre.

• Innledning: Hva er jQuery og hvorfor skal du bry deg? Å gjøre nettet interaktivt: en introduksjon til jQueryjQuery er et script-bibliotek på klientsiden som nesten alle moderne nettsteder bruker - det gjør nettsteder interaktive. Det er ikke det eneste Javascript-biblioteket, men det er det mest utviklede, mest støttede og mest brukte ... Les mer
• 1: Velgere og grunnleggende jQuery Tutorial - Komme i gang: Grunnleggende og velgereForrige uke snakket jeg om hvor viktig jQuery er for enhver moderne nettutvikler, og hvorfor det er kjempebra. Denne uken tror jeg det er på tide at vi skitne hendene med litt kode og lærte hvordan ...
  instagram viewer
  Les mer
• 2: Metoder Introduksjon til jQuery (del 2): ​​Metoder og funksjonerDette er del av en pågående introduksjon av nybegynnere til jQuery web-programmeringsserier. Del 1 dekket grunnleggende om jQuery om hvordan du inkluderer det i prosjektet ditt, og velgerne. I del 2 fortsetter vi med ... Les mer
• 3: Venter på sideinnlasting og anonyme funksjoner Introduksjon til jQuery (del 3): Venter på at siden skal lastes og anonyme funksjonerjQuery er uten tvil en viktig ferdighet for den moderne webutvikleren, og i denne korte miniserien håper jeg å gi deg kunnskapen til å begynne å gjøre bruk av den i dine egne nettprosjekter. I... Les mer
• 4: Hendelser jQuery Tutorial (Del 4) - Event ListersI dag skal vi få et hakk og virkelig vise hvor jQuery skinner - hendelser. Hvis du fulgte de siste tutorials, bør du nå ha en ganske god forståelse av den grunnleggende koden ... Les mer
• Feilsøking med Chrome Developer Tools Finn ut problemer med nettstedet med Chrome Developer Tools or FirebugHvis du har fulgt jQuery-veiledningene mine så langt, har du kanskje allerede hatt noen kodeproblemer og ikke visst hvordan du løser dem. Når du blir møtt med en ikke-funksjonell kode, er den veldig ... Les mer

En hva?

AJAX er et forkortelse for Asynkron Javascript og XML, men nøkkelordet her er asynkron. Asynkron refererer til det faktum at disse forespørslene oppstår i bakgrunnen, og forstyrrer ikke brukerens nettopplevelse. Du har sannsynligvis aldri en gang lagt merke til det før, men hvis et nettsted oppdaterer seg dynamisk, er det en god sjanse for at den bruker AJAX for å gjøre det.

Før AJAX, måtte enhver form for interaksjon med en server, det være seg å hente nye data eller legge ut informasjon fra brukeren, måtte ha blitt gjort ved å bruke en ny sideinnlasting og viderekoblinger.

I dag skal vi se på å bruke en tredjepartstjeneste, Flickr - som vi kan bruke AJAX til å hente noen bilder ved å bruke en JSON-datatype. Det spiller ingen rolle hvordan Flickr implementerer den mottakende siden av ting, fordi det er det fine APIer - alt vi trenger å vite er en API-URL, hva slags data vi kommer til å få tilbake, og hvordan vi kan manipulere dem.

For videre lesing skrev jeg en annen tutorial for en stund siden om håndtering av AJAX i WordPress for innsending av et kontaktskjema En veiledning om bruk av AJAX i WordPressAJAX er en bemerkelsesverdig webteknologi som beveget oss utover den enkle "klikklenken, gå til en annen side" strukturen til Internett 1.0. Det gjør det mulig for nettsteder å hente og vise innhold dynamisk uten bruker... Les mer , så det kan være lurt å sjekke det ut; det innebærer å skrive din egen PHP-behandler, og integrere den 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 eller PHP-behandler-URL", datatype: "JSON", // avhengig av hva slags data du vil ha tilbake, men JSON er mest vanlige data: {// et sett med nøkkel: "verdi" par}, suksess: funksjon (data) {// håndter en vellykket retur av data}, feil: funksjon (melding) {// håndter feilen } });

Dette ser ganske kompleks ut til å begynne med - ikke hjulpet av manglende innrykk fra denne kodepluggen - men du vil se hvor enkelt det er når du kommer til et ekte verdenseksempel.

Flickr API AJAX

I dette eksemplet kommer vi til å ta taggene som er tilknyttet det nåværende WordPress-innlegget, og hente noen bilder for å legge ved slutten av artikkelen. Det er en lignende eksempel i jQuery-dokumentasjonen, men den bruker en snarveismetode som heter 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 at det er viktigere å lære den faktiske AJAX-metoden, så det er slik vi gjør det.

Først en opp single.php og vi prøver å gjenkjenne en enkel komma-separat liste over gjeldende innleggskoder. Vanligvis vil du bruke the_tags () å gjøre dette, men det er ikke bra, siden vi ønsker å lagre disse som en variabel the_tags () ekko dem rett ut forhåndsformaterte. I stedet bruker vi det get_the_tags ():

php. $ tagslist = get_the_tags (); foreach ($ tagslist som $ tag) { ekko $ tag-> navn. ","; }

Dette fungerer fint, så vi sender ut dette inne i en AJAX-forespørsel til Flickr API-URL som følger (merk, dette er et skjermbilde - for å bevare innrykk er koden tilgjengelig på denne PasteBin).

På dette tidspunktet gjør alt det for å sende ut til nettleserkonsollen, eller varsle en feilmelding hvis det er en. Hvis du vil gjøre noe med de returnerte dataene, legger du et sted for at bildene skal plasseres:

Og rediger suksess parameter for AJAX-samtalen for å itereere over elementer som returneres.

$ .each (data.items, function (i, item) {if (i == 3) returner false; // stopp når vi har 3 $ ("# flickr"). vedlegg (""); });

Og der har vi det. Vi er tilføye 3 elementer fra det returnerte JSON-objektet (dataene er null indeksert, så hvis du kommer til element 3, er vi faktisk på fjerde varen. Forvirrende, jeg vet. På det tidspunktet bruker vi returner falsk å hoppe ut av Hver() iterator) .Jeg har allerede undersøkt innholdet i objektene som blir returnert, så jeg kjenner datastrukturen, og jeg trekker bare ut en kobling og IMG-referanse. Hvis du er interessert i å vite hva annet blir returnert, er det bare å kaste en console.log (vare) der inne.

Her er resultatene på testnettstedet mitt, og full kode på denne PasteBin. Legg merke til at resultatene som returneres i utgangspunktet er søppel - innlegget mitt inkluderte koden DIY for en walk-in kylling, og Flickr har gitt meg DIY-strikking. Hyggelig. Dette er selvfølgelig en av hindringene du møter når du jobber med en API og gjør ting automatisk; Du kan enten merke merkene på nytt (et betydelig tilsagn), endre forespørselen om å be om "alle" -koder i stedet for "noen" (sannsynligvis kommer tilbake ingenting i dette tilfellet), eller kom med et nytt tilpasset felt som du vil spesifisere et målrettet søkeord som skal brukes med API (sannsynligvis enkleste).

SEO-hensyn

Dette er ikke et hovedpoeng, men siden du er i ferd med å utvikle nettsteder, skal det være det nevnt: søkemotorer indekserer ikke innhold som ikke eksisterer ved sidebelastning, for eksempel noe som er gjort via AJAX. Det absolutt verste du kan gjøre ville være å fullstendig AJAXify bloggen din, slik at hjemmesiden bare var en iframe-lignende beholder for alt innholdet som er lastet inn dynamisk. Bruk AJAX klokt, til forbedre sideinnholdet, ikke som et erstatning. Eller møte alvorlige konsekvenser.

Takk for at du leste, og jeg håper jeg har gitt deg noen ideer. Selvfølgelig er Flickr ikke det eneste APIet 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-opplæringsserien når vi sjekker ut jQuery-brukergrensesnittet. Som alltid er kommentarer og forslag velkomne; Hvis du har et spørsmål som andre vil dra nytte av, kan du vurdere å legge det ut på vårt svar-nettsted.