JQuery - AJAX
jQuery har utmärkt stöd för AJAX. Detta är en teknik som kan användas för att hämta data när en sida har laddats ned. Tekniken möjlig gör att man kan läsa in data i bakgrunden medan en sida visas. Detta är grunden för de flesta webbapplikationer. Här kan du läsa mer om "AJAX".
Tidigare var det relativt svårt att använda AJAX. Detta berodde främst på att dåtidens webbläsare alla hade sina egenheter och man var tvungen att skriva kod som skulle hantera många olika specialfall. Även om detta förbättras något med åren, så kvarstår problemet delvis. Här kan det vara en god idé att använda sig av jQuery eller något liknande bibliotek. Det blir lättare och jobba samt du slipper återuppfinna hjulet och kan koncentrera dig på din applikation istället.
Överhuvudtaget brukar det vara en bra idé att försöka förlita sig på de hjälpmedel som redan finns tillgängliga. Det rör sig ofta om beprövade lösningar som löst många av de småproblem som skulle ta dig mycket tid att både hitta och lösa. Likaså är oftast koden i dessa hjälpbibliotek rejält genomtestad, då de använt av många under en lång tid. Det gör att de flesta buggar blivit hittade och fixade.
Skapa nya, bra applikationer istället för att återuppfinna hjulet och återigen lösa problem till vilka det redan finns färdiga lösningar!
Det finns flera sätt på vilka vi kan använda AJAX tillsammans med jQuery. Du kan välja att göra saker på relativt låg nivå, eller du kan välja att använda de kortkommandon som är på lite högre nivå. Vi börjar att titta på hur man kan använda sig av några kortkommandon.
get
Ett av de enklaste sätten på vilka man kan få ett script att hämta data är att använda jQuerys get. I stort sett behöver man inte ange något mer än den URL ifrån vilken datan ska hämtas samt en funktion som ska kallas på när datan är klar.
Så gott som alla hämtningar man utför i en webbsida måste lyda Same-Origin Policy. Enkelt sagt betyder detta att man bara kan hämta saker ifrån samma server som sidan hämtades ifrån. Detta utgör en stor begränsning. Det finns vissa sätt som vi kan komma runt detta, t.ex. CORS och JsonP. Vi återkommer till dessa i sektionen om hur man bygger webbapplikationer.
Bland det minimalaste AJAX-anropet vi kan göra ser ut så här:
Exemplet kommer att kontakta http://ajax.webbling.se och hämta datan som finns i /testdata1.
jQuery-metoden get är asynkron. Det innebär att programkörningen inte stannar och väntar på resultat, istället körs programmet vidare.
done
När hämtningen är avklarad kommer get att köra den metod som angivits i done. I detta fall är det VisaData. Denna körs alltså när all data är inläst. Som inparameter kommer den att få den data som lästes in. Den data vi hämtade är i det här fallet bara lite HTML-kod, som funktionen lägger in i sidan.
Anledningen till att vi kan få denna kod att hämta data ifrån ajax.webbling.se är att vi på servern har slagit på CORS-funktionalitet och tillåter hämtningar över domäner. Detta kommer alltså inte att fungera mot alla typer av servrar.
fail
Om något går fel, så kommer koden i föregående exempel inte att göra någonting. Vi vill självklart hantera fel på något bra sätt, så vi behöver utöka vårt exempel. Vi kan koppla till felhantering genom att lägga till ännu metod efter get. I det här fallet vill vi använda fail.
Vårt exempel blir då att se ut så här:
Vår funktion HanteraFel kommer att köras om något går fel. Denna kommer då att rapportera att något gått åt pipan, samt att den visar upp det felmeddelande vi fick ifrån get. Inte världens bästa felhantering, men för detta syfte så duger det.
always
Vi kan faktiskt hänga på ännu en funktion efter get. Det är always med denna metod lägger man till en funktion som alltid ska köras när hämtningen slutförts - oavsett vilket resultatet blev. Så här skulle det kunna se ut:
När get utfört hämtningsförsöket kommer den antingen att kalla på done eller fail, beroende på om hämtningen gick bra eller ej. Därefter kallar den på always och detta gör den alltså oavsett vilket resultatet av hämtningen blev.
getJSON
JSON är ett väldigt vanligt dataformat. J:et i det står faktiskt för JavaScript, så det är speciellt skapat för att användas i JavaScript-kod. Många datakällor levererar data i detta format. Du kommer att finna att de flesta "öppen data"-datakällor kan använda sig av JSON. Eftersom det är ett så vanligt format, så har jQuery ett kortkommando som hämtar data och behandlar denna som JSON-data.
Vi tar ett kort exempel igen:
Du kan prova att hämta hem JSON-datafilen testdata2.json och se hur den data vi läser in ser ut. getJSON kommer att läsa ner filen och omvandla JSON-datan till en datastruktur som vi kan använda. I VisaData går vi igenom persondatan med en forEach-loop. Varje post läggs till i slutet av resultat.
När vi har sådan här data vill vi antagligen visa upp den på något bättre vis. Du skulle kunna kombinera det här exemplet med det vi hade i en tidigare aktivitet där vi körde ett enkelt mallsystem.
Det finns mycket mer...
Det finns många andra varianter på vilka du kan hämta och skicka data. Vi spar dock dessa till sektionen om hur man skapar webbapplikationer. Där kommer vi att använda oss mer av AJAX och hantera mer vettig data.
Nästa aktivitet
Vi ska fortsätta att titta lite på hur man kan hantera AJAX-anrop med hjälp av jQuery.