Hvordan hentes eksterne data?
Istedet for at hente statiske data kunne det være interessant at hente dynamiske data. Til dette formål vil vi benytte os af Danmark web service der er en frit tilgængelig datakilde fra IT & Telestyrelsen som indeholder oplysninger om veje, kommuner, postdistrikter, stoppesteder og meget mere.
Hvis vi gerne vil have detaljerede oplysninger omkring Dronningens hjem kan vi søge på hendes adresse gennem denne datakilde og få svaret tilbage som JSON.
http://oiorest.dk/danmark/adresser/Amalienborg,2,1257
Det ovenstående link returnerer XML data og ved at tilføje
".json"
til sidst får vi returneret JSON data.
Umiddelbart ser det ud som om vi blot kan bruge det link i vores kald til ajax metoden i jQuery og dermed få returneret dynamiske data
fra en adressesøgning. Hvis vi gør det får vi dog enten en sikkerhedsfejl eller slet ingen data returneret.
Dette skyldes den indbyggede sikkerhedsmodel i browsere der kaldes "samme-oprindelse politikken", der blandt andet forhindrer en fremmed hjemmeside i at kunne læse dine emails på Hotmail eller Gmail. For at kunne gøre brug af datakilder der ligger på et andet domæne skal det andet domæne først give os lov til dette, hvilket i forbindelse med JSON data kan gøres ved en teknik der kaldes JSONP.
Den praktiske forskel er ikke så stor for os da jQuery ligesom andre libraries gør det nemt at bruge JSONP, vi skal blot huske at tilføje et
callback argument i vores link hvorefter vi kan hente JSON data fra det andet domæne.
Vores script fil, minkode.js
Vi har nu fjernet vores gamle links.txt fil og funktioner og skrevet en ny hentAdresse og visAdresse funktion,
men ellers er koden uændret.
I vores hentAdresse funktion sender vi en forespørgsel til vores eksterne datakilde. Når vi modtager svaret omdanner vi JSON dataene til tekst
ved hjælp af den indbyggede JSON.stringify
metode så vi bagefter kan vise teksten i vores indhold element ved at benytte
jQuery metoden text.
For at gøre visningen lidt pænere ændrer vi vores indhold element fra et P til et PRE element, da dette
bibevarer vores indrykninger.
Vi får en del data tilbage ud fra den simple adressesøgning vi har foretaget os, heriblandt kommune og kort data som vi vil gøre brug af senere.
Du kan se hvordan det komplette eksempel til dette kapitel fungerer i koden.