Informatie opvragen zonder herladen

Artikel details

In Artikels » Ajax

Door BigSmoke

06-01-2008 13:48

Bron

Ajax, PHP

Soortgelijke artikels

In dit artikel gaan we leren hoe we informatie opvragen zonder de pagina te herladen. De voordelen hiervan zijn dat dit bezoekersvriendelijk is en de bezoeker zal hier tevens niets van zal merken. Het script is geschreven in javascript / Ajax. Het maakt gebruik van xml http request om informatie op te vragen. Deze requests laadt een pagina op de achtergrond waaruit dan de nodige informatie wordt gehaald om vervolgens aan de bezoeker te tonen. Je kan dit script bijvoorbeeld gebruiken om statistieken up-to-date te houden of als een bezoeker iets intypt in een zoekveld kun je op de reeds ingevulde woorden een request uitvoeren om zoeksuggesties te geven. Je hoort het dit soort scripts is geheel voor de gebruiksvriendelijkheid.

De volgende code zal een bestand (aantal.php) inlezen.

<html>
<head>
<script type="text/javascript">
function doRequest(){
   var xmlHttp;
   try{
      // firefox, opera 8.0+, Safari
      xmlHttp= new XMLHttpRequest();
   }catch (e){
       // speciaal voor Internet Explorer
       try{
           xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
       }catch (e){
           try{
              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
           }catch (e){
              alert("Jouw browser biedt geen ondersteuning voor AJAX")
              return false;
           }
       }
   }
       xmlHttp.onreadystatechange=function(){
       if(xmlHttp.readyState==4){//Controleer ofdat het document al ingeladen is
       // is dit zo geef het input veld aantal de waarde van het document
          document.formulier.aantal.value=xmlHttp.responseText;
       }else{
           //bezig met openen van document
           //readyState kan zijn:
           //0   Het verzoek is niet aangemaakt
           //1   Het verzoek is aangemaakt
           //2   Het verzoek is verzonden
           //3   Het verzoek is bezig
           //4   Het verzoek is gedaan
       }
}
      xmlHttp.open("GET","aantal.php",true);
      xmlHttp.send(null);
}
</script>
</head>
...

Zoals je ziet zal de waarde van het document dat wordt ingeladen worden doorgestuurd naar het formulier (genaamd formulier) met input veld aantal. Dit zal gebeuren van zodra de functie (doRequest()) wordt aangeroepen. Hieronder volgt het vervolg van het script hier staat een formulier en een knop. Als op deze knop gedrukt wordt zal deze de doRequest aanroepen en vervolgens zal deze het script inladen en de waarde van het script in het aantal veld weergeven.

...
<body>

        waarde van test.txt bestand
          <form name="formulier">
        <input type="text" name="aantal" id="aantal" />
        <input type="button" onclick="doRequest();" /></form>
</body>
</html>

Zoals je ziet is het enige wat we nog moeten doen een pagina aanmaken die een unieke content bezit elke keer als we hem laden zodat we het script kunnen testen. Noem het volgende script <i>aantal.php</i>. Het zal 10 willekeurige cijfers printen.

<?
for($i=0;$i<=10;$i++){
print rand(0,9);
}
?>

Zoals je ziet zal het veld aantal telkens veranderen (waarde aantal.php) als er op de knop is gedrukt die met de zelfgemaakte doRequest() functie is uitgerust. Natuurlijk is het ook mogelijk om zonder een knop het veld aantal up-to-date te houden. Dit kan je doen door deze code in de head tags van je pagina te plaatsen. Het zal automatisch om de 500miliseconden de update uitvoeren.

setTimeout ('doRequest()', 500);

Waar kunnen we deze requests nu gebruiken?

Registreer systemen waar iedere gebruiker een unieke gebruikersnaam heeft. Je kan bij het invullen van een gebruikersnaam steeds controleren of deze naam al bestaat zonder te herladen.
Bij het zoeken om zoeksugesties te geven
Statistieken up-to-date houden

Voorbeeld

Een voorbeeld kan je vinden op aantal.html

regards

1. Reactie door baldex op 22-10-08 17:10

het lukt ij niet om dit setTimeout ('doRequest()', 500); stukje script er in te zeten moet het zo <head setTimeout ('doRequest()', 500);> of moet het in die script tags

Om op dit artikel te reageren dient u een account aan te maken.