ever since i started learning Jquery, i have been amazed of its capabilities and how much easy it makes to write scripts in JavaScript. another alternative to AJAX is JSON. what is the difference between AJAX and JSON. hmm, im not very technical to explain that, but i will tell you in plain simple english what i see in the differences (so far)

with AJAX you can return straight forward HTML or TEXT code: for example you can return something like these two example:

example 1: <h1>Hello There Title</h1>

example 2: Hello There Title

on example 1, i returned the HTML code, where in example two i just sent the text

but with json you send data structure as an object. I was very confused what an object was. To explain in simple terms what an object is, think of it as an array with elements and properties. also the the format is different from ajax, for example, this is what you can return using JSON:

example 1:
{"status":"success","Element1":"Hello There","Element2":"Wallpaperama Rocks"}
as you can see, the first thing you get is 'success' which tell the JavaScript that the request was successful, the data you send to the JavaScript is from a server side script like PHP, in the php file you can create an array to send as many array elements you want.

ok, now lets see all this in action. lets create a script with two files, one a HTML file and another PHP file: the HTML file is going to be used to retrieve data from the PHP file.

i am using windows to create this tutorial, so i m going to be using notepad to write these two scripts.

step 1. copy and paste the following code and save the file as: json.html

<html>
<head>
<title>Simple JSON Example Using PHP by Wallpaperama.com</title>		
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#myForm").submit(function(){					
			$.ajax({
				type: "POST",
				url: "post.php",
				data: $("#myForm").serialize(),
				dataType: "json",			
				success: function(msg){
					$("#Jason_Response").removeClass('error');
					$("#Jason_Response").addClass(msg.status);
					$("#Jason_Response").html(msg.YourName);
				},
				error: function(){
					$("#Jason_Response").removeClass('success');
					$("#Jason_Response").addClass('error');
					$("#Jason_Response").html("There was an error submitting the form. Please try again.");
				}
			});		
			//make sure the form doens't post
			return false;
		});
	});
</script>
<style type="text/css">		
.success{
	border: 2px solid #009400;
	background: #B3FFB3;
	color: #555;
	font-weight: bold;
}
.error{
	border: 2px solid #DE001A;
	background: #FFA8B3;
	color: #000;
	font-weight: bold;
}
</style>
</head>
<body>
<form id="myForm" name="myForm" method="post" action="" style="margin: 0 auto; width: 300px;">
    <div id="Jason_Response"></div>
    <table>
        <tr><td>Whats Your Name?:</td><td><input name="name" type="text" value=""></td></tr>
        <tr><td>&nbsp;</td><td><input type="submit" name="submitForm" value="Submit Form"></td></tr>
    </table>
</form>
</body>
</html>
now lets create the PHP file. copy and paste the following code and save the file as post.php

<?php
#### SIMPLE JASON EXAMPLE BY WALLPAPERAMA.COM  #############
//response array with status code and message
$response_array = array();
//validate the post form
//check the name field
if(empty($_POST['name'])){
	//set the response for ERROR
	$response_array['status'] = 'error';
	$response_array['message'] = 'Name is blank';
}  else {
	$response_array['YourName'] = 'Hi '.$_POST['name'].' - This message comes from post.php';
}
echo json_encode($response_array);
?>
now open the json.html file. enter you name and hit submit to see the script in action.

hope it helps