jQuery
In deze reeks over AJAX gaan we gebruik maken van jQuery. Dit is een framework waarmee we veel makkelijker kunnen werken met JavaScript, zonder dat we ons veel zorgen hoeven te maken over verschillende browser.
Inleiding
jQuery is te benaderen in JavaScript met het dollarteken. Na dit dollartekent komt eventueel tussen haakjes het element wat we willen aanroepen, hierbij gebruiken we CSS selectors. De onderstaande code selecteert bijvoorbeeld alle elementen met als klasse "klasse".
[javascript]$('.klasse');[/javascript]
Vervolgens zijn er bewerkingen hierop uit te voeren. Een veelgebruikte bewerking is om de HTML binnen het element te veranderen.
[javascript]$('#status').html('Pagina geladen'); //Het element met het id 'status' krijgt als HTML Pagina geladen. //Waarschijnlijk is het element een p, div of span[/javascript]
AJAX
Dan nu het gebruik van jQuery voor AJAX. We kunnen een request doen met de functie get.
Stel we hebben het bestand ajax.php.
<?php
echo 'Het is nu ' . date('H:i');
?>
En het bestand index.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
var html = $.get('ajax.php');
alert(html);
</script>
</body>
</html>
Als je nu naar index.html gaat, zal er een alertbox komen met "Het is nu xx:xx".
Code voorbeelden
Simpel jQuery voorbeeld
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<p id="x">Hallo</p><br />
<span onclick="$('#x').html('Hallo wereld');">Klik hier</span>
</body>
</html>
Simpel voorbeeld met AJAX
ajax.php
<?php
echo 'Het is nu ' . date('H:i');
?>index.html<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<p id="x">Hallo</p><br />
<input type="button" onclick="$('#x').html($.get('time.php'));" value="Klik hier voor de tijd" />
</body>
</html>
Controleren of een gebruikersnaam al bestaat
ajax.php
<?php
include('config.inc.php');
$sSQL = "SELECT COUNT(*) FROM `tblUsers` WHERE `user` = '" . mysql_real_escape_string($_GET['sUser']) . "'";
$rsSQL = mysql_query($sSQL);
$iCount = mysql_result($rsSQL, 0);
if($iCount == 0)
echo 'Y';
else
echo 'N';
?>
index.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function check(sUser)
{
if($.get('ajax.php?sUser=' + $(this).val()) == 'Y') {
$('#check').html('Gebruikersnaam is vrij.');
$('input').attr('disabled', '');
}
else {
$('#check').html('Gebruikersnaam is al in gebruik.');
$('input').attr('disabled', 'disabled'); }"
}
}
</script>
</head>
<body>
<form action="register.php" method="post">
<label for="sUsername">Gebruikersnaam:</label> <input type="text" id="sUsername" name="sUsername" onblur="check($(this).val()" /><br />
<span id="check"></span>
<input type="submit" value="Aanmelden" />
</form>
</body>
</html>
Andere delen
- Wat is AJAX?
- Wat is XML
- jQuery