Kodestrategier
Koderasjonalisering
Vi merker oss at vi trenger en global variabel, myRequest, for å huske hvilken henvendelse som er "utestående". Vi ser dessuten at dersom vi har en løsning med mange henvendelser, så må vi for sikkerhets skyld huske mange henvendelser eller vi må sørge for at vi bare har en utestående om gangen.
Vi ser dessuten at dersom vi har mange mulige henvendelser så blir mye av koden ren gjentagelse: Vi skal opprette en forespørsel, vi skal sende den og vi skal ta i mot og plassere svaret. Det eneste som skiller en situasjon fra en annen er at vi har forskjellige adresser å plassere resultatet i, at vi har forskjellige parametere og kansje at vi har forskjellige URL'er.
Vi kan løse opp i denne situasjonen med å bruke de mulighetene Javascript gir oss for å kople en anonym funksjon til et request-objekt som onreadystatechange. Koden nedenfor gir oss et rammeverk, eller om du vil et lite bibliotek, som gjør at vi kan rasjonalisere koden kraftig.
function establishRequest()
{
var theRequest=null;
if (window.XMLHttpRequest)
theRequest = new XMLHttpRequest();
else if (window.ActiveXObject)
{
try { theRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {theRequest= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {theRequest=null;}
}
}
else
theRequest=null;
return theRequest;
}
function postRequest(theRequest,params,targetId,theUrl)
{
theRequest.onreadystatechange =
function( ) {
processRequestChange(theRequest,targetId);
};
theRequest.open("POST", theUrl,true);
theRequest.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
theRequest.setRequestHeader("Content-length", params.length);
theRequest.setRequestHeader("Connection", "close");
theRequest.send(params);
}
function processRequestChange( aRequest,aTarget )
{
if (aRequest.readyState == 4) {
if ((aRequest.status == 200) || (aRequest.status == 304))
document.getElementById(aTarget).innerHTML=
aRequest.responseText;
else
alert("Problem med tilgang til data:\n" + aRequest.statusText);
}
}
Ved hjelp av disse funksjonene kan et par AJAX-henvendelser fra siden vår kode se slik ut:
function startMenuRequest()
{
var myRequest=establishRequest();
if (myRequest) {
postRequest(myRequest,
'theJob=country-list','leftmenu','../myscript.py');
}
else{
alert("Nettleseren henger ikke med");
}
}
function startResultHeaderRequest(ligaId)
{
var myRequest=establishRequest();
if(myRequest){
postRequest(myRequest,
'theJob=result-header&ligaId='+ligaId,
'resultheader',
'../myscript.py');
}
else{
alert("Nettleseren henger ikke med");
}
}
Dersom vi har behov for å sjekke data i en form eller hva det måtte være, kan vi gjøre dette i vår funksjon før vi setter opp en forespørsel. F.eks. slik:
function startMenuRequest(form)
{
// pick up and control data from the form
if (<something wrong or missing>)
{
<perform the proper alert or errormarking>
return;
}
// proceed with the requst
var myRequest=establishRequest();
if (myRequest) {
postRequest(myRequest,'theJob=country-list','leftmenu','../myscript.py');
}
else{
alert("Nettleseren henger ikke med");
}
}
Biblioteker
Selv om det vi har foreslått ovenfor kan være et nyttig knippe funksjoner for å effektivisere koding av enkle eksempler er det ikke et bibliotek som er generelt nok til å handtere og feilsikre mer komplekse situasjoner. Ikke uventet har den økte bruken av AJAX ført til at det dukker opp en rekke biblioteker av uilkt omfang som skal hjelpe oss å skrive rask og sikker AJAX-kode på klientsiden.
To interessante AJAX-biblioteker er prototype [1] og jQuery [2] . Det siste ser ut til å være det som er rikest. Du finner bruk av begge på de neste modulene.
