Hva er ajax. Artikkel med enkelt eksempel

AJAX er forkortelse for Asynchronous JavaScript and XML og det er ikke et nytt programmeringsspråk, men en teknikk for å lage raskere, bedre og mer interaktive webapplikasjoner. Teknikken går ut på å bruke javascript til å kommunisere med serveren slik at du ikke behøver å laste hele siden på nytt for å oppdatere tekst, bilder etc på siden din. For å gjøre dette bruker man XMLHttpRequest objektet i javascript.

For at brukeren skal kunne bruke en webside som benytter ajax trenger de en nettleser som støtter XMLHttpRequest objektet i javascript. Nettlesere som støtter dette er Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+ og Netscape 7.

For å skjønne hvordan dette fungerer skal vi lage et enkelt skjema som bruker ajax til å oppdatere litt data.

Ulike nettlesere burker ulike metoder for å ta i bruk XMLHttpRequest objektet. Internet Explorer brukere ActiveXObject mens andre nettlsere bruker det innebygde javascript-objektet XMLHttpRequest. For å bruke riktig metode til riktig nettleser kan man enten lage et javascript som sjekker hvilken nettleser man bruker, eller man kan kjøre en try/catch. I eksempelet under bruker vi en try/catch i en funksjon som returnerer riktig object som vi kan bruke videre.

function GetXmlHttp(){
  var xmlHttp;

  try{xmlHttp=new XMLHttpRequest();}
  catch (e){
    try{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}
    catch (e){
      try{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
      catch (e){
        alert("Nettleseren din støtter ikke ajax");
        xmlHttp=null;
      }    
    }
  }
  return xmlHttp;
}

Dersom denne funksjonen returnerer null, så har ikke nettleseren støtte for ajax. Vi kan dermed forenkle scriptet som faktisk bruker ajax til feks noe som dette:

function GetTimeByAjax(){
    var xmlHttp = GetXmlHttp();
    if (xmlHttp!=null)
    {
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4){
                document.getElementById("serverTime").innerText = xmlHttp.responseText;
            }
        }
        xmlHttp.open("GET","time.aspx",true);
        xmlHttp.send(null);
    }
}

Vi bruker noe som heter onreadystatechange og som holder informasjon om serverens respons. Hver gang serveren gir data fra seg vil funksjonen kalles og vi kan sjekke hva slags respons det er. I eksempelet over venter vi på at responsen skal være 4 som betyr The request is complete. De andre verdiene er: 0:The request is not initialized, 1:The request has been set up, 2:The request has been sent, 3:The request is in process.

I tillegg til litt javascript i et html-dokument trenger vi et serverside-script som kan gi oss dynamisk data. I dette eksempelet lager vi en aspx-fil (Time.aspx) som skriver ut hva klokken er:

<%@ Page Language="C#" %>
<%
    // Sørger for at siden ikke caches
    Response.Expires = 0;
    Response.ExpiresAbsolute = new DateTime(2007, 1, 1);
    Response.AppendHeader("pragma", "no-cache");
    Response.AppendHeader("cache-control", "private");
    Response.CacheControl = "no-cache";    
%>
<%=DateTime.Now.ToString() %>

Vi kan nå sette opp et komplett eksempel med ajax som henter riktig tid (uten å laste siden på nytt) hver gang vi klikker på en link.

<html>
<head>
<script type="text/javascript">
function GetXmlHttp(){
  var xmlHttp;
  try{xmlHttp=new XMLHttpRequest();}
  catch (e){
    try{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}
    catch (e){
      try{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
      catch (e){
        alert("Nettleseren din støtter ikke ajax");
      }    
    }
  }
  return xmlHttp;
}
function GetTime(){
    var xmlHttp = GetXmlHttp();
    if (xmlHttp!=null)
    {
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4){
                document.getElementById("serverTime").innerText = xmlHttp.responseText;
            }
        }
        xmlHttp.open("GET","time.aspx",true);
        xmlHttp.send(null);
    }
}
</script>
</head>
<body>

  <div id="serverTime"></div><br />
  <a href="javascript:GetTime();">Hent tid fra server</a>

</body>
</html>