AJAX, Ashyncroneous Javascript and XML is getting popular day by day and almost every web sites are using Ajax in their application. The main feature of ajax is to retrieve data from the server end to the client end without any post back to the server. It increases the performance of the site and decrease its bandwidth a lot. and save time while getting information from the server.
In this example i am using AJAX to dynamically changing the images while clicking on the zoom in and zoom out button. Its a simple Mapping application. so i am using SAJAX utility in this example. Its a free PHP Utility for AJAX handling in your application.
You can find this utility file on the internet very easily. Download this file and place it in your application root directory.
<?php
'// this line is require which actually include sajax.php in your application.
require("Sajax.php");
'// The next step is to create a function that you want to access while clicking on zoom in and zoom out button.
'// This method use two parameter, one for type which specify which type of image to call, e.g car,bus,etc.
function get_table ($type,$value)
{
$output = "<img src=\"images/map_images/zoom_".$type."_map_".$value.".jpg\" alt=\"\" title=\"\" />";
return $output;
}
'// Ajax initialization will start from here.
$sajax_request_type = "GET";
sajax_init();
'// We will make reference of function that is created above to sajax so that to configure ajax for it.
sajax_export("get_table");
sajax_handle_client_request();
?>
The next step is to configure Javascript for accessing get_table function using ajax.
<script language="JavaScript">
'// This code creates javascript function for handling ajax.
<? sajax_show_javascript(); ?>
'// to_window function get output and display itin find_us_image div.
function to_window(output)
{
document.getElementById("find_us_image").innerHTML = output;
}
'// This function is used for zoom out operation.
function zoom_image()
{
var type = document.getElementById("tp").value;
var ct =eval(document.getElementById("counter").value);
ct = ct + 1;
if ( ct > 4 )
ct = 4;
document.getElementById("counter").value = ct;
'// from here we access get_table function that is used above there are three parameter of it, type ,value, output.
x_get_table(type,ct,to_window);
}
'// This function is used for zoom in operation
function zoom_in_image()
{
var type = document.getElementById("tp").value;
var ct =eval(document.getElementById("counter").value);
ct = ct - 1;
if ( ct < 1 )
ct = 1;
document.getElementById("counter").value = ct;
'// from here we access get_table function that is used above
x_get_table(type,ct,to_window);
}
</script>
Below is normal html code
<body><div id="zoom_div">
<img src="images/button-overover-03.jpg" onclick="javascript:zoom_image();" alt="" title="" width="56" height="85" />
<img src="images/button-overover-04.jpg" onclick="javascript:zoom_in_image();" alt="" title="" width="51" height="86" />
</div>
<div id="find_us_image">
'// Here sajax will display image when clicking on zoom in or zoom out button
</div>
'// Below is to hidden variables, one stores zoom counter and direction and another store type
<input type="hidden" id="counter" name="counter" value="1" />
<input type="hidden" id="tp" name="tp" value="<?php if ($_GET['type']=='') echo "normal"; else echo $_GET['type']; ?>" />
</body>
This is complete example , how you can use sajax to easily integrate ajax functionality into your application.