You would have to replace all commented out sections with your own code, but here is a generalized template for AJAX requests.
Inside of your HTML/PHP file, where the AJAX will take affect.
<html>
<body>
<input type="submit" onclick="generateCaptcha()">
<div id="captcha">Your captcha div</div>
</body>
</html>
Your Javascript code to call the AJAX request.
var xmlhttp;
function generateCaptcha() {
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null) {
alert ("Browser does not support HTTP Request");
return;
}
var url="yourfile.php"; // file to send the AJAX request too, see below
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged() {
if (xmlhttp.readyState==4) { // success.
// generate your new captcha
}
}
function GetXmlHttpObject() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject) {
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
Your PHP file inside of the AJAX call, named yourfile.php will process the data returned and will do whatever data manipulation is needed back to your div
element without a page refresh.
Take an overview of AJAX Tutorial before you jump into things.