Navigera i webbdjungeln: Ajax

Ajax är en uppsättning webbtekniker som låter en skapa webbplatser som kan skicka och hämta data från en server i bakgrunden, utan att påverka visningen av sidan man är inne på. Genom dessa Javascript-anrop, kan man sedan ändra innehållet dynamiskt, utan att behöva ladda om sidan.

Schematisk bild över kommunikationen i en webbapplikation som använder ajax. Bild: Anpassad från diagram av DanielSHaischt.

Man skapar HTTP-anropen till servern i Javascript, ofta med hjälp av ett bibliotek, exempelvis Jquery eller Axios.

I moderna webbläsare (släppta 2017 eller senare) stöds även fetch(), vilket ger ett enkelt api att arbeta med. Här följer ett exempel:

async function doAjax() {
  try {
    const res = await fetch("get-data.php");
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

doAjax();

Normalt använder man ajax för att hämta data som JSON (historiskt även XML), medan man brukar ladda CSS, Javascript, bilder, ljud, videor och typsnitt genom att lägga till och ändra DOM-element.

Som synonym till "ajax", används även XMLHttpRequest (XHR), namnet på det äldre api:et i webbläsaren, som initierar HTTP-anropet.