Da vi nærmer os slutningen af vores jQuery mini-tutorial-serie, er det på tide, vi tog et mere dybtgående kig på et af de mest brugte funktioner i jQuery. AJAX tillader et websted at kommunikere med en server i baggrunden uden at kræve hele siden at genindlæse. Fra uendelige statusstrømme til Facebook-stil til at indsende formulardata er der en million forskellige virkelige situationer, hvor denne teknik kan være nyttig.
Hvis du ikke har læst de tidligere tutorials, foreslår jeg at du gør det, før du takler dette, da de bygger på hinanden.
- Introduktion: Hvad er jQuery og hvorfor skal du passe? At gøre internettet interaktivt: En introduktion til jQuery At gøre internettet interaktivt: En introduktion til jQuery jQuery er et script-bibliotek på klientsiden, som næsten alle moderne websteder bruger - det gør websites interaktive. Det er ikke det eneste Javascript-bibliotek, men det er den mest udviklede, mest støttede og mest udbredte .... Læs mere
- 1: Selectors and Basics jQuery-vejledning - Kom godt i gang: Grundlæggende & Selectors jQuery-vejledning - Kom godt i gang: Grundlæggende & Selectors I sidste uge talte jeg om, hvor vigtigt jQuery er for enhver moderne webudvikler, og hvorfor det er fantastisk. I denne uge tror jeg, det er tid, vi fik vores hænder snavset med nogle kode og lærte hvordan ... Læs mere
- 2: Metoder Introduktion til jQuery (Del 2): Metoder og funktioner Introduktion til jQuery (Del 2): Metoder og funktioner Dette er en del af en igangværende introduktion til jQuery webprogrammeringsserier. Del 1 dækkede grunden til jQuery om, hvordan du medtager det i dit projekt og vælgere. I del 2 fortsætter vi med ... Læs mere
- 3: Venter på sideindlæsning og anonyme funktioner Introduktion til jQuery (del 3): Venter på siden for at indlæse og anonyme funktioner Introduktion til jQuery (del 3): Venter på siden til indlæsning og anonym funktioner jQuery er uden tvivl en væsentlig færdighed for den moderne webudvikler, og i denne korte mini-serie håber jeg at give dig viden om at begynde at gøre brug af det i dine egne webprojekter. I ... Læs mere
- 4: Begivenheder jQuery Tutorial (Part 4) - Event Lyttere jQuery Tutorial (Part 4) - Event Lyttere I dag skal vi sparke det op og vise virkelig hvor jQuery skinner - begivenheder. Hvis du fulgte de tidligere tutorials, skal du nu have en ret god forståelse af den grundlæggende kode ... Læs mere
- Fejlfinding med Chrome-udviklerværktøjer Find ud af webstedsproblemer med Chrome Developer Tools eller Firebug Find ud af websitetsproblemer med Chrome Developer Tools eller Firebug Hvis du har fulgt mine jQuery-tutorials indtil nu, har du muligvis allerede kørt ind i nogle kodeproblemer og ikke kendt hvordan at rette dem. Når man står over for en ikke-funktionel kodebit, er det meget ... Læs mere
En hvad?
AJAX er et akronym for asynkron Javascript og XML, men søgeordet her er asynkront . Asynkron refererer til, at disse forespørgsler forekommer i baggrunden, uden at forstyrre brugerens browseroplevelse. Du har sikkert aldrig selv bemærket det før, men hvis en hjemmeside opdaterer sig dynamisk, er der en god chance for, at det bruger AJAX til at gøre det.
Før AJAX skal enhver form for interaktion med en server, det være sig at hente nye data eller sende oplysninger tilbage fra brugeren, skulle have været gjort ved hjælp af en ny sideindlæsning og omdirigeringer.
I dag skal vi se på en tredjeparts service, Flickr - fra hvem vi kan bruge AJAX til at hente nogle billeder ved hjælp af en JSON datatype. Det betyder faktisk ikke, hvordan Flickr implementerer den modtagende side af ting, for det er skønheden i API'er - alt, hvad vi behøver at vide, er en API-URL, hvilke slags data vi kommer tilbage og hvordan man manipulerer det.
For yderligere læsning skrev jeg en anden vejledning for et stykke tid siden om håndtering af AJAX i WordPress til en kontaktformular indsendelse En tutorial om at bruge AJAX i WordPress En tutorial om at bruge AJAX I WordPress AJAX er en bemærkelsesværdig webteknologi, der flyttede os ud over den enkle "click link, gå til en anden side "struktur af Internet 1.0. Det gør det muligt for websteder at dynamisk hente og vise indhold uden brugeren ... Læs mere, så du vil måske også tjekke det ud; Det indebærer at skrive din egen PHP-handler og integrere det i den "officielle" WordPress AJAX-proces.
AJAX-metoden
Her er det grundlæggende format for en AJAX-anmodning:
$.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 temmelig komplekst ud i starten - ikke hjulpet af manglen på indrykning fra denne kode plugin - men du vil se, hvor nemt det er, når man kommer til et rigtigt verdens eksempel.
Flickr API AJAX
I dette eksempel tager vi tagene i forbindelse med det aktuelle WordPress-indlæg og henter nogle billeder, der skal tilføjes i slutningen af artiklen. Der findes et lignende eksempel i jQuery-dokumentationen, men det bruger en genvejstest, der hedder getJSON (), end at forklare et fuldt AJAX-format. Selv om dette er en gyldig måde at gøre ting på, hvis du ved, at du kun kommer til at få JSON-data tilbage, føler jeg mig, at at lære den faktiske AJAX-metode er vigtigere, så det er sådan, hvordan vi gør det.
Først en up single.php, og vi vil forsøge at ekko ud en enkel komma separat liste over de aktuelle post tags. Normalt vil du bruge the_tags () for at gøre dette, men det er ikke godt, da vi i sidste ende vil gemme dem som en variabel, mens the_tags () ekko dem lige ud forformateret . I stedet bruger vi get_the_tags ():
name.", "; }?> Dette virker pænt, så vi udsender dette inde i en AJAX-anmodning til Flickr API-URL'en som følger (Bemærk, dette er et skærmbillede - for at bevare indrykning er koden tilgængelig på dette PasteBin).
På dette tidspunkt gør alt det til at sende til browserkonsollen, eller advare en fejlmeddelelse, hvis der er en. For faktisk at gøre noget med de returnerede data, tilføj et sted for de billeder, der skal placeres:
Og rediger succesparameteren for AJAX-opkaldet for at gentage de elementer, der 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 tilføjer 3 elementer fra det returnerede JSON objekt (dataene er nul indekseret, så hvis vi kommer til punkt 3, er vi faktisk ved det fjerde punkt. Forvirrende, jeg ved. På det tidspunkt bruger vi retur falsk til at hoppe ud af hver () iteratoren). Jeg har allerede undersøgt indholdet af de genstande, der returneres, så jeg kender datastrukturen, og jeg uddrager kun et link og en IMG-reference. Hvis du er interesseret i at vide, hvad der er returneret, skal du bare kaste en console.log (item) derinde.
Her er resultaterne på min testside og den fulde kode på denne PasteBin. Bemærk, at de returnerede resultater er stort set uønsket - mit indlæg inkluderede tagget DIY til en walk-in kyllingkørsel, og Flickr har givet mig DIY strikning. Pæn. Dette er selvfølgelig en af de forhindringer, du møder, når du arbejder med en API og gør ting automatisk; Du kan enten gentage dine indlæg (en betydelig forpligtelse), ændre anmodningen om at bede om "alle" tags i stedet for "nogen" (sandsynligvis ikke returnere noget i dette tilfælde) eller komme med et nyt brugerdefineret felt, som du ville angive et målrettet søgeord til brug med API'en (sandsynligvis det nemmeste).
SEO overvejelser
Dette er ikke et vigtigt punkt, men siden du er i gang med at udvikle hjemmesider, bør det nævnes: søgemaskiner vil ikke indeksere indhold, der ikke findes ved sideindlæsning, som f.eks. Noget gjort via AJAX. Det absolutte værste du kunne gøre, ville være at AJAXify din blog fuldt ud, så hjemmesiden kun var en iframe-lignende beholder til alt indhold, der er indlæst dynamisk. Brug AJAX med omtanke for at forbedre sidens indhold, ikke som en erstatning . Eller står over for alvorlige konsekvenser.
Tak for at læse, og jeg håber, jeg har givet dig nogle ideer. Selvfølgelig er Flickr ikke den eneste API derude - bare Google " public API ", og du er sikker på at finde flere ting, du kan lege med.
Næste uge er den sidste lektion i jQuery Tutorial serien, da vi tjekker jQuery UI plugin. Som altid velkommen kommentarer og forslag velkommen; hvis du har et spørgsmål, som andre vil have gavn af, overvej at sende det til vores svarwebsted.