Hvordan hentes data?
Rige Internet Applikationer bliver straks mere interessante når vi kan hente og vise data fra både egne og eksterne kilder.
Der findes mange forskellige teknikker til at hente data, herunder det udbredte XMLHTTPRequest objekt og dynamisk indsatte SCRIPT tags. Heldigvis er den underlæggende transportform skjult for os i de moderne Javascript frameworks og vi kan derfor koncentrere os om meget simplere ting, såsom indsamling af brugerdata, sende forespørgsler til serveren og behandling af data.
De to mest forekommende data formater i Rige Internet Applikationer er
XML
og JSON
Den første lægger endda grund til det meget udbredte synonym AJAX
.
Vi vil her i kogebogen koncentre os om at sende og modtage JSON.
Når vi henter data fra en server sker det gerne fordi brugeren har efterspurgt noget, hvorefter applikationen på serveren foretager et databaseopslag og returnerer de efterspurgte værdier. Det kunne for eksempel være en liste over brugerens mest besøgte links.
Da vi ikke har en sådan server applikation til hånde vil vi istedet hente data fra en tekst fil med links, skrevet i JSON format.
Vores data fil, links.txt
Vores data fil indeholder et array med tre objekter, hver især med et link og en tekst.
For at hente vores data benytter vi os af jQuery metoden getJSON der lader os sende en forespørgsel på en URL og angive en funktion der skal køres når svaret er modtaget.
Vores script fil, minkode.js
Du genkender nok vores tidligere kode til at vise Google Maps selvom den er blevet flyttet.
Nu er vi nemlig begyndt at få en større mængde kode i vores script fil, og så er det en god idé at adskille de enkelte dele så koden til at vise Google Maps er i sin egen funktion (visKort i linje 10 til 18) og koden til at hente vores links er i en anden funktion.
I vores hentLinks funktion laver vi en forespørgsel i linje 2 til serveren med getJSON metoden.
Når vi har modtaget svaret fra serveren kan vi finde vores data i variablen links der er et array.
Vi bruger dernæst jQuery metoden each på linje 3 til at løbe hen over alle elementerne i vores array,
og for hvert af dem tilføjer vi noget nyt HTML til vores indhold element ved at kalde
jQuery metoden append - i dette tilfælde tilføjer vi et link og et linjeskift.
Du kan se hvordan det komplette eksempel til dette kapitel fungerer i koden.