AJAX voorbeeld

Om de snappen hoe AJAX werkt, maken we een eenvoudige AJAX toepassing.

De AJAX toepassing bevat een div tag met een tekst en een knop.

De div tag wordt gebruikt om de informatie die we van de server ontvangen weer te geven. Een klik op de knop start de functie inhoudOphalen().

De HTML en JavaScript code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>AJAX voorbeeld</title>
  <script type="text/javascript" src="ajax.js"></script>
  <script type="text/javascript">
    function inhoudOphalen(){
      var inhoud = new ajaxObject("voorbeeld_aanpassing.html");
      inhoud.callback = function (responseText, responseStatus, responseXML) {
	if (responseStatus == 200) { // Testen op 0 voor locale test in Firefox, op 200 online
	  document.getElementById('aanpassen').innerHTML=responseText;
	}
      }
      inhoud.update('','GET');
    }
  </script>
</head>
<body>
  <div id="aanpassen"><h2>Deze tekst aanpassen met AJAX</h2></div>
  <input type="button" name="button" id="button" value="Tekst aanpassen" onclick="inhoudOphalen();" />
</body>
</html>

Weergeven