Blog | Tutorial

What is AJAX ? a simple tutorial - Part 3

So far we have seen a simple event occurring on a web page, an animated gif indicating some action is being taken and then some response returned and displayed on your page.

Our next step will be to type in some data in an input box and respond to the data on each key click. In this example we wish you to type in a town name and validate it against ones in our list.

First step then is to add an input text box:

< input type="text" name="town input" >


However, this option only expects you to enter data which will then be passed into the system when you press the submit button.

We need to add an event handler everytime a key is pressed. To achieve this we add an event handler for `onkeyup`
onkeyup="AjaCall3 (this.value, `town_response_id`); return false; " ") ;


Unfortunately this part is getting quite complicated due to the way the functions are called. In the next tutorial part 4 I will show how this can all be simplified, but for now lets go through the steps.


$response = "" ;

$LIST_OF_TOWNS = array ("Aberdeen", "Aberfeldy", "Abergeldie", "Brechin",
"Dundee", "Dunfermline", "Edinburgh", "Fort William", "Glasgow" ) ;

// lets get the value in for `town`
$town = $_GET["town"] ;
// 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
$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=\"AjaxCall4(`$TOWN_NAME`, `town_response_script_id`);\" " ;
$response .= "< b \"$link\">-- $TOWN_NAME< /b>" ;
$found = true ;
}
}
if ($found == false)
$response .= "< b style=\"color:red;\">[ town [$town] not in our list ]< /b>" ;
}
echo $response ;

When you type in a Town Name then AjaxCall3 will call ajax_function3.php. This will validate the key presses and return a list of towns (if any in the list). This list will produce dynamic links calling AjaxCall4. The purpose of this set of fuctions is to select the town name you have clicked on and place it back into the Town Name Input Box.

Once you are complete you can press the Click Here button. This will call AjaxCall5 and ajax_functions5 to provide some fully validated output.

Again all this is acheived without reloading the complete page. The Ajax calls update a section on the page.

This is quite complex the way the function calls are setup. So in tutorial Part 4 I am going to replace the separate files by adding a CMD name function to each of the `ajax` calls. This means there will only be one AjaxCall event and also one file containing the ajax functions.


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



Related Stories