Ik zie wel wat plaats voor refreshloze dingen op ons nieuw intranet—vooral voor dingen in widgets in sidebars. Maandkalenders vooruit en achteruit laten gaan bijvoorbeeld, of menu’s van het cafetaria, of snelle zoekopdrachten in lijsten en zo.

Na enig rondkijken op tinternet: is that all there is to it? ‘t Is dat ik er nog nooit nood aan gehad heb, want die zo geroemde xmlhttp-nonsens is eigenlijk echt wel poepsimpel.

Ter illustratie een voorbeeld: maak een formulier dat een opzoeking doet in een telefoonboek, en toon het resultaat op dezelfde pagina zonder de pagina te laten over en weer gaa naar de server. [allemaal zonder enige error checking en vies geprogrammeerd, maar ‘t is het principe dat telt natuurlijk]

Om te beginnen moet er een XMLHTTP-object aangemaakt worden. Dat gebeurt in IE anders dan in andere browsers, dus het javascript ziet er bijvoorbeeld zo uit:

var req;
if (navigator.appName=="Microsoft Internet Explorer") {
    req=new ActiveXObject("Microsoft.XMLHTTP");
} else {
    req=new XMLHttpRequest();
}

Dan definieer ik twee functies: één om de data te versturen, en één om de terug ontvangen data op de pagina te plaatsen:

function doGet(param) {
    req.open('get', 'handler.php?param='+param);
    req.onreadystatechange=doResult;
    req.send(null);
}

function doResult() {
    if (req.readyState == 4) 
        document.getElementById('srchRes').innerHTML=req.responseText;
}

doGet heeft één parameter, en die word naar handler.php verstuurd, als een parameter van een gewone GET. Dan wordt er gezegd dat bij een verandering van readyState doResult opgeroepen moet worden, en dan wordt de hele zooi opgestuurd.

doResult kijkt na of de readyState wel “Object is completely initialized” is, en in dat geval smijt het (in dit voorbeeldje) de inhoud van het teruggekregen document in zijn volledigheid in het element met ID “srchRes”.

Het formpje ziet er bijvoorbeeld zo uit, met net eronder een lege paragraaf:

<form>
    <input type="text" id="srchTxt" />
    <input type="button" value=" go " 
      onclick="javascript:doGet(document.getElementById('srchTxt').value);" />
</form>
<p id="srchRes"></p>

[jaja, er zou om goed te zijn ook een action en een method bij het form moeten staan, en een name bij het tekstinputveld, en de button zou zo goed een submit kunnen zijn, en dan zou het allemaal óók voor mensen zonder javascript werken, maar bon, ‘t is maar een voorbeeld]

In handler.php wordt de opzoeking gedaan en precies zo getoond als ze op de resultaatpagina moet komen te staan. Voor het voorbeeld heb ik geen opzoeking gedaan maar gewoon dit:

<?php
echo "Resultaat voor <strong>".$_REQUEST['param']."</strong> was, enz.";
?>

…en dat is het. Twee bestandjes. Twee functietjes.

De dingen wat fancier maken is hoegenaamd niet moeilijk: data die te versturen en te ontvangen is, wrappen in XML bijvoorbeeld, en waar nodig serialiseren/deserialiseren. Of css-en-javascriptgewijs dingen laten oplichten als ze verschijnen. Maar dit is de basis: een XmlHttpRequest maken, data naar een andere pagina smijten, wachten tot die pagina een resultaat teruggeeft, en dan het resultaat verwerken.

Enjoy!

Geschreven al luisterend naar: Miranda Sex Garden – Suspiria – Willie Biddle And His Waltzing Maggot