Ajax schmajax

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

7 reacties op “Ajax schmajax”

  1. Oké, je hebt het ook ontdekt 😉 Het is idd allemaal heel eenvoudig, maar je kan er ongelooflijk leuke dingen mee doen. Ik vrees dat je snel verknocht zal zijn!

  2. Ja, die atlas ziet er idd ook veel belovend uit.

    Eigenlijk, nu ik er over nadenk: ik de admin van http://www.chiro.be zit al 2 jaar of zo een menueditor die ook AJAX is, alleen heette het toen zo niet. ‘k weet niet hoe ik er toen opgekomen ben om het zo te doen, maar ik geloof dat het iets had te maken met een treeview die ik had gevonden, en die toeliet om dynamisch de tree op te vullen aan de hand van de nodes die je openklapte… ‘k ben daar op verder gegaan, en de rest van de module ook zo geschreven.

    Ja zo was het. 😀

  3. Eindelijk eens een ajax-thingamabob in mensentaal, waarvoor hulde!
    En, maar, als ijverige diy-knutselaar zit ik hier nu al een uurtje te prutsen met bovenstaand voorbeeld wat op zich mooi werkt. Hoe voeg je echter een tweede parameter toe op deze lijn:

    req.open(’get’, ‘handler.php?param=’+param);

    Heb geprobeerd met:

    req.open(’get’, ‘handler.php?param=’+param+’&param2=’+param2);

    …maar dat lijkt niet te lukken (en ja, ik heb de tweede param ook als param in de functie gedeclareerd)…

Reacties zijn gesloten.