Blog | Tutorial
What is AJAX ? a simple tutorial - Part 4
Having reviewed the previous steps to build up a simple set of Ajax calls it became apparent that things were getting rather complex, with the complexity multiplying with further actionsthat needed to be added.
To overcome this the commands can be combined into one ajax call with the command and data passed into it.
At first glance this may look complicated but in reality it is nice and simple. Further commands can be added with ease allowing further processing and other pages to handle independent functions.the AjaxCall.js file:
function AjaxCall (str, name )
{
if (str.length==0)
{
document.getElementById(name).innerHTML="";
document.getElementById(name).style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
if (xmlhttp.status==200)
{
document.getElementById(name).innerHTML=xmlhttp.responseText;
document.getElementById(name).style.border="0px";
}
}
}
document.getElementById(name).innerHTML="
" ;
xmlhttp.open("GET","ajax_functionx.php?q="+str,true);
xmlhttp.send();
}
" ;
xmlhttp.open("GET","ajax_functionx.php?q="+str,true);
xmlhttp.send();
}
function _INPUT ($name, $len )
{
$tmp = @$_GET[$name] ;
if ($tmp =="")
$tmp = @$_POST[$name] ;
$tmp = str_replace(";", ".", $tmp); // remove any potential ; for sql statements/commands
return substr(strip_tags($tmp), 0, $len ) ;
} // end function _INPUT
sleep(1) ; // just delay a bit to show activity
// lets always expect a command string
$cmd = _INPUT ("cmd", 20 ) ; // max length 20 characters
$q = _INPUT ("q", 32 ) ; // max length 32 characters
$response = "" ; // set up response to be returned at the bottom
switch ($cmd)
{
// --------------------------------------------------------
// a key has been pressed
//
case "cmd_key_pressed" ;
$LIST_OF_TOWNS = array ("Aberdeen", "Aberfeldy", "Abergeldie", "Brechin", "Dundee", "Dunfermline", "Edinburgh", "Fort William", "Glasgow" ) ;
// lets get the value in for `town`
$town = $q ;
// is the value enterred greater than 2 characters, otherwise it can be ignored until we get enough data in
if (strlen($town) > 2)
{
// lets strip it down to 20 characters or less to stop hackers injecting long strings of data ;o))
$town = strtolower( substr($town, 0, 20 ) ) ;
// lets return something
$response .= "
" ; $found = false ; foreach ( $LIST_OF_TOWNS as $TOWN_NAME ) { $LEN = strlen($town) ; if ( substr( strtolower($TOWN_NAME), 0, $LEN ) == $town ) { // lets build a link $link = "==\"this.style.cursor=`pointer`; this.style.cursor=`hand`; \" " ; $link .= "onclick=\"AjaxCall(`$TOWN_NAME` + `&cmd=cmd_select_town`, `town_response_script_id`);\" " ; $response .= "< b \"$link\">-- $TOWN_NAME
" ; $found = true ; } } if ($found == false) $response .= "< b style=\"color:red;\">[ town [$town] not in our list ]" ; } break ; // -------------------------------------------------------- // place the town name into the Input Box // case "cmd_select_town" ; $response .= "< input type=\"text\" name=\"town\" value=\"$q\" onkeyup=\"AjaxCall (this.value+`&cmd=cmd_key_pressed`, `town_response_id`); return false; \" >
< span id=\"town_response_id\">" ; break ; // -------------------------------------------------------- // return a response to a button click case "cmd_button_press" ; $response .= "Button pressed at : ".date ("D, jS M Y H:m:s" ) ; $town = _INPUT ("town", 32 ) ; if ($town =="") $response .= " [ town empty ]" ; else $response .= " [ town : $town ]" ; break ; // -------------------------------------------------------- // no command or not in list case "": default: $response .= "** Error no command or incorrectly formatted" ; break ; } echo $response ; // echo the response back to the calling page. // thats it done, now drop out
" ; $found = false ; foreach ( $LIST_OF_TOWNS as $TOWN_NAME ) { $LEN = strlen($town) ; if ( substr( strtolower($TOWN_NAME), 0, $LEN ) == $town ) { // lets build a link $link = "==\"this.style.cursor=`pointer`; this.style.cursor=`hand`; \" " ; $link .= "onclick=\"AjaxCall(`$TOWN_NAME` + `&cmd=cmd_select_town`, `town_response_script_id`);\" " ; $response .= "< b \"$link\">-- $TOWN_NAME
" ; $found = true ; } } if ($found == false) $response .= "< b style=\"color:red;\">[ town [$town] not in our list ]" ; } break ; // -------------------------------------------------------- // place the town name into the Input Box // case "cmd_select_town" ; $response .= "< input type=\"text\" name=\"town\" value=\"$q\" onkeyup=\"AjaxCall (this.value+`&cmd=cmd_key_pressed`, `town_response_id`); return false; \" >
< span id=\"town_response_id\">" ; break ; // -------------------------------------------------------- // return a response to a button click case "cmd_button_press" ; $response .= "Button pressed at : ".date ("D, jS M Y H:m:s" ) ; $town = _INPUT ("town", 32 ) ; if ($town =="") $response .= " [ town empty ]" ; else $response .= " [ town : $town ]" ; break ; // -------------------------------------------------------- // no command or not in list case "": default: $response .= "** Error no command or incorrectly formatted" ; break ; } echo $response ; // echo the response back to the calling page. // thats it done, now drop out