Load data with ajax by post method

Ajax is most useful day by day. By using ajax programmer can give a user efficiency web front. To day I show how to use ajax for post method. Let's go...

IndexPost.html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
function loadData(postvalue)
{
 var xmlhttp;
 if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
   {
  if (xmlhttp.readyState<4){
    document.getElementById("load").innerHTML = "<center>Loading...</center>";
   //It can be replace by image which will show as waiting.
  }
     if (xmlhttp.readyState==4 && xmlhttp.status==200){
   document.getElementById("load").innerHTML=xmlhttp.responseText;  
  //The result will be load in the div where id="load"
  }
   }
 xmlhttp.open("POST","resultPost.php",true); //action page is resultPost.php
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.send("result="+postvalue);
}
</script>

</head>
<body>
 <center>
 
  <select name="postvalue" onchange="loadData(this.value)">
   <option value="">Select option</option>
   <option value="domain">Domain</option>
   <option value="hosting">Hosting</option>
  </select>
  <div id="load">
</div>
</center>
</body>
</html>

resultPost.php page:

<?php
echo $_POST['result']; 
?>

Load data with ajax by post method

Thursday, February 07, 2013