Ajax

Basisfunksjoner

Koden under er svært enkel og ikke spesielt funksjonell. Vi definerer en global variabel, myRequest, med de farer dette medfører dersom vi har flere asynkrone forespørsler på samme side. Den fungerer for enkle demo-situasjoner, men det er grunn til å vurdere å basere AJAX-løsninger på et litt mer robust grunnlag, se f.eks. modulen jQueryAjax .

var myRequest;
function startXMLHttpRequest(url)
{
    myRequest=null;
    myRequest = new XMLHttpRequest();
    if (myRequest) {
        myRequest.onreadystatechange = processRequest;
        myRequest.open("GET", url, true);
        myRequest.send(null);
    }
    else{
        alert("Nettleseren henger ikke med");
    }
}
function processRequest()
{
    // if the request is complete and successfull
    if (myRequest.readyState == 4) {
        if ((myRequest.status == 200) || (myRequest.status == 304))
            alert(myRequest.responseText);
        else
            alert("Problem med tilgang til data:\n" + myRequest.statusText);
    }
}

Koden over definerer et "globalt" XMLHttpRequest-objekt og to metoder. Den første metoden, startXMLHttpRequest, adresserer en fil via en URL. Merk at denne metoden ikke tar hensyn til gamle, eldre enn versjon 7, versjoner av IE. Dersom vi skulle gjøre det, ville vi kanskje ende opp med noe slikt:

function xstartXMLHttpRequest(url)
{
    if (window.XMLHttpRequest)
        myRequest = new XMLHttpRequest();//IE7
    else if (window.ActiveXObject)
    {
        try { myRequest = new ActiveXObject("Msxml2.XMLHTTP");//IE6
        }
        catch(e) {
            try {myRequest= new ActiveXObject("Microsoft.XMLHTTP");//IE5.5
            }
            catch(e) {myRequest=null;}
        }
    }
    else
        myRequest=null;
    if (myRequest) {
        myRequest.onreadystatechange = processRequest;
        myRequest.open("GET", url, true);
        myRequest.send(null);
    }
    else{
        alert("Nettleseren henger ikke med");
    }
}

Når vi har fått opprettet objektet ser vi at vi angir hvilken funksjon som skal være eventhandler: "myRequest.onreadystatechange = processRequestChange;". Deretter åpner vi en GET-forespørsel og vi sender den uten tilleggsdata. De aktuelle metodene og egenskapene ved et XMLHttpRequest-objekt er listet nedenfor.

Den andre funksjonen, processRequestChange, er programmert slik at den bare bekymrer seg for tilstanden som tilsier at forespørselene er ferdig behandlet(4). Dersom status på dette tidspunktet er 200 så har alt gått bra og vi kan plukke opp resultatet som text og viser det fram i en alert-boks.

Du kan teste ved å klikke her.

Fragmentet som sender forespørselen:

<p style="cursor:pointer"
    onclick="javascript:startXMLHttpRequest('frej1.txt');return false;">
    Du kan teste ved å klikke her.
</p>
    

En viktig begrensning

JavaScript er underlagt begrensninger i hva vi kan få tak i via koden. Begrensningene administreres av nettleserne. Begrunnelsen er sikkerhet. Når vi lager AJAX-løsninger må de ressursene, filene, vi bruker ligge i samme domene som den HTML-siden som bruker dem. Denne sikkerhetsmekanismen er ganske involvert og det vil føre for langt å forfølge dette her. Kortformen for våre praktiske løsninger er at vi legger alt vi vil bruke på samme server og samme bruker.

I praksis er ikke dette noen alvorlig begrensning. Det normale er vel at vi bygger en løsning med tilgjengelige ressurser innenfor et domene. Det er ikke noe problem å bruke fremmede ressurser, men da gjør vi det via kode på tjeneren, f.eks. et pythonskript, som legges i det lovlige domenet. Webservices kan være eksempler på slike "fremmed" ressurser. Vi kan selvsagt også hente data fra databaser på andre tjenere, typisk en 3-lags løsning.

Modulen Andre domener drøfter nærmere noen strategier for å hente data fra andre domener.

