This is part of one of many such tutorials covering Ajax with Prototype.

If you do not want to get your hand to dirty with custom Ajax code, then using the extremely handy toolkit from prototype may be perfect.
Prototype is a very well written JavaScript framework/toolkit and come with an Ajax class to make things nice and easy.

In this simple example I’ll show you just how easy Ajax calls are. But you will need to have your own copy of prototype (its free!).

On a side note… if you like fancy JavaScript effects, you can extend prototype with another library called – I promise, with these you will have endless hours of fun!!

On with the example
I’ve attempted to simplify things as much as possible. In this tutorial we will type some text into a standard form field, hit a button and see the results appear below. In the background, our button click will trigger our JavaScript function, and pass the text through Ajax to a server-side PHP script. This PHP script will write our text back to an other JavaScript function on our page and print the text out on the screen.

First we include our prototype library:


Then we create two of our own functions, the first one is the main script which passes our text to the Server (PHP script in this case). The second function handles the response from the PHP script and prints the results to the browser.


In the getResponse function above, noticed the function call $(‘result’) – this is a feature of prototype which basically replaces ‘document.getElementByID(‘result’)’.

Yes, that is all we need in terms of JavaScript. I told you it was simple!!

Next we have the form:


Nothing fancy with the above. In order to call our JavaScript functions, we are using the ‘onClick’ event of the button.
We are passing in two values here; first the server-side script file ‘parse.php’ and the value we want to send.
We must pass in the paramater name and value (for example: ‘val=myvalue’, just like any querystring!), the parameter name in the case is ‘val’ and the value is the text in our text field. We refer to this value using another prototype function $F() which is really just ‘document.getElementById(‘myval’).value’.

On the server-side, our PHP script takes the value we passed $_GET['val'] and prints it back to us as ‘You entered: yourvalue’ (where ‘yourvalue’ is what your entered in the text field!).



This is a very simple example of using just one of prototypes Ajax features, there are many more to explorer which I will cover soon.

Have fun!

6 Comments on Simple Ajax using Prototype. Part 1

  1. beachbumdrums says:

    Please help…

    I applaud this tutorial. I am a php coder who needs a simple intro to ajax like this in order to build upon.

    However, I get an error message that I can not resolve. “object expected” on the input button line. How do I resolve this?

    Thanks in advance! I look forward to more tutorials.

  2. Stuart says:


    I’m not to sure why you get this error. If possible can you run it with FF2 with the Firebug extension? this will give you a better indication of where exactly the error is coming from.

    Also, I do not know if this makes any difference, but try changing the ` (funny single quotes which wordpress generates) to proper single quotes. Sometime wordpress changes the code a little.

    Finally you could take out the F() function, and place:
    < input type="button" value="GO" onClick="ajaxRequest('parse.php', 'val='+document.getElementById('myval').value)" >

    Good luck.

  3. banjojim says:

    I’m running your example but the return value is the following:

    if(isset($_GET[�val�])) { echo �You entered: �.$_GET[�val�]; }

    It seems like PHP isn’t parsing the script. I know PHP is working because php phpinfo() works fine. Any suggestions? I’m sure it’s a PHP problem but I’m not sure how to continue.

  4. lidador says:

    Seems this doesn’t work on FF. It looks like the ajax call is being kicked off by a popup window and it
    updates a row on the main page. The problem is that the popup page was refreshing before the ajax call was complete, somehow causing the response to be empty. To fix it I have tried to put the function call inside a setTimeout.

    function callback() {
    setTimeout(‘ajaxRequest()’ ,10);

    function delay_ajax() {
    ajaxRequest(‘parse.php’, ‘val=’+$F(‘myval’));

    and, of course:

    … but didn’t work also :( Any help?!

  5. Brij Bhushan says:

    Very good example to learn basic functionality of AJAX

  6. Brij Bhushan says:

    good example