Ajax as a POST and GET http requests

the most commonly used two HTTP methods known as GET and POST can be used with Ajax. today i am going to show you how to use both GET and POST methods for retrieving/modifying  the data from the server side.  the most of the time, GET method is used to retrieve data from the server and POST method is used to modify or alter the data in the server. therefore it is good to know how to use both of these methods with Ajax for implementing your solution in most optimal and standard way. the below code can be placed inside the head tag of your webpage to make Ajax POST method request for the server side. In server side, the relevant Controller logic should be implemented to handle POST requests.

POST

<script type="text/javascript">
//this function is used to create the xmlHttp Object based on the bowser type
function createXmlHttpObject(){
  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");
  }
  
  return xmlhttp;
}  

//this function is used to make the httpajax request to the server side
function sendAjaxHttpRequest(xmlhttp,url,parameterName,parameterValue){
/* if you need you can send mutiple parameters. here i am sending only a single parameter for the server side.
   isAjax=true is a parameter which has been set by myself to provide support for the server side implemetation done by myself.
   it is not required to send this parameter ot make the ajax functionality works */
var parameters=parameterName+"="+parameterValue+"&isAjax=true";
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", parameters.length);
xmlhttp.setRequestHeader("Connection", "close");
//finally we are sending the parameters to the server side as a POST request
xmlhttp.send(parameters);

}

/* this is the actual usage. both above methods have been used here 
this is practical usage :- <input type='text" id="firstName" name="firstName" onchange="validateForm('firstName',this.value,'txtFirstName')/> <p><span id="txtFirstName"> </span></p>
*/
function validateForm(elementName,elementValue,SpanTagId)
{

if (elementValue.length==0)
  {
  document.getElementById(SpanTagId).innerHTML="";
  return;
  }
// we have called above createXmlHttpObject method to create the xmlHttp Object
xmlhttp=createXmlHttpObject();

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(SpanTagId).innerHTML=xmlhttp.responseText;
    }
  }
/* we have called above sendAjaxHttpRequest method to make the actual ajax called for the server side. the url should be changed as your wish.
  i have implemeted this method to send only a single parameter for the server side. if you need you can send multiple parametes. in such case,
  you are required to provide parameters as below. 
   param1=param1value&param2=param3Value&....etc
   */
sendAjaxHttpRequest(xmlhttp,"http://localhost/mvc/index.php/userAdministration/ajaxValidation",elementName,elementValue,SpanTagId);

}//validateUsername

the following code segment can be used in your webpage for making Ajax GET request for the server side controller. in such case, the server side controller logic should be implemented in a way to deal with HTTP GET requests.

GET

<script type="text/javascript">
 
function validateUsername(userNameRetrived)
{ 
if (userNameRetrived.length==0)
  {
  document.getElementById("txtHint").innerHTML=""; 
  return;
  }
 
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 && xmlhttp.status==200) 
    { 
    document.getElementById("txtUserNameMessage").innerHTML=xmlhttp.responseText; 
    }
  }
 
xmlhttp.open("GET","validate_form_data.php?username="+userNameRetrived,true); 
xmlhttp.send();
}
</script>

Hope this will be useful for you :)

regards
Chathuranga Tennakoon
chathuranga.t@gmail.com