Noen løsninger

Tekst til DOM-node

Vi har altså, hvis øvelsen ovenfor gikk bra, greidd å få tak i en tekst fra en URL. Når vi nå har tak i den burde vi kunne legge den ut på siden i stedet for å vise den fram i en alert boks. Vi bruker altså DOM-programmering for å plassere den teksten vi henter.

Velge blandt flere

En vanlig situasjon er selvsagt at vi ønsker å tilfredsstille et valg som brukeren treffer. brukeren vil velge blandte flere alternativer. Eksempelet viser hvordan vi kan kople inn en select-boks.

Header informasjon

Vi kan sende en forespørsel som bare returnerer header-informasjon fra en fil. På denne måten kan vi finne ut når en ressurs sist ble oppdatert, mime-typen, servertypen etc. Vi bruker HEAD i stedet for GET eller POST. Vi henter ut getAllResponseHeaders() i stedet for responseText.

Tolke resultatet som XML

Vi kan tolke det svaret vi får på en forespørsel som en DOM-struktur. Det vil si at vi kan hente en XML-fil, analysere denne som et DOM-tre og bruke de delene vi vil til å møblere HTML-siden, som vi betrakter som et annet DOM-tre. Vi plukker da opp responseXML i stedet for responseText.

Bruk av pythonskript på tjeneren

I stedet for å laste ned en fil direkte, kan vi la kode på tjeneren returnere de dataene vi er ute etter, i den form vi vil ha dem. Vi må da tenke gjennom arbeidsdelingen mellom klient og tjener. Eksempelet demonstrerer hvordan vi kan hente 1 av Shakespears sonetter via et Pythonskript på tjeneren.

Skriptet som betjener siden:

#! /usr/bin/python2
import cgi, string,xml.dom.minidom, sys
#--------------------------------------------------------------
# Load the complete sonnette tree and return one sonnette as text
# B�rre Stenseth 2006 
#-----------------------------------------------------------------
# collect all text in a node
def getText(nodelist):
    rc = ''
    for node in nodelist:
        if node.nodeType == node.TEXT_NODE:
            t=node.data.encode('ISO-8859-1')
            rc += t
    return rc
    
#----------------------------------------------
print 'Content-type: text/html\n'
# decide sonnette no from field sonette_num
form=cgi.FieldStorage()
#print form
sno=0
try:
    sno=int(form['sonette_num'].value)
except:
    sno=0

# indexing starts as 0
sno=sno-1
# read the xml-file and establish dom-tree
afile="sonnetes.xml"
try:
    file=open(afile,'r')
    txt=file.read()
    file.close()
except:
    print 'finner ikke datafil: '+afile
    sys.exit('gir opp')
doc = xml.dom.minidom.parseString(txt)
# identify the poem
poems=doc.getElementsByTagName('sonnet')
if sno >= len(poems):
  sno=len(poems)-1
if sno <0:
  sno=0
poem=poems[sno]
sid=getText(poem.getElementsByTagName('id')[0].childNodes)
T='<h2>Nr: %s</h2>'%sid
lines=poem.getElementsByTagName('line')
for line in lines:
    T+='<div class="line">'+ getText(line.childNodes)+'</div>\n' 
print T

Bruk av pythonskript på tjeneren, POST

Samme som ovenfor, men vi bruker POST istedet for GET.

Et enkelt "vevsted"

Et enkelt vevsted med 3 sider, eller egentlig en side der hovedinnholdet byttes ut.

GET eller POST

Vi kan hente data med GET eller med POST. POST har den egenskapen at den kan transportere større datamengder. Anta at vi har etablert et XMLHttpRequest-objekt og at vi har gjort klar parameterlista, params.

POST:

...
myRequest.open("POST", url,true);
myRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myRequest.setRequestHeader("Content-length", params.length);
myRequest.setRequestHeader("Connection", "close");
myRequest.send(params);

GET:

...
myRequest.open("GET", url+'?'+params, true);
myRequest.send(null);

Det samme Pythonskriptet på betjener begge metodene.

Metoder og egenskaper

Et XMLHttpRequest-objekt har følgende metoder og egenskaper: