AJAX

AJAX är en förkortning som uttyds ”Asynchronous JavaScript and XML”. Det kanske inte känns så mycket mer förklarande än själva förkortningen… Enkelt förklarat så är AJAX en metodik som används i webbsidor för att i efterhand hämta extern data. Det vill säga, när en webbsida är nedladdad och visas i en webbläsare, så kan kod som ligger i sidan skicka och hämta data från internet. Detta sker i bakgrunden, utan att användaren behöver göra något och oftast märks inte kommunikationen av. Den hämtade data kan sedan behandlas och presenteras för användaren på olika vis. Detta möjliggör att vi kan ha dynamiskt uppdaterade webbsidor som tillhandahåller mer interaktivitet än som annars skulle vara möjlig.

Historik

Även om grunderna till det som skulle bli AJAX introducerade redan under de sista åren på 1990-talet, så var det inte tills några år in på 2000-talet som tekniken började användas flitigt. Själva termen AJAX introducerades först 2005. Året därefter påbörjade W3C utkastet på ett standarddokument för XMLHttpRequest (som är grunden till AJAX). Även om AJAX hade en relativt lång ”barndom”, då enbart fåtalet förstod dess storhet, så formligen exploderade användningen vid 00-talets mitt. Majoriteten av dagens webbapplikationer använder sig av någon typ av AJAX-kommunikation. Stora, vanliga exempel på applikationer som möjliggjorts av AJAX är Google Mail och Google Maps.

En samling tekniker

Beroende på hur man ser det, så är AJAX faktiskt inte bara en enskild teknik, utan en samling av olika tekniker. Man brukar se såväl hämtandet av data, som presentation av den samma som en del i AJAX. Många tycker därmed att även HTML/CSS är en del i AJAX, då det oftast är dessa tekniker som används för att visa upp de data som hämtas. Dock använder man sig av AJAX, eller snarlika tekniker, även utanför webbvärlden, t.ex. kan ju en server hämta, processa och leverera data medelst AJAX, utan att för den delen någonsin producera HTML/CSS. Därför kommer vi mestadels att koncentrera oss på kommunikationsdelen när vi diskuterar AJAX här.

AJAX och externa resurser

AJAX-anrop är det vanligaste sättet på vilket man kommunicerar med servrar som tillhandahåller olika typer av funktionalitet och data. Det kan till exempel vara ett bra sätt att hämta data ifrån en databas som finns på en server någonstans. Datan förädlas sedan och visas för användaren. Kanske denne redigerar och ändrar data, vilka sedan kan skickas tillbaka ursprungsservern via ett nytt AJAX-anrop. Men vi kan även använda AJAX för att utföra andra typer av operationer. Många applikationer erbjuder API:er som möjliggör att vi kan använda oss av dessa. Ett exempel på det skulle kunna vara Google Map, vars funktionalitet man kan använda ifrån sin egen applikation. Detta sker genom ett API-anrop som baseras på AJAX. Det finns en mängd resurser som erbjuder publika, eller halvpublika, API:er.

Inte bara för webbläsare

Det behöver dock inte vara en webbläsare som använder sig av AJAX. Tekniken fungerar lika bra på serversidan och många applikationer baseras på servrar som hämtar hem data, förädlar den och vidaredistribuerar resultatet. Speciellt på serversidan är det vanligt att man anropar fjärr-API:er på andra servrar för att låta dem utföra saker. Låt säga att ett serverprogram behöver komma åt temperaturerna för en region. Man kan då göra ett AJAX-anrop till SMHI:s tjänst med öppen data och läsa in behövlig information därifrån.

Faktum är att AJAX är ett så vanligt sätt att kommunicera data till/från servrar, att alla typer av programmerare behöver behärska tekniken.

Detaljförklaring av förkortningen

Vi tar och går igenom AJAX:s betydelse lite grundligare. Det stod alltså för ”Asynchronous JavaScript and XML”. Vi jobbar oss igenom de olika orden i namnet.

