AJAX

Fra HTX Arduino
Spring til navigation Spring til 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


Webcode
JavaScript for - while - do while - for in - løkke - løkker i løkker - if - if-else - else-if - Conditional - Switch - break - continue - Funktion - Return - Returværdi - Rekursion - Sekvens - Javascript strukturer
js Input Checkbox - Dropdown - Form - Input button - Input filter - Input password - Input text - Textarea - submit knap - Option - Prompt - Confirm - Radio button - Select - Input-Tag - Keyboard event
js Output Alert - Document.write - Frameset output - Objekt egenskaber - Objekt output - Text-felt til output - Vindue output - Billed egenskaber - Canvas
js Syntaks Arrays - Betingelse - Identifyer - Variabel - Variabel scope - Type - Sekvens
js Objekt Canvas - Billed egenskaber - Egne objekter - Events - HTML-objekter - Keyboard event - Event-handler - Browser detektering - Preload images - Document Object Model
Tid i JavaScript Date objektet - setTimeout - setInterval
PHP Header - Include