# Vad är AJAX?

12 maj 2021 | https://www.ribomation.se/blog/2021/vad-ar-ajax/

När webben skapades för en sisådär 30 år sedan, byggde det på en enkel princip om _state-less_. Koppla upp, begära en fil, få tillbaka resultatet, samt koppla ned. Och så var det inte mer med det.

För varje knapptryckning (_state change_) på en webbsida så skickades en helt ny webbsida till webbläsaren med uppdaterad information.

### Cookies

Det första problemet att lösa, var att para ihop flera anrop med en viss användare för att kunna komma ihåg sådant som innehållet i en varukorg eller huruvida en användare är inloggad eller ej. Detta löstes med cookies, vilket jag [skrivit om tidigare](/blog/2021/vad-ar-cookies/).

### XMLHttpRequest API

Strax före millennieskiftet började Microsoft implementera en webbaserad version av Outlook. Ganska snabbt insåg man det ohållbara i att skicka en helt ny sida för varje liten tillståndsförändring i webbappen. Lösningen blev _XMLHttpRequest_ i MSIE, som möjliggjorde att man kunde skicka HTTP anrop från en och samma webbsida. Vid denna tid var XML populärt, vilket namnet vittnar om. Det här implementerades snabbt av övriga webbläsare och lade grunden för ramverk som jQuery och Prototype.

```js
function load(url, populate) {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.onreadystatechange = () => {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                const data = JSON.parse(xhr.responseText)
                populate(data)
            }
        }
    }
    http.send()
}
```

### AJAX

Det nya sättet att göra partiella uppdateringar asynkront kom att kallas AJAX (_Asynchronous JAvascript and Xml_). I takt med att AJAX användes frekvent och att ett API för att manipulera strukturen på en webbsida (_DOM - Document Object Model_) utvecklades, blev resultatet att man kunde skicka mindre mängd HTML från servern och i stället låta webbläsaren via JavaScript och DOM bygga upp webbsidans struktur. Med kom XML att helt ersättas av JSON, så därför borde det ju numera heta AJAJ.

### Fetch API

I moderna webbläsare finns nu ett nytt API kallat _fetch_. Funktionen `fetch()` returnerar ett Promise object, vilket innebär att det är enkelt att anropa fetch från en `async function` och infoga `await` före varje anrop till fetch.

```js
async function load(url, populate) {
    const response = await fetch(url)
    const data = await response.json()
    populate(data)
}
```

### SPA

Den logiska slutpunkten blev att webbläsaren hämtande bara en enda HTML fil, vars innehåll liknande `<app-root/>`. Resten byggs upp helt av JavaScript (.js) och stilmallar (.css), vilka hämtas jämte med HTML filen. Begreppet _Single Page Application (SPA)_ var således ett faktum. Om detta får jag återkomma till i en senare artikel.

### Kurser hos Ribomation

Väl mött på kurs hos Ribomation och ta en titt på våra kurser om SPA ramverk såsom