Ajax Multiplication Program
Ajax is a web
development technique where you can send the request to server without
refreshing the page. In this section, you will learn how to multiply two values and
display the result on the page. This program
calls the method 'callmultiply()' for the multiplying the values entered
by user.
The multiplication operation is performed in the 'multiply.php' page at
serverside. The 'callmultiply()' sends the numbers as url string by calling the 'postRequest()' method. The 'postRequest()' method
generates Ajax call to serverside script 'multiply.php'. And finally 'updatepage()'
method updates the multiplication result on the html page.
Example of Ajax multiplication program:
<html>
<head>
<title>Ajax Multiply Example</title>
<script language="Javascript">
function postRequest(strURL){
var xmlHttp;
if(window.XMLHttpRequest){ // For Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){ // For Internet Explorer
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', strURL, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4){
updatepage(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}
function updatepage(str){
document.getElementById('result').value = str;
}
function callMultiply(){
var a = parseInt(document.f1.a.value);
var b = parseInt(document.f1.b.value);
var url = "multiply.php?a=" + a + "&b=" + b + "";
postRequest(url);
}
</script>
</head>
<body>
<h1 align="center"><font color="#000080">Ajax Example</font></h1>
<form name="f1">
<input name="a" id="a" value="">
<input name="b" id="b" value="">
<input name="result" type="text" id="result">
<input type="button" value="Multiply" onClick="callMultiply()" name="showmultiply">
</form>
</body>
</html>
|
Here is the code of the "multiply.php"
page:
<?
$a=$_GET["a"];
$b=$_GET["b"];
$mul=$a*$b;
echo $mul;
?> |
Try
the example online
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Current Comments
0 comments so far (post your own) View All Comments Latest 10 Comments: