AJAX

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

AJAX er en forkortelse for Asynchronous JavaScript and XML eller på dansk, Asynkron JavaScript og XML. AJAX er en teknologi der bruges til at lave hjemmesider der kan ændre deres information dynamisk ved hjælp af forespørgsler til serveren. Før AJAX var der kun mulighed for at ændre informationen baseret på hvad brugeren gjorde på klient siden, og hvis man ville have ny information fra serveren foregik det ved en fuld refresh af siden.

Teknologi

AJAX er en kombination af følgende teknologier.

  • HTML og CSS til præsentation
  • JavaScript DOM(Dokument Object Model) til at dynamisk ændre siden og præsentere nyt data.
  • XML til at sende data frem og tilbage i et HTTP venligt format.
  • XMLHTTP ActiveX i det tidligere Internet Explorer og XMLHttpRequest i nyere browsere.
  • JavaScript til at styre det hele.

Historie

AJAX var den første udbredte måde at lave dynamiske sider på, men der er sidenhen kommet andre metoder der blandt andet bruger det mere JavaScript venlige JSON til fordel for XML.

Eksempel

Følgende er et eksempel hvor man bruger JavaScript.

get-ajax-data.js:

// Dette er koden der kører på klient-siden, altså på brugerens computer.

// Først laves et XMLHttpRequest objekt.
var request = new XMLHttpRequest();
request.open('get', 'send-ajax-data.php');

// Vi abonnerer på eventen "onreadystatechange ", så vi kan se hvornår forespørgslen er færdig.
xhr.onreadystatechange = function() {
    // Hvis readyState er 4 så er forespørgslen gennemført.
    if(request.readyState === 4) {
        // 200 betyder at serveren indikerer at forespørgslen blev korrekt gennemført.
        if(request.status === 200){
            alert(request.responseText);
        } else {
            alert('Fejl: ' + request.status);
        }
    }
}

// Send forespørgslen til send-ajax-data.php
request.send(null);

send-ajax-data.php:

// Dette er koden der kører på server-siden, altså på udbyderens server.

// Vi indikerer at siden viser ren tekst.
header('Content-Type: text/plain');

// Send et svar.
echo "Hej fra serveren!";

Referecer