Load data with ajax by Get method

In the previous day I have showed how to data load by ajax in post method. Now I show how to load data with ajax in get method. It is so easy as like post method. Let's go...

IndexGet.html:

<!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(gettvalue)
{
 //Get data from form with form name
 //var gettvalue = document.forms["myform"]["gettvalue"].value;
 
 //action url resultGet.php
 var url = "resultGet.php?result="+gettvalue; 
 
 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 change by image as a waiting image.
  }
     if (xmlhttp.readyState==4 && xmlhttp.status==200){
   //the result will be load in the div where div id="load"
   document.getElementById("load").innerHTML=xmlhttp.responseText;
  }
   }
 
 xmlhttp.open("GET", url, true); //The get method
 xmlhttp.send();
}
</script>

</head>
<body>
 <center>
 
 <form name="myform" method="post" action="">
  <select name="gettvalue" onchange="loadData(this.value)">
   <option value="">Select option</option>
   <option value="domain">Domain</option>
   <option value="hosting">Hosting</option>
  </select>
       </form>
<div id="load">
</div>
</center>
</body>
</html>

resultGet.php:

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

Load data with ajax by Get method

Thursday, February 07, 2013