Implementing an Ajax Call
There are three parts to any Ajax call implementation in SCP.- The form page
- The JavaScript file
- The php file called by ajax
The following examples are taken from register.php and its supporting files.
The form page.
<span style="float:left;">Username:</span>
<span id="showajax" style="display:none;float:right;">
<img src="/images/ajax-pump.gif" alt="" style="float:left" /></span>
<input
type="text"
name="username"
maxlength="50"
size="40"
onclick="clearnameresults();"
onblur="clearnameresults(); checkuser(this.value);"
/>
<span id="ajaxresult"></span>
<script type="text/javascript" src="include/ajax.js"></script>
<script type="text/javascript" src="include/checkuser.js"></script>
<script type="text/javascript">
function clearnameresults() {
clearspan('ajaxresult');
}
</script>
<span id="showajax" style="display:none;float:right;">
<img src="/images/ajax-pump.gif" alt="" style="float:left" /></span>
<input
type="text"
name="username"
maxlength="50"
size="40"
onclick="clearnameresults();"
onblur="clearnameresults(); checkuser(this.value);"
/>
<span id="ajaxresult"></span>
<script type="text/javascript" src="include/ajax.js"></script>
<script type="text/javascript" src="include/checkuser.js"></script>
<script type="text/javascript">
function clearnameresults() {
clearspan('ajaxresult');
}
</script>
The JavaScript file
var in_param = '';
var in_param2 = '';
function checkuser(username) {
if(document.frmregister.username.value != '') {
document.getElementById('showajax').style.display = 'block';
var data = MakeNewAJAXCall("checkuser.php?u="+username, SimpleCallback, 'GET', ComplexCallback, in_param, in_param2, in_timeout_callback, 7);
}
}
function SimpleCallback(in_text, in_param, in_param2){
if(in_text != "") {
if(in_text == "OK") {
//Ok this username is safe so
document.getElementById('ajaxresult').innerHTML = 'Username available';
document.getElementById('ajaxresult').style.color = 'green';
} else {
//... do something else...
}
document.getElementById('showajax').style.display = 'none';
}
}
function clearspan(ajaxspan) {
document.getElementById(ajaxspan).innerHTML = '';
}
function choosealternative(names) {
var uname = document.frmregister.username.value;
var ret = '<table>';
var i=0; var x = 0;
var n = '';
var randomnumber = 0;
for(i=0;i<3;i++) {
randomnumber=Math.floor(Math.random()*9999)
n = uname + randomnumber;
ret += '<tr><td><input onclick="document.frmregister.username.value = this.value;document.frmregister.username.focus();" type="radio" name="altname" value="' + n + '" /></td><td>' + n + '</td></tr>';
}
ret += '</table>';
return ret;
}
function ComplexCallback(in_stage, in_text, in_param, in_param2, in_index) { return true;}
function in_timeout_callback() {alert('timed out, please check your Internet connection');}
var in_param2 = '';
function checkuser(username) {
if(document.frmregister.username.value != '') {
document.getElementById('showajax').style.display = 'block';
var data = MakeNewAJAXCall("checkuser.php?u="+username, SimpleCallback, 'GET', ComplexCallback, in_param, in_param2, in_timeout_callback, 7);
}
}
function SimpleCallback(in_text, in_param, in_param2){
if(in_text != "") {
if(in_text == "OK") {
//Ok this username is safe so
document.getElementById('ajaxresult').innerHTML = 'Username available';
document.getElementById('ajaxresult').style.color = 'green';
} else {
//... do something else...
}
document.getElementById('showajax').style.display = 'none';
}
}
function clearspan(ajaxspan) {
document.getElementById(ajaxspan).innerHTML = '';
}
function choosealternative(names) {
var uname = document.frmregister.username.value;
var ret = '<table>';
var i=0; var x = 0;
var n = '';
var randomnumber = 0;
for(i=0;i<3;i++) {
randomnumber=Math.floor(Math.random()*9999)
n = uname + randomnumber;
ret += '<tr><td><input onclick="document.frmregister.username.value = this.value;document.frmregister.username.focus();" type="radio" name="altname" value="' + n + '" /></td><td>' + n + '</td></tr>';
}
ret += '</table>';
return ret;
}
function ComplexCallback(in_stage, in_text, in_param, in_param2, in_index) { return true;}
function in_timeout_callback() {alert('timed out, please check your Internet connection');}
The php file called by ajax
<?php
/*******************************************************************
* Ajax calls to check username is available
*******************************************************************/
require_once('include/common.php');
if(!isset($_GET['u'])) die('No params sent');
echo is_available(htmlspecialchars(strtolower($_GET['u']))) ? "OK" : "TAKEN";
function is_available($username) {
$sql = "SELECT id FROM users WHERE LCASE(username)='$username'";
$result = mysql_query($sql) or errorlog( __LINE__."\n\n".mysql_error()."\n\n$sql");
if($result && mysql_num_rows($result)>0) {
return false;
} else {
return true;
}
}
?>
/*******************************************************************
* Ajax calls to check username is available
*******************************************************************/
require_once('include/common.php');
if(!isset($_GET['u'])) die('No params sent');
echo is_available(htmlspecialchars(strtolower($_GET['u']))) ? "OK" : "TAKEN";
function is_available($username) {
$sql = "SELECT id FROM users WHERE LCASE(username)='$username'";
$result = mysql_query($sql) or errorlog( __LINE__."\n\n".mysql_error()."\n\n$sql");
if($result && mysql_num_rows($result)>0) {
return false;
} else {
return true;
}
}
?>
Programmer Notes | Return to What's up?
