Using post method in ajax without Jquery

In most of the cases GET method is used for sending the ajax request but due to limitation of GET method like 1000 character limit we need to use POST method in AJAX.

Follow these step to send an AJAX request using POST methode-

1-Create an XMLHttpRequest- Mozila Frefox ,Safari Chrome and IE 6+ support XMLHttpRequest but older version of Internet Exploral dosn’t  support   XMLHttpRequest .To make your code run on older version of Internet Exploral you need to create  an ActiveXObject.So here is the code for first step-

http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // For Older version of IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }

 2-Send the AJAX request to the server-To send the AJAX request to the server you just need to set the value of url and param variable in the given code-

http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(param);

 3.Show the response of the server on HTML page- When AJAX sends the request successfully to the server its readyStatus changes to 4 and when the servers successfully completed the request it gives status code 200.So we just need to replace the ID of the division with result  where you want to display the result of ajax request.

if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('result').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }

After completing the above three steps you can define a Java Script function which will perform the complete task .In this function you just need to pass the value of  url and param parameters.

var http_request = false;
   function sendreq(url, param) {
      http_request = false;
      if (window.XMLHttpRequest) { //For Mozilla, Safari and IE 6+...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // For Lower version of IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }

      http_request.onreadystatechange =showresult ;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(param);
   }

   function showresult() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('result').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }

Example-

var url=”post.php”;

var n=document.getElementByID(“name”).value;

var p=document.getElementByID(“pass”).value;

var param=”name=”+n+”&pass=”+p;

sendreq(url,param);

The post Using post method in ajax without Jquery appeared first on .