KOMPOOS.NL

XMLHttpRequest - voorbeeld

home » javascripts » xmlhttprequest.html

server meldt: ik wacht op een request

klik voor een XMLHttpRequest demonstratie

uitleg van deze pagina (xmlhttprequest.html)

Dit is de eenvoudigste manier om een php-routine, via javascript, aan te roepen (die dan ook daadwerkelijk uitgevoerd wordt...). Eén werkend voorbeeld zegt meestal meer dan 10 "dikke" manuals met stof-droge theorie. Als je precies wilt begrijpen hoe alles precies in elkaar steekt moet je de theorie maar eens gaan bestuderen. Wat deze pagina aan gaat raad ik je aan om de code, naar eigen behoefte, "om te bouwen".

Bovenaan het javascript staat een variabele met "gereverste" (achterstevoren) tekst. Die variabele wordt met een "GET" naar de php-file "xmlhttprequest.php" gestuurd. De php-file draait de tekst met "strrev()" om en voegt daaraan de huidige tijd toe. Door middel van een echo zendt de php-file de gegevens terug naar het javascript. En daar wordt tot slot (door .responseText) de ontvangen data in een span geplaatst met "innerHTML".

De meeste mensen die ik ken hebben in het begin wat moeite gehad om het principe te doorgronden. Oplossing: Gewoon een paar eigen procedures maken, met deze procedure als leidraad.

html-code van de request-procedure


<p>
        <strong>server meldt: </strong>
        <span id="result_request">ik wacht op een request</span>
</p>
<p>
        <a onclick="start_request()" href="#">klik voor een XMLHttpRequest demonstratie</a>
</p>

javascript voor XMLHttpRequest


<script>
function start_request() {
    var request_data = "dreovegtiu tseuqer";
    if (window.XMLHttpRequest) {
        xml_http_request = new XMLHttpRequest();
    } else {
        xml_http_request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xml_http_request.onreadystatechange = function () {
        if (xml_http_request.readyState === 4 && xml_http_request.status === 200) {
            document.getElementById("result_request").innerHTML = xml_http_request.responseText;
        }
    };
    xml_http_request.open("GET", "xmlhttprequest.php?q=" + request_data, true);
    xml_http_request.send();
}
</script>

inhoud van de php-file xmlhttprequest.php


<?php
   $q=$_GET["q"];
   echo strrev($q)." om ".date("H:i:s");
?>