Asynchronous

Den första delen, ”asynchronous”, betyder förstås asynkron på svenska. Ordet betyder att något inte sker samtidigt. AJAX möjliggör att vi hämtar data i bakgrunden, medan vår webbapp körs. Vi kan hämta data lite pö om pö när den väl behövs och det behöver alltså inte göras samtidigt som huvudkoden körs eller när datat visas upp för användaren. Det är alltså en annan typ av kommunikation än hur vi ”normalt” hämtar data till en webbsida, där allt hämtas när sidan laddas in och sedan visas upp direkt (dvs, ett mer synkront förfarande).

Rent mjukvarudesignmässigt är den asynkrona delen viktig. Denna möjliggör att vi enkelt kan koppla isär datahämtning och -visning i olika skikt. Att separera en applikations i skikt är en bra metod för att skapa applikationer som är lätta att underhålla. Man talar ofta om ”model-view-controller”-mönstret, där man separerar datamodellen, visningen och gränssnittet i olika delar och försöker ha så lite samverkan mellan dem som möjligt. En fördel med detta är att förändringar i ett lager påverkar de övriga minimalt. Inom webbutveckling använder man ofta det mönstret, eller någon av alla de varianter som finns på mönstret.

JavaScript

J:et i AJAX står för JavaScript och det visar att tekniken främst är skapad för detta språk (som vi förhoppningsvis börjat bli rätt så haja på vid det här laget). Då AJAX är så populärt, har så gott som alla programmeringsspråk diverse bibliotek som gör att man kan skapa AJAX-anrop även i dessa. Man kan alltså skapa både klienter och servrar som hanterar AJAX oavsett vilket språk man jobbar i (i alla fall i alla populära och vanligt förekommande språk).

XML

Du kanske lade märke till att den sista delen i AJAX även den bestod av en förkortning. X:et står ju för XML. Denna förkortning utläses ”Extensible Markup Language”. Detta är liksom HTML ett märkspråk som använder sig av taggar för att ge betydelse och struktur till data. XML är ett rent textbaserat format. Som man förstår av ”Extensible” kan man utöka XML:s vokabulär. Detta till skillnad mot HTML, som ju har en fast uppsättning taggar. Många programvaror sparar sin data i något slags XML, t.ex. Open-/LibreOffice (även om dessa komprimerar sin XML-data när den sparas som fil). En av tankarna bakom att använda sig av XML, är att det ska vara enklare att flytta data mellan olika applikationer.

Här är ett kort exempel på hur ett XML-dokument kan se ut:

<?xml version="1.0" encoding="UTF-8"?>
<person>
	<fornamn>Patrik</fornamn>
	<efternamn>Grip-Jansson</efternamn>
	<arbetsplats>Soltorgsgymnasiet</arbetsplats>
</person>

Ovanstående samlar alltså samman lite persondata; namn, efternamn och arbetsplats. Hur denna data sen behandlas eller tolkas är upp till de programvaror som bearbetar eller generar data. I stort sett kan man hitta på taggar så som man känner för det. Det finns dock olika kringtekniker som möjliggör att man formellt kan beskriva hur dokumenten ska vara uppbyggda samt vilken data de olika taggarna ska kunna innehålla – så kallade schema. Det finns även ett språk för att välja ut specifika databitar ur ett XML-dokument, XSLT. Det senare påminner lite om hur databasspråket SQL fungerar.

Vi ska dock inte snöa in oss alltför mycket detaljer om XML. Det är nämligen som så att, namnet till trots, AJAX sällan används med XML nu för tiden. Douglas Crockford, som gjort mycket för JavaScripts popularitet, tyckte att XML var för bökigt, för explicit och för tungt att jobba med. Han uppfann istället något som kallas för JSON (ja, det är populärt med förkortningar i datavärlden) och så gott som allt som jobbar med AJAX idag använder sig av denna datatyp istället för XML.