Tutorials
Ajax - XML - JSON
Een blik op een brede waaier aan mogelijkheden van Ajax
Pagina 1
Inleiding
Inleiding
Dit is een tutorial over AJAX. Grappen over het wasproduct en voetbalploeg kan je er zelf wel bij verzinnen. Met jQuery bv. kan je Ajax gebruiken op een andere manier. Hier zal ik het daar niet over hebben.
Het gaat om pure javascript.
WAAROM?
Waarom Ajax gebruiken?
Ajax kan je gebruiken wanneer je een verbinding wil maken met de server zonder de pagina te verlaten.
Een voorbeeld:
-Het zal iedereen wel al overkomen zijn. Je zit op een registratieformulier. Je vult een hoop informatie in en drukt op submit. Dan krijg je doodleuk een berichtje dat zegt dat de login al bestaat. Je moet alles opnieuw invullen. Het zou interessant zijn mocht je, na het invullen van de login naam, direct een berichtje krijgt dat je laat weten of de login al dan niet beschikbaar zijn. Verder in de tutorial zullen we dit oplossen.
WAT?
Ajax staat voor Asynchronous Javascript And XML. Ajax is dus javascript.
Wat gebeurt er? Je maakt een javascript object aan. Dat javascript object heeft de mogelijkheid om contact te maken met de server. Het object kan dus surfen op het internet. De volledige functionaliteit die je normaal hebt, blijft bewaard. Je kan GET en POST variabelen sturen, ja kan met COOKIES en SESSIONS werken.
Dit is een tutorial over AJAX. Grappen over het wasproduct en voetbalploeg kan je er zelf wel bij verzinnen. Met jQuery bv. kan je Ajax gebruiken op een andere manier. Hier zal ik het daar niet over hebben.
Het gaat om pure javascript.
WAAROM?
Waarom Ajax gebruiken?
Ajax kan je gebruiken wanneer je een verbinding wil maken met de server zonder de pagina te verlaten.
Een voorbeeld:
-Het zal iedereen wel al overkomen zijn. Je zit op een registratieformulier. Je vult een hoop informatie in en drukt op submit. Dan krijg je doodleuk een berichtje dat zegt dat de login al bestaat. Je moet alles opnieuw invullen. Het zou interessant zijn mocht je, na het invullen van de login naam, direct een berichtje krijgt dat je laat weten of de login al dan niet beschikbaar zijn. Verder in de tutorial zullen we dit oplossen.
WAT?
Ajax staat voor Asynchronous Javascript And XML. Ajax is dus javascript.
Wat gebeurt er? Je maakt een javascript object aan. Dat javascript object heeft de mogelijkheid om contact te maken met de server. Het object kan dus surfen op het internet. De volledige functionaliteit die je normaal hebt, blijft bewaard. Je kan GET en POST variabelen sturen, ja kan met COOKIES en SESSIONS werken.
Pagina 2
Het AJAX object aanmaken.
Dit is wat je nodig hebt.
index.php
ajax.js
js.js
Nu heb je dus een html pagina waar een actief Ajax object klaar staat. We hebben het hier http genoemd. Nu kunnen we er mee aan de slag. In het vervolg zal ik de code van ajax.js niet meer tonen; er verandert niets meer aan.
index.php
<html>
<head>
<script src='ajax.js' type='text/javascript'></script>
<script src='js.js' type='text/javascript'></script>
</head>
<body>
...
</body>
</html>ajax.js
function createHTTPHandler()
{
httphandler = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest)
{
try
{
httphandler = new XMLHttpRequest();
} catch(e)
{
httphandler = false;
}
// branch for IE/Windows ActiveX version
}
else if(window.ActiveXObject)
{
try
{
httphandler = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e)
{
try
{
httphandler = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e)
{
httphandler = false;
}
}
}
return httphandler;
}
js.js
var http = createHTTPHandler();
Nu heb je dus een html pagina waar een actief Ajax object klaar staat. We hebben het hier http genoemd. Nu kunnen we er mee aan de slag. In het vervolg zal ik de code van ajax.js niet meer tonen; er verandert niets meer aan.
Pagina 3
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
<?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;
}
?>
ajax.js vind je in het begin van de tutorial
js.js
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
<?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>
';
}
?>
js.js
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.
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
<?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;
}
?>
ajax.js vind je in het begin van de tutorial
js.js
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;
}
}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
<?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>
';
}
?>
js.js
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;
}
}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.
Pagina 4
Navigatie - bookmarken
Werkend voorbeeld
http://www.manutechnica.com/tutorials/ajax/phphulp/navig/
Een logische opmerking, die de ronde doet, is dat je Ajax moeilijk kan gebruiken voor navigatie. Je kan de pagina niet bookmarken.
Wel, er is een oplossing. Zet aan het eind van de url een # (hash teken). Daar rechts van kan je informatie kwijt. Al wat in de url rechts van het # staat, wordt niet naar de server gestuurd. Je kan die dan ook niet opspeuren met php. Lokaal kan je dat wel opsporen, met javascript.
Zo kan je dus bv. de pagina opslaan in de url, na de #.
Laat ons het eerste voorbeeld eens uitbreiden.
index.php
<?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: 450px; width: 250px; float: left; margin: 0 3px 0 0;}
#content{border: 1px solid #333333; height: 450px; width: 450px; float: left;}
</style>
</head>
<body onLoad="onLoad();">
<h3>navigatie - bookmarken</h3>
<div>Voorbeeld van navigatie. De pagina wordt meegegeven in de url, na het # teken. Je kan dit soort pagina dus ook bookmarken.</div>
<div id="menuDiv">
<div><a href="javascript: surf(1);">pagina 1</a></div>
<div><a href="javascript: surf(2);">pagina 2</a></div>
<div><a href="javascript: surf(3);">pagina 3</a></div>
</div>
<div id="content"></div>
</body>
</html>
';
break;
case 'navigeer':
// Ajax
if (! empty($_GET['id']))
{
$berichten = array(
1 => 'pagina 1. <br/><br/>Hier volgt dan de pagina',
'pagina 2. <br/><br/>Maar hier gaat het even juist om de Ajax.',
'pagina 3. <br/><br/>Kwestie van door de bomen het bos nog te kunnen zien.'
);
echo $berichten[ (int) $_GET['id'] ];
}
break;
}
?>
js.js
Zoals je ziet: javascript kan detecteren wat in de url na de # staat. Daarmee kan je dus een url maken die men kan bookmarken. Je kan zelf wel een functie scrijven die complexere gegevens uit de url kan halen. Het is een beetje spelen met split(), substring(), ...
http://www.manutechnica.com/tutorials/ajax/phphulp/navig/
Een logische opmerking, die de ronde doet, is dat je Ajax moeilijk kan gebruiken voor navigatie. Je kan de pagina niet bookmarken.
Wel, er is een oplossing. Zet aan het eind van de url een # (hash teken). Daar rechts van kan je informatie kwijt. Al wat in de url rechts van het # staat, wordt niet naar de server gestuurd. Je kan die dan ook niet opspeuren met php. Lokaal kan je dat wel opsporen, met javascript.
Zo kan je dus bv. de pagina opslaan in de url, na de #.
Laat ons het eerste voorbeeld eens uitbreiden.
index.php
<?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: 450px; width: 250px; float: left; margin: 0 3px 0 0;}
#content{border: 1px solid #333333; height: 450px; width: 450px; float: left;}
</style>
</head>
<body onLoad="onLoad();">
<h3>navigatie - bookmarken</h3>
<div>Voorbeeld van navigatie. De pagina wordt meegegeven in de url, na het # teken. Je kan dit soort pagina dus ook bookmarken.</div>
<div id="menuDiv">
<div><a href="javascript: surf(1);">pagina 1</a></div>
<div><a href="javascript: surf(2);">pagina 2</a></div>
<div><a href="javascript: surf(3);">pagina 3</a></div>
</div>
<div id="content"></div>
</body>
</html>
';
break;
case 'navigeer':
// Ajax
if (! empty($_GET['id']))
{
$berichten = array(
1 => 'pagina 1. <br/><br/>Hier volgt dan de pagina',
'pagina 2. <br/><br/>Maar hier gaat het even juist om de Ajax.',
'pagina 3. <br/><br/>Kwestie van door de bomen het bos nog te kunnen zien.'
);
echo $berichten[ (int) $_GET['id'] ];
}
break;
}
?>
js.js
http = createHTTPHandler();
function onLoad()
{
var pagina = getUrl(window.location);
if (pagina != '')
navigeer(pagina);
}
function surf(pagina)
{
if (pagina != '')
{
window.location = "#" + pagina;
navigeer(pagina);
}
}
function navigeer(pagina)
{
var url = "index.php?pagina=navigeer&id=" + pagina;
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function handleHttpResponse()
{
if(http.readyState == 4)
{
document.getElementById('content').innerHTML = http.responseText;
}
}
function getUrl(url)
{
var str = String(url);
var temp = new Array();
temp = str.split("#");
if (temp.length > 1)
return temp[1];
else
return '';
}
Zoals je ziet: javascript kan detecteren wat in de url na de # staat. Daarmee kan je dus een url maken die men kan bookmarken. Je kan zelf wel een functie scrijven die complexere gegevens uit de url kan halen. Het is een beetje spelen met split(), substring(), ...
Pagina 5
JSON
werkend voorbeeld
http://www.manutechnica.com/tutorials/ajax/phphulp/json/
Definitie en technische uitleg vind je overal wel online.
Wat ons interesseert: JSON is een notatie wijze van oa. javascript objecten en arrays.
Wat nog mooi is: php heeft functies om objecten om te zetten in strings die javascript kan begrijpen.
Waar kunnen we dat voor gebruiken?
Stel, je zit met een registratieformulier. Naast elk veld zet je een onzichtbare div met een boodschap. Die boodschap bevat telkens een waarschuwing over de inhoud van het veld.
Je zou dat volledige formulier kunnen controleren. Je geeft dan een array of object terug als http respons. Die kunnen dan rechtstreeks tonen welke velden al dan niet in orde zijn.
Een voorbeeld.
index.php
<?php
$content = '';
switch($_GET['pagina'])
{
case 'geregistreerd':
$content = 'Je bent geregistreerd.';
break;
default:
$content ='<div id="loginDiv">
<div>
<h3>JSON voorbeeld</h3>
Jan, Freddy, Cindy, Frank en Bruno zijn al geregistreerd.</div>
<div>Op elk veld wordt gecontroleerd. Enkel wanneer alles in orde is, wordt je doorgestuurd.</div>
<h2>Registreer</h2>
<input type="text" id="naam" /> Login <br/>
<div class="verborgen" id="boodschap_naam">Kies een andere Login naam.</div>
<input type="password" id="paswoord" /> paswoord <br/>
<input type="password" id="paswoord2" /> herhaal paswoord <br/>
<div class="verborgen" id="boodschap_paswoord">De paswoorden moeten overeenkomen</div>
<input type="text" id="email" /> e-mail <br/>
<div class="verborgen" id="boodschap_email">Geen geldig e-mail adres.</div>
<input type="text" id="gsm" /> GSM <br/>
<div class="verborgen" id="boodschap_gsm">GSM invullen aub.</div>
...<br/>
<input type="button" value="log in" onClick="registreer();"/>
</div>';
break;
case 'registreer':
$respons = new ajaxRespons_registreer($_POST['naam'], $_POST['paswoord'], $_POST['paswoord2'], $_POST['email'], $_POST['gsm']);
echo json_encode($respons);
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;}
.verborgen{display: none;color: #ff0000; font-size: 13px;}
</style>
</head>
<body>
'. $content .'
</body>
</html>
';
}
class ajaxRespons_registreer
{
public $naam;
public $paswoord;
public $email;
public $gsm;
public function __construct($naam, $paswoord, $paswoord2, $email, $gsm)
{
$this->naam = 0;
$this->paswoord = 0;
$this->email = 0;
$this->gsm = 0;
$namenInDB = array('Jan', 'Freddy', 'Cindy', 'Frank', 'Bruno');
if ($naam != '')
{
if ( in_array($naam, $namenInDB) )
$this->naam = 0;
else
$this->naam = 1;
}
if ($paswoord != '' && $paswoord2 != '')
{
$this->paswoord = ($paswoord == $paswoord2 ? 1 : 0 );
}
if ($email != '')
{
if ( count(explode("@", $email)) > 1 )
$this->email = 1;
}
if ($gsm != '')
{
$this->gsm = 1;
}
}
}
?>
js.js
Wat merk je? Je moet http.responseText eerst door eval sturen.
http://www.manutechnica.com/tutorials/ajax/phphulp/json/
Definitie en technische uitleg vind je overal wel online.
Wat ons interesseert: JSON is een notatie wijze van oa. javascript objecten en arrays.
Wat nog mooi is: php heeft functies om objecten om te zetten in strings die javascript kan begrijpen.
Waar kunnen we dat voor gebruiken?
Stel, je zit met een registratieformulier. Naast elk veld zet je een onzichtbare div met een boodschap. Die boodschap bevat telkens een waarschuwing over de inhoud van het veld.
Je zou dat volledige formulier kunnen controleren. Je geeft dan een array of object terug als http respons. Die kunnen dan rechtstreeks tonen welke velden al dan niet in orde zijn.
Een voorbeeld.
index.php
<?php
$content = '';
switch($_GET['pagina'])
{
case 'geregistreerd':
$content = 'Je bent geregistreerd.';
break;
default:
$content ='<div id="loginDiv">
<div>
<h3>JSON voorbeeld</h3>
Jan, Freddy, Cindy, Frank en Bruno zijn al geregistreerd.</div>
<div>Op elk veld wordt gecontroleerd. Enkel wanneer alles in orde is, wordt je doorgestuurd.</div>
<h2>Registreer</h2>
<input type="text" id="naam" /> Login <br/>
<div class="verborgen" id="boodschap_naam">Kies een andere Login naam.</div>
<input type="password" id="paswoord" /> paswoord <br/>
<input type="password" id="paswoord2" /> herhaal paswoord <br/>
<div class="verborgen" id="boodschap_paswoord">De paswoorden moeten overeenkomen</div>
<input type="text" id="email" /> e-mail <br/>
<div class="verborgen" id="boodschap_email">Geen geldig e-mail adres.</div>
<input type="text" id="gsm" /> GSM <br/>
<div class="verborgen" id="boodschap_gsm">GSM invullen aub.</div>
...<br/>
<input type="button" value="log in" onClick="registreer();"/>
</div>';
break;
case 'registreer':
$respons = new ajaxRespons_registreer($_POST['naam'], $_POST['paswoord'], $_POST['paswoord2'], $_POST['email'], $_POST['gsm']);
echo json_encode($respons);
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;}
.verborgen{display: none;color: #ff0000; font-size: 13px;}
</style>
</head>
<body>
'. $content .'
</body>
</html>
';
}
class ajaxRespons_registreer
{
public $naam;
public $paswoord;
public $email;
public $gsm;
public function __construct($naam, $paswoord, $paswoord2, $email, $gsm)
{
$this->naam = 0;
$this->paswoord = 0;
$this->email = 0;
$this->gsm = 0;
$namenInDB = array('Jan', 'Freddy', 'Cindy', 'Frank', 'Bruno');
if ($naam != '')
{
if ( in_array($naam, $namenInDB) )
$this->naam = 0;
else
$this->naam = 1;
}
if ($paswoord != '' && $paswoord2 != '')
{
$this->paswoord = ($paswoord == $paswoord2 ? 1 : 0 );
}
if ($email != '')
{
if ( count(explode("@", $email)) > 1 )
$this->email = 1;
}
if ($gsm != '')
{
$this->gsm = 1;
}
}
}
?>
js.js
http = createHTTPHandler();
function registreer()
{
var naam = document.getElementById('naam').value;
var paswoord = document.getElementById('paswoord').value;
var paswoord2 = document.getElementById('paswoord2').value;
var email = document.getElementById('email').value;
var gsm = document.getElementById('gsm').value;
var passData = 'naam=' + escape(naam) +"&paswoord=" + escape(paswoord) +"&paswoord2=" + escape(paswoord2) +"&email=" + escape(email) +"&gsm=" + escape(gsm);
var url = "index.php?pagina=registreer";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = handleHttpResponseRegistreer;
http.send( passData );
}
function handleHttpResponseRegistreer()
{
if(http.readyState < 4)
{
}
if(http.readyState == 4)
{
document.getElementById('boodschap_naam').style.display = 'none';
document.getElementById('boodschap_paswoord').style.display = 'none';
document.getElementById('boodschap_email').style.display = 'none';
document.getElementById('boodschap_gsm').style.display = 'none';
var resultaat = eval('(' + http.responseText + ')');
if (Number(resultaat.naam) == 0)
document.getElementById('boodschap_naam').style.display = 'block';
if (Number(resultaat.paswoord) == 0)
document.getElementById('boodschap_paswoord').style.display = 'block';
if (Number(resultaat.email) == 0)
document.getElementById('boodschap_email').style.display = 'block';
if (Number(resultaat.gsm) == 0)
document.getElementById('boodschap_gsm').style.display = 'block';
}
if ( (Number(resultaat.naam) == 1 ) && (Number(resultaat.paswoord) == 1 ) && (Number(resultaat.email) == 1 ) && (Number(resultaat.gsm) == 1 ) )
window.location = 'index.php?pagina=geregistreerd';
}
Wat merk je? Je moet http.responseText eerst door eval sturen.
Pagina 6
XML
werkend voorbeeld
http://www.manutechnica.com/tutorials/ajax/phphulp/xml/
Je kan ook Ajax gebruiken als xml lezer. Wat xml is en betekent, kan je wel opzoeken.
Het Ajax object leest de file xml.xml. Hier schreef ik als voorbeeld een recursieve functie die de volledige hiërarchische structuur van de xml file doorloopt en visueel toont.
Voorlopig heb ik het gevoel dat dit niet werkt met IE.
index.php
<?php
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;}
.verborgen{display: none;color: #ff0000; font-size: 13px;}
.xml_div {min-height: 17px; min-width: 60px; border: 1px solid #000000; margin: 3px 3px 3px 10px; clear: both;}
.xml_attr {padding: 2px; height: 17px; border: 1px solid #000000; margin: 1px 1px 5px 1px; float: left;}
.xml_waarde{color: #00ff00;}
.xml_naam{color: #0000ff; margin: 0 4px 0 0;}
.xml_text{color: #777777; margin: 4px }
.clear{clear: both;}
</style>
</head>
<body>
<h3>XML voorbeeld</h3>
<div>Voorbeeld van Ajax als XML lezer. Get gaat om <a href="xml.xml">Dit xml bestandje</a> dat ik vond bij w3c.</div>
<div id="boodschap_naam"></div>
<input value="klik" onclick="klik();" type="button">
</body>
</html>
';
?>
js.js
xml.xml
Ongetwijfeld kan je zelf nuttiger toepassingen vinden.
Je zou bv. een kalender rechtstreeks van de xml file kunnen lezen en functies schrijven die de kalender op het scherm toont.
http://www.manutechnica.com/tutorials/ajax/phphulp/xml/
Je kan ook Ajax gebruiken als xml lezer. Wat xml is en betekent, kan je wel opzoeken.
Het Ajax object leest de file xml.xml. Hier schreef ik als voorbeeld een recursieve functie die de volledige hiërarchische structuur van de xml file doorloopt en visueel toont.
Voorlopig heb ik het gevoel dat dit niet werkt met IE.
index.php
<?php
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;}
.verborgen{display: none;color: #ff0000; font-size: 13px;}
.xml_div {min-height: 17px; min-width: 60px; border: 1px solid #000000; margin: 3px 3px 3px 10px; clear: both;}
.xml_attr {padding: 2px; height: 17px; border: 1px solid #000000; margin: 1px 1px 5px 1px; float: left;}
.xml_waarde{color: #00ff00;}
.xml_naam{color: #0000ff; margin: 0 4px 0 0;}
.xml_text{color: #777777; margin: 4px }
.clear{clear: both;}
</style>
</head>
<body>
<h3>XML voorbeeld</h3>
<div>Voorbeeld van Ajax als XML lezer. Get gaat om <a href="xml.xml">Dit xml bestandje</a> dat ik vond bij w3c.</div>
<div id="boodschap_naam"></div>
<input value="klik" onclick="klik();" type="button">
</body>
</html>
';
?>
js.js
http = createHTTPHandler();
function klik()
{
url = 'xml.xml';
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function handleHttpResponse()
{
if(http.readyState < 4)
{
}
if(http.readyState == 4)
{
var result = '';
var resultaat = http.responseXML ;
result += getNodes(resultaat);
document.getElementById('boodschap_naam').innerHTML = result;
}
}
function getNodes(children)
{
var result = '';
for (var i = 0; i < children.childNodes.length; i++)
{
if (children.childNodes[i].localName == null)
{
//result += ' <div class="xml_leeg">NULL</div>';
continue;
}
result += ' <div class="xml_div">' + children.childNodes[i].localName;
if (children.childNodes[i].firstChild == children.childNodes[i].lastChild)
result += ' <div class="xml_text">' + children.childNodes[i].textContent +'</div>';
//result += ' <div class="xml_text">' + children.childNodes[i].getNodeValue() +'</div>';
result += getAttr(children.childNodes[i]);
result += getNodes(children.childNodes[i]);
result += "</div> ";
}
return result;
}
function getAttr(node)
{
var result = '';
for (var i = 0; i < node.attributes.length; i++)
{
if (node.attributes[i].localName == null)
continue;
result += ' <div class="xml_attr"><span class="xml_naam">' + node.attributes[i].localName + '</span> <span class="xml_waarde">' + node.attributes[i].value + '</span>';
result += "</div> ";
}
if (result !='')
result = '<div class="clear"></div>' + result +'<div class="clear"></div>';
return result;
}
xml.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<bookstore>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>Ongetwijfeld kan je zelf nuttiger toepassingen vinden.
Je zou bv. een kalender rechtstreeks van de xml file kunnen lezen en functies schrijven die de kalender op het scherm toont.
Pagina 7
UNICODE - Slot
UNICODE
Indien je je gegevens in unicode wil opslaan, hier is een voorbeeld van een oplossing.
Als voorbeeld maken we een shoutbox. Kwestie van een beetje vooruit te denken, gebruik ik PDO. Daar vind je op deze site trouwens een prachtige tutorial
In de databank zet je overal de charset op utf8 en de collatie op utf8_unicode_ci.
index.php
<?php
$content = '';
switch($_GET['pagina'])
{
default:
$content ='<h2>UNICODE</h2>
<h3>Shoutbox</h3>
<div id="boodschap"></div><div>
<input type="tekst" id="naam" /> naam <br/>
<textarea id="bericht"></textarea> <br/>
<input type="button" value="shout" onClick="shout();" />
</div>';
break;
case 'getShout':
$sql ="SELECT naam, bericht, tijd FROM shoutbox ORDER BY tijd";
$server = 'localhost';
$db = 'unicode';
$user = 'root';
$pass = '';
$con = new PDO('mysql:host='. $server .';dbname='. $db ,$user , $pass );
try
{
$stmt = $con->prepare($sql);
$stmt->execute();
$berichten ="";
while($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
$berichten .= '
<div class="bericht"><div class="hoofd">'. stripslashes($row['naam']) .' '. $row['tijd'] .'</div><div class="content">'. stripslashes( nl2br( $row['bericht'] ) ) .'</div></div>
';
}
echo $berichten ;
}
catch(PDOException $e)
{
}
break;
case 'shout':
if (! empty($_POST['naam']) && ! empty($_POST['bericht']) )
{
$_POST['bericht'] = utf8_encode ( $_POST['bericht'] );
$_POST['naam'] = utf8_encode ( $_POST['naam'] );
$sql ="INSERT INTO shoutbox (naam, bericht, tijd) VALUES (:naam, :bericht, NOW())";
$server = 'localhost';
$db = 'unicode';
$user = 'root';
$pass = '';
try
{
$con = new PDO('mysql:host='. $server .';dbname='. $db ,$user , $pass );
$stmt = $con->prepare($sql);
$stmt->bindParam(':naam', $_POST['naam']);
$stmt->bindParam(':bericht', $_POST['bericht']);
$stmt->execute();
}
catch(PDOException $e)
{
}
}
break;
}
if ($content != '')
{
header("Content-Type: text/html; charset=utf-8"); //
echo '<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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{border: 1px solid #333333; font-size: 13px; width: 200px ; height: 300px; overflow: auto;}
.bericht{border-bottom: 1px solid #aaaaaa; margin: 2px}
.hoofd{}
.content{}
</style>
</head>
<body onLoad="getShout();">
'. $content .'
</body>
</html>
';
}
?>
js.js
Let vooral op de lijnen:
header("Content-Type: text/html; charset=utf-8");
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
$_POST['bericht'] = utf8_encode ( $_POST['bericht'] );
$_POST['naam'] = utf8_encode ( $_POST['naam'] );
Ik concentreer me juist op het minimum. Uiteraard zou je normaal nog veiligheidsmaatregelen nemen.
Slot
Ik toonde hier een aantal voorbeelden. Ik ben soms wat zuinig met uitleg. Vaak vind ik dat werkende voorbeelden meer zeggen dan uitleg.
Bij elke techniek die ik toonde, kan je zelf opzoekingswerk doen. Ga zelf na wat de mogelijkheden zijn. Je zal ongetwijfeld zelf meer en meer mogelijkheden vinden.
Nog wat sluikreclame:
Gebruik Firefox met de firebug add on. Het toont je een hoop informatie over css, javascript en meer.
Ik leerde Ajax kennen met deze tutorial: http://www.phphulp.nl/php/tutorials/8/309/ . Misschien herken je er een aantal dingen.
Een aantal dingen staan daar wat grondiger in uitgelegd.
Ik probeer vooral een zo groot mogelijke waaier aan mogelijkheden te tonen.
Indien je je gegevens in unicode wil opslaan, hier is een voorbeeld van een oplossing.
Als voorbeeld maken we een shoutbox. Kwestie van een beetje vooruit te denken, gebruik ik PDO. Daar vind je op deze site trouwens een prachtige tutorial
In de databank zet je overal de charset op utf8 en de collatie op utf8_unicode_ci.
CREATE DATABASE unicode DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
CREATE TABLE unicode.shoutbox (
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
naam VARCHAR( 50 ) NOT NULL ,
bericht TEXT NOT NULL ,
tijd DATETIME NOT NULL
) ENGINE = INNODB CHARACTER SET utf8 COLLATE utf8_unicode_ci;
index.php
<?php
$content = '';
switch($_GET['pagina'])
{
default:
$content ='<h2>UNICODE</h2>
<h3>Shoutbox</h3>
<div id="boodschap"></div><div>
<input type="tekst" id="naam" /> naam <br/>
<textarea id="bericht"></textarea> <br/>
<input type="button" value="shout" onClick="shout();" />
</div>';
break;
case 'getShout':
$sql ="SELECT naam, bericht, tijd FROM shoutbox ORDER BY tijd";
$server = 'localhost';
$db = 'unicode';
$user = 'root';
$pass = '';
$con = new PDO('mysql:host='. $server .';dbname='. $db ,$user , $pass );
try
{
$stmt = $con->prepare($sql);
$stmt->execute();
$berichten ="";
while($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
$berichten .= '
<div class="bericht"><div class="hoofd">'. stripslashes($row['naam']) .' '. $row['tijd'] .'</div><div class="content">'. stripslashes( nl2br( $row['bericht'] ) ) .'</div></div>
';
}
echo $berichten ;
}
catch(PDOException $e)
{
}
break;
case 'shout':
if (! empty($_POST['naam']) && ! empty($_POST['bericht']) )
{
$_POST['bericht'] = utf8_encode ( $_POST['bericht'] );
$_POST['naam'] = utf8_encode ( $_POST['naam'] );
$sql ="INSERT INTO shoutbox (naam, bericht, tijd) VALUES (:naam, :bericht, NOW())";
$server = 'localhost';
$db = 'unicode';
$user = 'root';
$pass = '';
try
{
$con = new PDO('mysql:host='. $server .';dbname='. $db ,$user , $pass );
$stmt = $con->prepare($sql);
$stmt->bindParam(':naam', $_POST['naam']);
$stmt->bindParam(':bericht', $_POST['bericht']);
$stmt->execute();
}
catch(PDOException $e)
{
}
}
break;
}
if ($content != '')
{
header("Content-Type: text/html; charset=utf-8"); //
echo '<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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{border: 1px solid #333333; font-size: 13px; width: 200px ; height: 300px; overflow: auto;}
.bericht{border-bottom: 1px solid #aaaaaa; margin: 2px}
.hoofd{}
.content{}
</style>
</head>
<body onLoad="getShout();">
'. $content .'
</body>
</html>
';
}
?>
js.js
http = createHTTPHandler();
function shout()
{
var naam = document.getElementById('naam').value;
var bericht = document.getElementById('bericht').value;
document.getElementById('bericht').value = '';
var passData = 'naam=' + escape(naam) +"&bericht=" + escape(bericht) ;
var url = "index.php?pagina=shout";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = handleHttpResponseShout;
http.send( passData );
}
function handleHttpResponseShout()
{
if(http.readyState == 4)
{
var resultaat = http.responseText;
getShout();
}
}
function getShout()
{
var url = "index.php?pagina=getShout";
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponseGetShout;
http.send( null );
}
function handleHttpResponseGetShout()
{
if(http.readyState == 4)
{
var resultaat = http.responseText;
document.getElementById('boodschap').innerHTML = resultaat;
}
}
Let vooral op de lijnen:
header("Content-Type: text/html; charset=utf-8");
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
$_POST['bericht'] = utf8_encode ( $_POST['bericht'] );
$_POST['naam'] = utf8_encode ( $_POST['naam'] );
Ik concentreer me juist op het minimum. Uiteraard zou je normaal nog veiligheidsmaatregelen nemen.
Slot
Ik toonde hier een aantal voorbeelden. Ik ben soms wat zuinig met uitleg. Vaak vind ik dat werkende voorbeelden meer zeggen dan uitleg.
Bij elke techniek die ik toonde, kan je zelf opzoekingswerk doen. Ga zelf na wat de mogelijkheden zijn. Je zal ongetwijfeld zelf meer en meer mogelijkheden vinden.
Nog wat sluikreclame:
Gebruik Firefox met de firebug add on. Het toont je een hoop informatie over css, javascript en meer.
Ik leerde Ajax kennen met deze tutorial: http://www.phphulp.nl/php/tutorials/8/309/ . Misschien herken je er een aantal dingen.
Een aantal dingen staan daar wat grondiger in uitgelegd.
Ik probeer vooral een zo groot mogelijke waaier aan mogelijkheden te tonen.
Reacties
0