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