Sample of Ajax Operation using Ajax.Updater Method on Prototype JS

January 29, 2010, 10:50

Through this article we will cover simple example of doing Ajax operation using Ajax.Updater method on Prototype JS. Prototype JS is one of popular Javascript library in the world. First you have to download Prototype JS from http://www.prototypejs.org or http://www.prototypejs.org/download. By the time of this writing, Prototype JS version is 1.6.1. After you download it, rename it to prototype.js. Put that file on your web root folder and you can start to include it on your HTML document like below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="prototype.js"></script>
  </head>
  <body>
    .... your body content here ....
  </body>
</html>

Now we will create simple example using Prototype JS. We will create simple web page that contains a button and if people click that button, it will call script on the server using Ajax.Updater and show the result on the specified region on the web page. Let’s look on the HTML below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="prototype.js"></script>
  </head>
  <body>
    Welcome to Sony AK Knowledge Center!<br/><br/>
    Now we will show you the simple example of
    using AJAX with prototype.js<br/><br/>
    <input type="button" id="myButton" name="myButton" value="Press This!"
           onclick="javascript:new Ajax.Updater('updateMe', 'p_update_me.php', { method:'post' });"/>
    <div id="updateMe">This is the original text!</div>
  </body>
</html>

Save it as simple_ajax_updater.php and the picture is like below.

Sample of HTML page

Look on the code above, there is <input> tag that create the button. On the button there is onclick event that contains this code.

 new Ajax.Updater('updateMe', 'p_update_me.php', { method:'post' });

What is Ajax.Updater doing? Here is the explanation.

First parameter contains ‘updateMe’, it means Prototype JS will put all returned results from the server to HTML element that have id ‘updateMe’. There is tag <div> which the id is ‘updateMe’.

Second parameter contains ‘p_update_me.php’, it means we will call that file on the server and do the Ajax operation.

Third parameter contains { method:’post’ }, it describe the HTTP method that will be used on this Ajax operation. In this example we use POST method. You also can use GET method. All depends on your requirements.

Now you have to create the sample code for p_update_me.php. See on below code.

1
2
3

<?php
  echo "This is my response string!";
?>

Now you can run the simple_ajax_updater.php from your local machine and try to press the button. If everything goes right, then the text ‘This is the original text!’ will be changed to ‘This is my response string!’. All is done through Ajax operation, so your browser doesn’t need to reload all of your page, just call the p_update_me.php and return the result to the <div> element that has id ‘updateMe’.

That’s it. You just learn how to to simple Ajax operation using Ajax.Updater method on Prototype JS. Prototype JS also have other method called Ajax.Request. We will cover it on another post.