AJAX: Get and Post

There are two methods for requesting data:

• Get
• Post

To use "Get":

httpRequest.open('GET', url, true);
httpRequest.send('');

To use "Post":

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

Let's modify the function "getFile()" in the example of the previous chapter:

For using "Get":

function getFile(httpRequest,url,posTag){
if(!httpRequest){
alert('Error - Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = function(){
showContents(httpRequest,posTag);//function display contents
}

//send data to server
var email = document.getElementById('email').value;
var pass = document.getElementById('pass').value;
var qst = "?email=" + email + "&pass=" + pass;
//-----Get-----------
httpRequest.open("GET", url + qst, true);
httpRequest.send('');
//-----Get-----------
}

For using Post:

function getFile(httpRequest,url,posTag){
if(!httpRequest){
alert('Error - Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = function(){
showContents(httpRequest,posTag);//function display contents
}

//send data to server
var email = document.getElementById('email').value;
var pass = document.getElementById('pass').value;
var qst = "email=" + email + "&pass=" + pass;
//-----post----------
httpRequest.open("POST", url, true);
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.setRequestHeader("Content-length", qst.length);
httpRequest.setRequestHeader("Connection", "close");
httpRequest.send(qst);
//-----post----------
}

As you can see, they are just slightly different.

↓