[AJAX] Wegwijs In De Basistechnieken

   <script>
 1 var SERVER = {
 2     loaded : false,
 3     requestobj : false,
 4     load : function() {
 5         if( SERVER.loaded == false ) {
 6             this.loaded = SERVER.loadrequestobj(); //probeer te laden
 7         }
 8         return this.loaded;
 9     },
10     loadrequestobj : function () {
11         if (window.XMLHttpRequest){ // if Mozilla, Safari etc or IE7
12             this.requestobj = new XMLHttpRequest();
13             if (this.requestobj.overrideMimeType) this.requestobj.overrideMimeType('text/xml');
14             return true;
15         }
16         else if (window.ActiveXObject){ // if IE, not IE7
17             try {
18                 this.requestobj = new ActiveXObject("Msxml2.XMLHTTP");
19             }
20             catch (e) {
21                 try {
22                     this.requestobj = new ActiveXObject("Microsoft.XMLHTTP");
23                 }
24                 catch (e) {
25                     return false;
26                 }
27             }
28             return true;
29         }
30         return false;
31     }
32 }

   <script>
 1 var SERVER = {
 2     loaded : false,
 3     requestobj : false,
 4     load : function() {
   …
 9     },
10     loadrequestobj : function () {
   …
31     },
32     GETrequest : function(url,data,func) {
33         if( !this.load() ) return false;
34         this.requestobj.open('GET', url+'?'+data, true);
35         if( func  ) this.requestobj.onreadystatechange = func;
36         this.requestobj.send(null);
37         return true;
38     }
39 }

   <script>
 1 var SERVER = {
 2     loaded : false,
 3     requestobj : false,
 4     load : function() {
   …
 9     },
10     loadrequestobj : function () {
   …
31     },
32     GETrequest : function(url,data,func) {
   …
38     },
39     POSTrequest : function(url,data,func) {
40         if( !this.load() ) return false;
41         this.requestobj.open('POST', url, true);
42         if( func ) this.requestobj.onreadystatechange = func;
43         this.requestobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
44         this.requestobj.setRequestHeader("Content-length", data.length);
45         this.requestobj.setRequestHeader("Connection", "close");
46         this.requestobj.send(data);
47         return true;
48     }
49 }

<a onclick=”SERVER.GETrequest( ‘verwerk.php’, ‘letter=c’ );”>ajax-request (stuur letter c door naar server)</a>
<a href=”javascript: SERVER.GETrequest( ‘verwerk.php’, ‘letter=c’ );”> ajax-request (stuur letter c door naar server)</a>

<form name="ajax-formke">
<input type="text" name="letter" id="letter" value="" onchange="SERVER.GETrequest( 'verwerk.php', 'letter='+this.value );" />
</form>

<a href="no-ajax.php?stem=5;javascript: return ajax_stem(5);">link</a>
<script>
Function ajax_stem( getal ) {
    if( !SERVER.load() ) return true; //tlukt niet met ajax, voer die url uit
    if( SERVER.GETrequest( 'verwerk.php', 'stem='+getal ) ) return false; //voer die url NIET uit
}
</script>

   <script>
 1 var SERVER = {
 2     loaded : false,
 3     requestobj : false,
 4     load : function() {
   …
 9     },
10     loadrequestobj : function () {
   …
31     },
32     GETrequest : function(url,data,func) {
   …
38     },
39     POSTrequest : function(url,data,func) {
   …
48     },
49     Ontvangst : function() {
50         if( this.requestobj.readyState != 4 ) return false;
51         else if( this.requestobj.status != 200 ) return 'Fout: '+this.requestobj.statusText;
52         else return this.requestobj.responseText;
53     }
54 }

<script>
 1 var SERVER = {
   …
54 }
</script>
<script>
1 function zend( letter ) {
2     SERVER.GETrequest( 'verwerk.php', 'letter='+letter, doe );    
3 }
4 function doe( ) {
5     var data = SERVER.Ontvangst();
6     if( data ) { 
7         document.getElementById( 'divke' ).innerHTML = data;
8     }
9 }
</script>
<div id="divke">
<a href="javascript: zend( 'c' );"> ajax-request (stuur letter c door naar server)</a>
</div>

<?php
$ledenarray = array( array('naam'=>'jan','geslacht'=>'man'), array('naam'=>'wim','geslacht'=>'man') );

include_once( 'json.php' );
$json = new Services_JSON();
$output = $json->encode($ledenarray);

echo $output;
die();
?>

<script>
4 function doe( ) {
5     var data = SERVER.Ontvangst();
6     if( data ) { 
7         eval( "var ledenarray = "+data );
          //...vanalles doen met de data in de variable ledenarray
8     }
9 }
</script>

<script>
 1 var SERVER = {
   …
54 }
</script>
<script>
 1 function poll_zend( poll_id, keuze_id ) {
 2     SERVER.POSTrequest( 'poll_verwerk.php', 'poll_id='+poll_id+'&stem='+keuze_id, poll_doe );
 3     document.getElementById( 'polldivke' ).innerHTML = "<img src="loading.gif" />";
 4 }
 5 function poll_doe( ) {
 6     var data = SERVER.Ontvangst();
 7     if( data ) { 
 8         document.getElementById( 'polldivke' ).innerHTML = data;
 9     }
10 }
</script>
<div id="polldivke">
<?php
include_once( 'functions.php' );
$poll_id = 5;

if( isset($_COOKIE['poll'.$poll_id]) ) {
     echo  output_poll_resultaat( $poll_id );
}
else {
     echo output_poll_stemformulier( $poll_id );
}
?>
</div>

function output_poll_resultaat( $poll_id ) {
     //We halen de pollresultaten op uit de database
         $sql = 'SELECT .... WHERE poll_id = '.(int)$poll_id;
     //We verwerken de databasegegevens tot xhtml
         return <<<EOF
         Keuze 1 (..%)<br />
         Keuze 2 (..%)<br />
         Keuze 3 (..%)<br />
EOF;
}

function output_poll_stemformulier( $poll_id ) {
     //We halen de pollmogelijkheden op uit de database
     //We verwerken alles en geven wat xhtml terug
         $s = "";
         $s .= '<a href="javascript: poll_zend( '.$poll_id.', 1 );">Keuze 1</a><br />';
         $s .= '<a href="javascript: poll_zend( '.$poll_id.', 2 );">Keuze 2</a><br />';
         $s .= '<a href="javascript: poll_zend( '.$poll_id.', 3 );">Keuze 3</a><br />';
         return $s;
}

if( isset($_POST['poll_id']) && isset($_POST['stem']) ) { //controleer of de data goed werd ontvangen
     $poll_id = (int)$_POST['poll_id'];
     $stem = (int)$_POST['stem'];
     if( !isset($_COOKIE['poll'.$poll_id]) ) { //gebruiker nog niet gestemd
         //stem opslaan in de database
          $sql = 'UPDATE ...';
          //cookie opslaan voor een jaar 
          setcookie( 'poll'.$poll_id, 'gestemd', time()+60*60*24*356);
     }
     //de pollresultaten doorsturen naar de browser
     echo output_poll_nogtestemmen( $poll_id );
}