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.
The example in the link below shows how this is achieved. We only need one AjaxCall function and one file which handles the ajax called functions.

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="`Please" ;
xmlhttp.open("GET","ajax_functionx.php?q="+str,true);
xmlhttp.send();
}

The ajax_functionx.php file:

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




[ -- link to Execute the Ajax Test Scripts Part 4 ]



Related Stories