Internett

jQuery opplæring (del 5) AJAX dem alle!

jQuery opplæring (del 5) AJAX dem alle! / Internett

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 er her asynkron. 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 til å gjøre 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 i APIer - alt vi trenger å vite er en API-URL, hva slags data skal vi 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 webteknologi som flyttet oss utover det enkle “klikk lenke, 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-handler og integrere det i “offisielt” WordPress AJAX prosess.

AJAX-metoden

Her er det grunnleggende formatet for en AJAX-forespørsel:

$ .ajax (type: "GET eller POST", url: "API eller PHP-håndteringsadressen din", datatype: "JSON", // avhengig av hvilken type data du vil ha tilbake, men JSON er de vanligste dataene: // et sett med nøkkel: "verdi" par, suksess: funksjon (data) // håndtere en vellykket dataoverføring, feil: funksjon (melding) // håndtere feilen);

Dette ser ganske komplisert i begynnelsen - ikke hjulpet av mangel på innrykk fra denne koden plugin - men du vil se hvor lett det er når komme til en ekte verden eksempel.

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 kuttmetode som heter getJSON () heller enn å forklare et fullt 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 er viktigere å lære den faktiske AJAX-metoden, så det skal vi gjøre.

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 ():

Navn.","; ?>

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 suksess parameter for AJAX-anropet for å iterere over elementer som returneres.

$ .each (data.items, function (i, item) hvis (i == 3) returnerer false; // stopp når vi har 3 $ ("# flickr")."););

Og der har vi det. Vi er føye 3 elementer fra det returnerte JSON objektet (dataene er null indeksert, så hvis vi kommer til punkt 3, er vi faktisk på det fjerde elementet. Forvirrende, jeg vet. På det tidspunktet bruker vi returner falsk å hoppe ut av Hver() iterator).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 (pos) 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øppel - mitt innlegg inneholdt taggen DIY for en walk-in kylling løp, 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 merke dine innlegg (et betydelig foretak), endre forespørselen om å be om “alle” koder i stedet for “noen” (sannsynligvis ikke returnere noe i dette tilfellet), eller komme opp med et nytt egendefinert felt som du vil spesifisere et målrettet søkeord for å bruke 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, til 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.

Utforsk mer om: jQuery, programmering, webutvikling.