Een voorbeeld gebruik van het XMLHTTPRequest object


Ajax (Asynchroon Javascript And Xml) slaat een brug tussen client-site Javascript en server-side scripting talen als bv. PHP en Perl. Met Ajax is het mogelijk delen van een pagina (asynchroon van de rest) te laden. Dit maakt dat de pagina meer als een interactieve applicatie aanvoelt dan als een statische pagina. Centraal binnen Ajax is het XMLHTTPRequest object. Dit object kan aan de client-side, bv. door JavaScript, gebruikt worden om XML-data of anderszins (text)data uit te wisselen met een server, waar bv. PHP-scripting het antwoord verzorgt.

Laten we een voorbeeld bij de hand nemen.
We hebben een select list waarin we kunnen kiezen uit twee servers. Als we een selectie maken wordt middels “ajax” (lees: het XMLHTTPRequest object) een php-script aangeroepen wat (in dit geval) een xml-repsonse geeft met wat server specificaties.
Hier eerst het resultaat:
— Kies een server —goalie.all-stars.nlcolo.all-stars.nl

Merk op dat de pagina niet “knippert”. Het antwoord van de server wordt in het document “gevoegd”.

Tijd voor de uitleg:
Op de server hebben we een php-script (show_specs.php) dat er als volgt uitziet:

<?php
  # --------------------------------------------------------------------
  # init stuff
  # --------------------------------------------------------------------
  # override php.ini settings
  require_once("init.inc");
  # common functions
  require_once("db_connect.inc");

  header('Content-type: text/xml');
  $hostname = $_POST['hostname'];

  function show_type($hostname) {
    // get specs from db and output xmlresponse
    db_connect();
    $query  = "SELECT type,cpu,os,comment FROM hardware WHERE hostname = "$hostname"";
    $result = mysql_query($query);
    $row = mysql_fetch_array($result, MYSQL_ASSOC);
    echo "<xmlresponse>\n";
    echo "  <param>type</param><param>{$row['type']}</param>\n";
    echo "  <param>cpu</param><param>{$row['cpu']}</param>\n";
    echo "  <param>os</param><param>{$row['os']}</param>\n";
    echo "  <param>comment</param><param>{$row['comment']}</param>\n";
    echo "</xmlresponse>\n";
  }
  show_type($hostname);
?>

Dit php-script geeft een xml-response met wat hardware-specificaties behorende bij een hostnaam. Nu gaan we kijken naar de JavaScript/Ajax code die dit script kan aanroepen. We maken eerst een html formulier met wat keuze mogelijkheden:

<select id="hosts" onChange="show(this.name)">
<option disabled selected>-- Kies een server --</option>
<option value="goalie.all-stars.nl">goalie.all-stars.nl</option>
<option value="colo.all-stars.nl">colo.all-stars.nl</option></select>
<div id="result"></div>

Let op de lege div met id “result“: hierin komt straks de xml-output van show_specs.php (wat er voor zorgt dat de pagina niet “knippert”). Het php-script show_specs.php roepen we aan m.b.v. het XMLHTTPRequest object:

<script type="text/javascript">
function show(field) { 
  var sel = document.getElementById("hosts");
  var hostname = sel.options[sel.selectedIndex].value;
  var html = "<br/><h2>Specificaties voor " + hostname + "</h2>\n";
  html += "<table border=1>\n";
  xmlhttp.open("GET", "show_specs.php?hostname="+hostname,true);

  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4) {
      var response = xmlhttp.responseXML;
      var paramList = response.getElementsByTagName('param');
      for (i=0, ilen = paramList.length; i < ilen;) {
        html += "<tr><td>" + paramList[i++].firstChild.nodeValue + "</td>";
        html += "<td>" paramList[i++].firstChild.nodeValue + "</td></tr>\n";
      }
      html += "</table>\n";
      document.getElementById('result').innerHTML = html;
    }
  }
  xmlhttp.send(null); 
}
</script>

En klaar zijn we. Met javascript libraries als prototype of jQuery gaat bovenstaande veel makkelijker maar dan krijg je er wel gratis een heleboel code bij die we in dit geval niet nodig hebben. Alles heeft z’n prijs.