Techie Zone

Prototype is the most widely used framework for Ajax Operation. The main advantage of using Prototype Ajax Framework is its simplicity to use, automatically implements cross-browser and it offers bundle of utility function that can be used in your JavaScript code. This article will list down various ways by which you can make Ajax call using Prototype Framework. This tutorial does not go into detailed implementation but shows you how we can do basic Ajax Call using Prototype Ajax Framework.

In Prototype there are three ways you can make Ajax calls.
1) Ajax.Request
2) Ajax.PeriodicalUpdater
3) Ajax.Updater

Before we move into learning of individual Ajax call we also need to understand the various events and parameters getting used while making Ajax Call.

Various Parameters Of the Object Passed to Ajax.Request:
method
This can be HTTP GET or HTTP POST. By default method defined is POST.

parameters
This holds the key-value pair of the data that we are going to pass to the request page. This is the same data that we pass through the query string while calling remote URL.

frequency
Here you specify the period in seconds wherein Ajax call will be made.

decay
This is used to increase the interval time for Ajax call if there is no change in response. The amount of interval getting increased is the frequency*decay. This ensure that we do not make unecessary Ajax call for the same response getting from the server.

Prototype Ajax Events:
onCreate:
This event get called whenever an new ajax request call is made. This is useful when we want to show an loading image indicating ajax call.

onSuccess:
This event get called whenever the request is complete and the status code returned is in 2xx series.

onFailure:
This event get called whenever the request is complete and the status code returned is not in 2xx series.

onComplete:
This event get called whenever the request is complete and the connection request life cycle is complete. This event gets called after onSuccess and onFailure event. In this event we normally hide the loading image.

Reading Request Response:
With prototype framework we can read either String, XML and JSON content. String content can be read by calling responseText method, XML content can be read by calling responseXML and JSON content can be read by calling responseJSON method.

Ajax.Request:
Here we make an single ajax request to an server page and after receiving the response from server the connection is terminated. The simple implement for the same is

	var url = "http://www.hiteshagrawal.com/uploads/ajax_time.php";
	var ajaxObjhttp = new Ajax.Request(url, {
		method: 'POST',
		parameters: {operation: "readRecord"},
                onCreate: function(transport) {
        	      alert("Creating New Ajax Call");
                },
                onSuccess: function(transport) {
                      var serverResponse = transport.responseText;
                },
                onFailure : function(response) {
                      alert("Some error occured while making call to remote server");
                }
        });

Here we make an object of Ajax.Request. This objects accepts 2 parameter the first parameter is the request page url and another object which holds the essential information that we will be sending/receiving from the server page. On successful receiving the data from the requested page we read the data by calling responseText method.

	var url = "http://www.hiteshagrawal.com/uploads/ajax_time.php";
	var ajaxObjhttp = new Ajax.PeriodicalUpdater("textobj", url, {
		method: 'POST',
		frequency: 3,
                decay: 2
         });

Here we make an object of Ajax.PeriodicalUpdaterRequest. This objects accepts 3 parameter the first paramter is the name of the DIV/SPAN control where the data will get updated, second parameter holds the request URL and third parameter holds an object which has the essential information that we will be sending/receiving from the server page.

Ajax.Updater:
The only difference between Ajax.Request and Ajax.Updater is that in Ajax.Updater we specify the DIV/SPAN control name so now the data returned from server will get automatically updated within the DIV/SPAN control when the operation completes.

	var url = "http://www.hiteshagrawal.com/uploads/ajax_time.php";
	var ajaxObjhttp = new Ajax.Updater("textobj", url, {
		parameters: { operation: "readRecord" }
        });

Here we make an object of Ajax.Updater. This objects accepts 3 parameter the first parameter is the name of the DIV/SPAN where the data will get updated, second parameter holds the request URL and third parameter holds an object which has the essential information that we will be sending/receiving from the server page.

Example:
In this example i am covering all the 3 Ajax call implementation.

HTML Code:

	<html>
	<head>
		<title>Prototype Ajax Call</title>
		<script type="text/javascript" src="js/prototype.js"></script>
		<script type="text/javascript">
			function ajaxRequest() {
				var url = "/uploads/ajax_time.php";
				var ajaxObjhttp = new Ajax.Request(url, {
					method: 'POST',
					parameters: {operation: "readRecord"},
			                onCreate: function(transport) {
			        	       alert("Creating New Ajax Call");
			                },
			                onSuccess: function(transport) {
			        		var textBoxObj = document.getElementById("ajaxRequestCall");
			                        textBoxObj.innerHTML = transport.responseText;
			                },
			                onFailure : function(response) {
			                       alert("Some error occured while making call to remote server");
			               }
			        });  
			}
 
    		        function ajaxUpdater() {
				var url = "/uploads/ajax_time.php";
				var textBoxObj = "ajaxUpdaterCall";
				var ajaxObjhttp = new Ajax.Updater(textBoxObj, url, {
					method: 'POST'
	    		        });  
			 }
 
			function ajaxPeriodicUpdater() {
				var url = "/uploads/ajax_time.php";
				var textBoxObj = "ajaxPeriodicUpdaterCall";
				var ajaxObjhttp = new Ajax.PeriodicalUpdater(textBoxObj, url, {
					method: 'POST',
					frequency: 3,
	        		        decay: 2
	    		        });   	
			}
		</script>
	</head>
            <body>
		Ajax Request: <span id="ajaxRequestCall" name="ajaxRequestCall" style="border: 1px solid #CCCCCC">&nbsp;&nbsp;</span>&nbsp;<input type="button" onClick="ajaxRequest();" value="Ajax Request"/><br /><br />		
	Ajax Updater: <span id="ajaxUpdaterCall" name="ajaxUpdaterCall" style="border: 1px solid #CCCCCC">&nbsp;&nbsp;</span>&nbsp;<input type="button" onClick="ajaxUpdater();" value="Ajax Updater"/><br /><br />	
	Ajax Periodic Updater: <span id="ajaxPeriodicUpdaterCall" name="ajaxPeriodicUpdaterCall" style="border: 1px solid #CCCCCC">&nbsp;&nbsp;</span>&nbsp;<input type="button" onClick="ajaxPeriodicUpdater();" value="Ajax Periodic Updater"/><br />	
	</body>
</html>

SERVER SIDE CODE (PHP):

< ?
	echo date("H:i:s");
?>

SERVER SIDE CODE (JSP):

< %@page import="java.util.Date"%>
< %
	Date currentDate = new Date();
	long currentTime = currentDate.getTime();
	out.println(currentTime);
%>

As per user working environment of the user whether PHP or JAVA i have written the server side code for both the language. The user only has to change the url in the javascript code.

Custom Search

Popular Articles:

• AJAX Demo
• How AJAX Works
• Common AJAX Programming Mistakes
• Ajax Tutorials – What is AJAX
• FAQ on AJAX Technology
• Checking Session TimeOut during Ajax Call
• How to make sequential ajax call
• Ajax Programming with JSP and Servlets
• Ajax Programming
• HTTP Form POST Request using AJAX and Servlet