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:


And now the PHP code:



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.

2 Comments on Simple Ajax using Prototype. Part 2

  1. tom says:

    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.

  2. Stuart says:

    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.