Eerste voorbeelden
Werkende voorbeelden:
http://www.manutechnica.com/tutorials/ajax/phphulp/eerste/
http://www.manutechnica.com/tutorials/ajax/phphulp/login/
Je haalt een bericht van de server en zet die in een div. Met GET variabelen kan je de id van het bericht mee geven.
Javascript is event driven. Javascript gaat (over het algemeen) pas aan de slag als de gebruiker daarvoor een aanleiding geeft. Een aantal events zijn: onClick, onMouseOver, onLoad, ...
Hier gebruiken we een <a></a>
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
switch($_GET['pagina'])
{
default:
echo '<html>
<head>
<script src="ajax.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
<style>
#menuDiv {border: 1px solid #333333; height: 150px; width: 250px; float: left; margin: 0 3px 0 0;}
#content{border: 1px solid #333333; height: 150px; width: 450px; float: left;}
</style>
</head>
<body>
<h3>Eerste voorbeeld - met GET</h3>
<div id="menuDiv">
<div><a href="javascript: navigeer(1);">bericht 1</a></div>
<div><a href="javascript: navigeer(2);">bericht 2</a></div>
<div><a href="javascript: navigeer(3);">bericht 3</a></div>
</div>
<div id="content"></div>
</body>
</html>
';
break;
case 'navigeer':
if (! empty($_GET['id']))
{
$berichten = array(
1 => 'Bericht 1. <br/><br/>In principe zou dit bericht uit de database komen.',
'Bericht 2. <br/><br/>Maar hier gaat het even juist om de Ajax, niet om MySQL.',
'Bericht 3. <br/><br/>Kwestie van door de bomen het bos nog te kunnen zien.'
);
echo $berichten[ (int) $_GET['id'] ];
}
break;
}
?>
switch($_GET['pagina'])
{
default:
echo '<html>
<head>
<script src="ajax.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
<style>
#menuDiv {border: 1px solid #333333; height: 150px; width: 250px; float: left; margin: 0 3px 0 0;}
#content{border: 1px solid #333333; height: 150px; width: 450px; float: left;}
</style>
</head>
<body>
<h3>Eerste voorbeeld - met GET</h3>
<div id="menuDiv">
<div><a href="javascript: navigeer(1);">bericht 1</a></div>
<div><a href="javascript: navigeer(2);">bericht 2</a></div>
<div><a href="javascript: navigeer(3);">bericht 3</a></div>
</div>
<div id="content"></div>
</body>
</html>
';
break;
case 'navigeer':
if (! empty($_GET['id']))
{
$berichten = array(
1 => 'Bericht 1. <br/><br/>In principe zou dit bericht uit de database komen.',
'Bericht 2. <br/><br/>Maar hier gaat het even juist om de Ajax, niet om MySQL.',
'Bericht 3. <br/><br/>Kwestie van door de bomen het bos nog te kunnen zien.'
);
echo $berichten[ (int) $_GET['id'] ];
}
break;
}
?>
ajax.js vind je in het begin van de tutorial
js.js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
http = createHTTPHandler();
function navigeer(id)
{
var url = "index.php?pagina=navigeer&id=" + id;
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function handleHttpResponse()
{
if(http.readyState == 4)
{
var resultaat = http.responseText;
document.getElementById('content').innerHTML = resultaat;
}
}
function navigeer(id)
{
var url = "index.php?pagina=navigeer&id=" + id;
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function handleHttpResponse()
{
if(http.readyState == 4)
{
var resultaat = http.responseText;
document.getElementById('content').innerHTML = resultaat;
}
}
Wat zien we?
Je koppelt een javascript functie aan het veranderen van ready states.
Er zijn 5 Ready States. Bij http.readyState == 4 is alles volledig klaar. Bij lagere ready states is de request nog bezig.
Hier gebruikten we GET variabelen. Nu zullen we ook POST gebruiken.
Een registratieformulier:
Wanneer je probeert te registreren met een naam die al geregistreerd is, word je verwittigd. Je wordt ook verwittigd wanneer de twee paswoorden niet overeen komen.
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?php
$content = '';
switch($_GET['pagina'])
{
case 'ingelogd':
$content = 'Je bent ingelogd.';
break;
default:
$content ='<div id="loginDiv">
<h3>voorbeeld met POST</h3>
<div>Jan, Freddy, Cindy, Frank en Bruno zijn al geregistreerd.</div>
<div>Probeer eens te registreren met een van die namen. Probeer ook eens niet-passende paswoorden op te geven.</div>
<div>De registreer knop doet niets.</div>
<h2>Registreer</h2>
<input type="text" id="naam" onChange="registreer();" /> Login <br/>
<div id="boodschap"></div>
<input type="password" id="paswoord" /> paswoord <br/>
<input type="password" id="paswoord2" onChange="registreer();" /> herhaal paswoord <br/>
<input type="text" id="email" /> e-mail <br/>
<input type="text" id="gsm" /> GSM <br/>
...<br/>
<input type="button" value="Registreer" />
</div>';
break;
case 'registreer':
if (! empty($_POST['naam']) )
{
$namenInDB = array('Jan', 'Freddy', 'Cindy', 'Frank', 'Bruno');
if ( in_array($_POST['naam'], $namenInDB) )
echo '<p>De login is al bezet. Kies een andere login.</p>';
}
if ( isset($_POST['paswoordKlopt']) )
{
if ($_POST['paswoordKlopt'] == 'klopt niet')
echo '<p>Paswoorden komen niet overeen.</p>';
}
break;
}
if ($content != '')
{
echo '<html>
<head>
<script src="ajax.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
<style>
#menuDiv {border: 1px solid #333333; width: 250px; float: left; margin: 0 3px 0 0;}
#content{border: 1px solid #333333; width: 450px; float: left;}
#boodschap{color: #ff0000; font-size: 13px;}
</style>
</head>
<body>
'. $content .'
</body>
</html>
';
}
?>
$content = '';
switch($_GET['pagina'])
{
case 'ingelogd':
$content = 'Je bent ingelogd.';
break;
default:
$content ='<div id="loginDiv">
<h3>voorbeeld met POST</h3>
<div>Jan, Freddy, Cindy, Frank en Bruno zijn al geregistreerd.</div>
<div>Probeer eens te registreren met een van die namen. Probeer ook eens niet-passende paswoorden op te geven.</div>
<div>De registreer knop doet niets.</div>
<h2>Registreer</h2>
<input type="text" id="naam" onChange="registreer();" /> Login <br/>
<div id="boodschap"></div>
<input type="password" id="paswoord" /> paswoord <br/>
<input type="password" id="paswoord2" onChange="registreer();" /> herhaal paswoord <br/>
<input type="text" id="email" /> e-mail <br/>
<input type="text" id="gsm" /> GSM <br/>
...<br/>
<input type="button" value="Registreer" />
</div>';
break;
case 'registreer':
if (! empty($_POST['naam']) )
{
$namenInDB = array('Jan', 'Freddy', 'Cindy', 'Frank', 'Bruno');
if ( in_array($_POST['naam'], $namenInDB) )
echo '<p>De login is al bezet. Kies een andere login.</p>';
}
if ( isset($_POST['paswoordKlopt']) )
{
if ($_POST['paswoordKlopt'] == 'klopt niet')
echo '<p>Paswoorden komen niet overeen.</p>';
}
break;
}
if ($content != '')
{
echo '<html>
<head>
<script src="ajax.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
<style>
#menuDiv {border: 1px solid #333333; width: 250px; float: left; margin: 0 3px 0 0;}
#content{border: 1px solid #333333; width: 450px; float: left;}
#boodschap{color: #ff0000; font-size: 13px;}
</style>
</head>
<body>
'. $content .'
</body>
</html>
';
}
?>
js.js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
http = createHTTPHandler();
function registreer()
{
var naam = document.getElementById('naam').value;
var paswoord = document.getElementById('paswoord').value;
var paswoord2 = document.getElementById('paswoord2').value;
var paswoordKlopt = 'leeg';
if (paswoord != "" && paswoord2 != "")
{
paswoordKlopt = 'klopt niet';
if (paswoord == paswoord2)
paswoordKlopt = 'klopt';
}
var passData = 'naam=' + escape(naam) +"&paswoordKlopt=" + escape(paswoordKlopt) ;
var url = "index.php?pagina=registreer";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = handleHttpResponseLogin;
http.send( passData );
}
function handleHttpResponseLogin()
{
if(http.readyState < 4)
{
}
if(http.readyState == 4)
{
var resultaat = http.responseText;
document.getElementById('boodschap').innerHTML = resultaat;
}
}
function registreer()
{
var naam = document.getElementById('naam').value;
var paswoord = document.getElementById('paswoord').value;
var paswoord2 = document.getElementById('paswoord2').value;
var paswoordKlopt = 'leeg';
if (paswoord != "" && paswoord2 != "")
{
paswoordKlopt = 'klopt niet';
if (paswoord == paswoord2)
paswoordKlopt = 'klopt';
}
var passData = 'naam=' + escape(naam) +"&paswoordKlopt=" + escape(paswoordKlopt) ;
var url = "index.php?pagina=registreer";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = handleHttpResponseLogin;
http.send( passData );
}
function handleHttpResponseLogin()
{
if(http.readyState < 4)
{
}
if(http.readyState == 4)
{
var resultaat = http.responseText;
document.getElementById('boodschap').innerHTML = resultaat;
}
}
Merk op: Je kan met ajax controleren of de velden goed zijn ingevuld, maar je zal aan de server kant toch de laatste controle moeten doen.
Wat zien we hier niet?
We zien nergens een <form>. Met Ajax heb je dat dus niet meer nodig. Je geeft alle input velden een unieke id. Aan de hand van die id kan javascript de waarde lezen in het input veld en eventueel dus die data naar de server sturen.
GET en POST
Wanneer gebruik je GET en wanneer POST? Het is net zoals wanneer je geen Ajax gebruikt. Een algemene regel, die je ook al kan afleiden uit de naam:
-To Get betekent: halen. Get variabelen gebruik je wanneer je iets van de server wil halen. Je geeft bv. een id mee, php toont je een bericht.
-POST gebruik je wanneer je gegevens van de gebruiker naar de server wil sturen. Een evident voorbeeld is de tekst in een gastenboek. Neem gewoon als algemene regel dat je waarden uit textboxes of textarea opstuurt met POST.
« vorige pagina | volgende pagina »