How to send request data in Ajax HTTP GET and POST?

In this post, going to show How to send request data in Ajax HTTP GET and POST? How to send data insecure? what is the best Http method to send request data? How to send data in the query string in Http GET and POST method, how to avoid sending sensitive data in the URAL query string etc.

How to create XMLHttpRequest in Modern Browsers?

XMLHttpRequest exchanges the data with the server without refreshing the view page.

All modern browsers supporting the XMLHttpRequest object.

var xhttp = new XMLHttpRequest();

How to create ActiveXObject in Old Browsers?

Old browsers (IE5 & IE6) not supporting XMLHttpRequest objec. Old Browsers support ActiveX Object

var activeXObject= new ActiveXObject("Microsoft.XMLHTTP");

 

How to create Ajax in old and new browsers?

var xmlhttp ="";
if (window.XMLHttpRequest) {
    // code for modern browsers
    xmlhttp = new XMLHttpRequest();
 }
else {
    // code for old IE browsers
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 } 

 XMLHttpRequest  Methods

new XMLHttpRequest();

Create new XMLHttpRequest Object

open(method,url,async,username,password)

method – HTTP method (GET or POST)

url – Request Url

Async: asynchronus(true) or synchronus(false)

username and password: optional

send()

Send the request to server for HTTP GET requests

send(String)

Sends the request to server for HTTP POST requests. i.e. request parameters

setRequestHeader()

set request header parameter with key and value i.e obj.setRequestHeader(“Content-Tpye”, “application/json);

 XMLHttpRequest  Properties

onreadystatechange

Defines a function to be called when the readyState property changes

readyState

It holds the status of the request

0(zero) means request not initialized

1 means that backend server connection established

2 means that request received

3 means that processing the request

4 means that request finished and response ready

status

status of the backend server response.

200: “OK”
403: “Forbidden”
404: “Not Found”

responseXML

Backend server return response as XML data

responseText

Backend server return response as Text data as String

 

AJAX GET Request.

xhttp.open("GET", "getCustomerData.jsp", false);
xhttp.send(); 

 

AJAX POST Request.

xhttp.open("POST", "getCustomerData.jsp", false); 
xhttp.send(); 

 

AJAX GET Request with query string

xhttp.open("GET", "getCustomerData.jsp?custid=123&acc=456", false);
xhttp.send(); 

 

AJAX POST Request with query string

xhttp.open("GET", "getCustomerData.jsp?custid=123&acc=456", false);
xhttp.send(); 

 

We can use the HTTP GET request method if there is no sensitive data in the query string.

If you have sensitive data in the URL query string then you should have to use HTTP POST method be setting the header and sending the query string as a separate instead putting in the URL

 

 

AJAX POST Request with query string without secured way

xhttp.open("POST", "getCustomerData.jsp?custid=123&acc=456", false);
xhttp.send(); 

 

AJAX POST Request with query string with secured way

To POST data like an HTML form, add an HTTP header with setRequestHeader(). Specify the data you want to send in the send() method:

xhttp.open("POST", "getCustomerData.jsp", false);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("custid=123&acc=456"); 

 

Synchronous Vs Asynchronous

Synchronous: Sends the request to the backend server and will not wait for the response and we can execute other logic till to get a response.

For this in the open method, the third parameter we have to pass false

xhttp.open("POST", "getCustomerData.jsp", false);

 

ASynchronous: Sends the request to the backend server and will not wait for the response and we can execute other logic till to get a response.

For this in the open method, the third parameter we have to pass true

xhttp.open("POST", "getCustomerData.jsp", true);

 

Synchronous Example

xhttp.open("GET", "getCustomerData.jsp", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; 

Asynchronous Example

xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
     document.getElementById("test").innerHTML = this.responseText;
   }
  };
  xhttp.open("GET", "getCustomerData.jsp", true);
  xhttp.send(); 

 

Thanks for the reading article. Please give comments and  share the article if you like this article.