Weblog van Spruit
Goal in life: Create order, think lateral.
Sunday, June 10, 2007
AJAX
Advanced Javascript And XML is er alweer een poosje, dus hoogste tijd om deze techniek in te bouwen in www.TheRiddle.eu. In het contentmanagementgedeelte heb ik eindelijk de mogelijkheid om in een scherm met 1400+ raadsels, 1 raadsel tegelijk te editen zonder de pagina te verversen. Voorheen moest ik om het betreffende raadsel te editen eerst naar een aparte pagina. Werkt erg prettig en snel nu!
Kortweg geeft AJAX je de mogelijkheid om een stuk server side script aan te roepen en resultaten te tonen zonder dat je weg navigeert van de pagina waar je op dat moment bent.
Makkelijk was het echter niet. Misschien komt het doordat mijn javascript vaardigheden wat roestig zijn geworden. Maar misschien ook doordat mijn browsers (Firefox en IE7) nul komma nul feedback geven als je een haakje of een puntkomma bent vergeten. Zoeken en vloeken dus! Met behulp van de tutorial op w3schools is het echter gelukt.
Het volgende stuk client side javascript is waar het allemaal om draait.
var xmlHttp;
var riddleId;
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function stateChanged()
{
var fieldName = "saveTime"+riddleId;
if (xmlHttp.readyState==4)
{
document.getElementById(fieldName).innerHTML=xmlHttp.responseText;
}
if (xmlHttp.readyState==0)
{
document.getElementById(fieldName).innerHTML="The request is not initialized.";
}
}
function ajaxUpdateRiddle(riddleNr,id)
{
var fieldName = "forkids"+riddleNr;
var forKids = document.getElementById(fieldName).checked;
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
riddleId = id;
var url="jouwserversidescript.asp";
url=url+"?id="+id;
url=url+"&forkids="+forKids;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
De functie ajaxUpdateRiddle roep je vervolgens ergens later aan. Bijvoorbeeld, als de gebruiker op de save knop naast een raadsel drukt. O ja, je moet natuurlijk ook nog even jouwserversidescript.asp programmeren :-)Labels: AJAX
comments []
|
