Ajax Multiplication Example

This is a simple Ajax multiplication example. 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.
<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>