A 10 Steps "Ajax with JSON" Tutorial (Straight to the Point).

Requirements:
Basic HTML and Javascript Knowledge. You should also need at least some "hello world" experience in a server-side language like php or java.

Download the prototype framework javascript file here: http://www.prototypejs.org/download (just aprox. 90 kb.)
Put it in an accesible place for your website. e.g. "httpdocs\mysite\prototype\prototype.js"
Create an html file. Let's call it test.html
Include the .js prototype file in the <head> section. Something like this:
```
<script type="text/javascript" src="prototype/prototype.js"></script>
```

Create two input text fields, a button and a div element in the <body> section like this:

<input type="text" name="multiplier" id="multiplier" size="2" maxlength="2" /> *
<input type="text" name="multiplicand" id="multiplicand" size="2" maxlength="2" /> 
<input type="button" name="button" id="button" onclick="test()" value="Submit" />
<div id="testdiv" style="border:1px #000000 solid; padding:10px; font-size:20px; height:50px;"></div>

Now create a server-side scripting language file, like: .php, .asp , .jsp, etc. In this case I'm gonna use php. The code is so simple that no matter which programming language you use, you're gonna be able to understand, so don't worry. I will name it: test.php.

The idea is to show you how it is possible to get a response from the server without refresing the page.

Enter the following code in test.php file:

<?php 

$data = array();
$data['validation'] = false;

/* 
  Just a simple validation. If we receive a non-numeric value, then let us return the array with 
  validation value set to false, which is the default. the json_encode function will convert the 
  php array into json notation, which in fact is plain text:
*/

if(!is_numeric($_POST['multiplier']) || !is_numeric($_POST['multiplicand'])){
  print json_encode($data);
  return;
}

# Yes! we have received numeric values, now we can safely make the mathematical operation:
$data['validation']=true;
$data['result'] = $_POST['multiplier'] * $_POST['multiplicand'];
print json_encode($data);

?>

Note: json_encode /json_decode functions were included in PHP 5.2. If you're using an older version, you need to download the PHP C extension which is the faster alternative or a php class which is easier. Read more and decide: http://gggeek.altervista.org/sw/article_20061113.html

Let's go back to the html file.

In the <head> section, create a javascript function. The code you need to add is this:

<script type="text/javascript">

function test() {
  /* 
    Instatiate the Ajax object. let me explain its parts: 
    
    'data.php'
    the target page which we want to get data from, or just make a request, like the 
    action attribute in html forms.
    
    method:'post'
    the request method, just like html forms. 
    
    parameters    
    The data that we want to send.

    onsuccess
    this function is executed when the Ajax object makes the remote call without problems.
    the 'transport' argument is an object that contains detailed info. about the response.
    Also contains the data returned from the taget page, which resides in the responseText property.
  */
  new Ajax.Request('test.php',
    {
      method:'post', 
      parameters: 
      {
        /* Get the values from html input fields and send the data as POST */
        multiplier:document.getElementById('multiplier').value,
        multiplicand:document.getElementById('multiplicand').value
      },
      onSuccess: function(transport){
        var response = transport.responseText.evalJSON();
        el = document.getElementById('testdiv');
        el.innerHTML="The result from php is: "+response.result;
      },
      onFailure: function(){ 
        alert('Something went wrong...');
      }
    }
  );
}

The final test.html page should look like this. Try it:

*
I like beer. So, if you found this tutorial useful, I will really appreciate a donation for a beer bottle. If you find the beer bottle expensive, don't worry, I also like water, so a .50 cents donation will be fine for a bottle of drinking water.

If you need futher help, you can contact me at: comments at ajaxcode dot net