Nov

Simple Ajax using Prototype. Part 2

Ajax Updater – Update a DOM element ID from a Server Script

This example is probably the simplest example you will ever find.
We are going to use the prototype feature ‘ajax.Updater’ (see part one for more details on prototype).

ajax.Updater allows you to specify an element ID and script URL – and whatever the script URL prints will appear in your element ID. Simple as that.

The example below simply returns the Server time each time the button is clicked.

I’m not going to explain this bit by bit as it is just so easy to grasp.

Remember, you will need the prototype library in order to use this!

Here is the HTML/JavaScript code:

 
<html>
<head>
<script src="dist/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function ajaxUpdater(id,url) {
 new Ajax.Updater(id,url,{asynchronous:true});
}
</script>

</head>
<body>
<div id="updateme"></div>
<input type="button" value="Update" onClick="ajaxUpdater('updateme','updateme.php')">
</body>
</html>

And now the PHP code:

updateme.php

 
  echo "Server time is: ".date("Y-m-d H:i:s");

The above example has no real use, but in the real world there are many things which can be done. For example I recently wrote an automatic session log-out script, which automatically kills the session after a given period and send the user back to the login page (very handy for secure sites). I’ll post that script up soon.

Posted by Stuart ajax-basics, ajax-with-php Subscribe to RSS feed

2 Comments on Simple Ajax using Prototype. Part 2

tom says:

December 4, 2006 at 11:24 am

Sorry, but I don’t really get the difference between ajaxUpdater and ajaxRequest. What can be done with ajaxUpdater which can’t be done with ajaxRequest? I’ve just used your ajaxRequest tutorial to create my first bit of ajax, thanks a lot for the help, very very handy. I built the ajax part in less than 20 min… without that tutorial, it would have probably taken me several hours.
Stuart says:

December 4, 2006 at 10:47 pm

From what I understand, ajax.Updater is used to request updated info from a Server Script, i.e. you do not send a request, you only receive a reply. But ajax.Request is used to send values to a Server Script and also receives a reply (if required). It really depends on what you want to do.

Simple Ajax using Prototype. Part 2

2 Comments on Simple Ajax using Prototype. Part 2

Archive

Blogroll

Meta

Recent Posts

Tags