Implementing an Ajax Call

There are three parts to any Ajax call implementation in SCP.
  1. The form page
  2. The JavaScript file
  3. 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>


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');}


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;
    }
}

?>



Programmer Notes | Return to What's up?