Ajax Example
Screen shot
HTML Page
<html>
<head>
<title>How to add to value throught Ajax</title>
<script language=\"javascript\" src=\"ajax.js\">
</script>
</head>
<body>
<div name=\"txt\" id=\"txt\"></div>
<form action=\"javascript:add(document.getElementById(\'frm\'));\" name=\"frm\" id=\"frm\">
<table>
<tr>
<td>Enter First Number</td>
<td><input id=\"num1\" type=\"text\"/></td>
</tr>
<tr>
<td>Enter Second Number</td>
<td><input id=\"num2\" type=\"text\"/></td>
</tr>
<tr>
<td colspan=\"2\">
<input type=\"submit\" name=\"button\" value=\"Show Text\">
</td>
</tr>
</table>
</form>
</body>
</html>

Javascript Page (save as ajax.js)
<html>
<body>
<script type=\"text/javascript\" language=\"javascript\">
function add(obj)
{

var XMLHttpRequestObject=false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject(\"Microsoft.XMLHTTP\");
}

var str1= \"num1=\" + document.getElementById(\"num1\").value;
var str2=\"&num2=\" +document.getElementById(\"num2\").value;

XMLHttpRequestObject.onreadystatechange = show;
XMLHttpRequestObject.open(\'POST\', \'value.php\', true);
XMLHttpRequestObject.setRequestHeader(\"Content-type\", \"application/x-www-form-urlencoded\");

XMLHttpRequestObject.send(str1+str2);


function show()
{
if (XMLHttpRequestObject.readyState == 4)
{
if (XMLHttpRequestObject.status == 200)
{
result = XMLHttpRequestObject.responseText;
document.getElementById(\'txt\').innerHTML = result;
}
}
}

}
</script>
</body>
</html>

PHP Page(save as value .php)
<?php
$num1=$_POST[\'num1\'];
$num2=$_POST[\'num2\'];
$num3=$num1+$num2;
echo $num3;
?>

You can download source code here