Requesting in JavaScript is Only Valid if it is Done in The Correct Format!

A piecemeal illustration of XMLHttpRequest (XHR) in JavaScript.

Sloth bears feed predominantly on termites and ants and employ a well-evolved method to dig them out. They are threatened by habitat loss and are sometimes captured for use in performances or hunted because of their aggressive behavior.

We all have created “form” simulation using HTML and CSS, and a bit of JavaScript to make it somewhat interactive. But till now, we haven’t used any XHR requests for sending and receiving data from the server.

Firstly, we have to understand the importance of XHR requests in JavaScript. Without sending and receiving the data from the server, it is not possible to make the “form” dynamic and interactive in real-time. So, in order to do make the “form” dynamic, we have to perform certain steps.

Client-Server model

Steps leading to a perfect XHR request

• Create an XHR object — XHR objects are used to communicate with the server. XHR stands for XMLHttpRequest. The constructor initializes an “XMLHttpRequest”.

var xhr = new XMLHttpRequest();

• Open the XHR object — It is very important to “open” the XHR object, as it includes mentioning the “method” to perform i.e., “GET”, “POST”, “PUT”, etc.

xhr.open("method_name", "url");

• Send the request — After opening the XHR object and mentioning the “method” to perform, now it is time to send the request to the server, and wait for the response.

xhr.send();

There is something more with the “send” method. If you are performing a “POST” request, it is essential to involve a “body” along with the “send” method.

Also, keep in mind that the data sent in the body should be in the form of JSON. And, in order to convert an object data into JSON, you can use “JSON.stringify(object-data)”, and “JSON.parse(JSON-data)” to convert it back to an object data.

var body = {
  name: "Kapil",
  city: "Delhi",
  country: "India"
}
xhr.send(JSON.stringify(body));

• Do something with the response — Finally, after the request is sent, and the response is perfectly received, it is time for us to do something with that response. You can do a myriad of functionalities with the response.

xhr.addEventListener("load", function(){
  console.log(xhr.response);
})

Basic XHR methods

• GET — “GET” method is used to send a request to the server in order to get the data from the “url” mentioned in the “open” method.

xhr.open("GET", "url");

• POST — “POST” method is used to add a new resource in the “url” mentioned. The data must be sent in the form of JSON.

xhr.open("POST", "url");
var body = {
  name: "Kapil",
  city: "Delhi",
  country: "India"
}
xhr.send(JSON.stringify(body));

• PUT — “PUT” method is used to modify an already existing resource present in the server. It also involves sending the data in the form of JSON. It is very important point to keep in mind that “PUT” method needs to contain the complete resource instead of just the “changes to be done”.

xhr.open("PUT", "url");
var body = {
  name: "Kapil",
  city: "Delhi",
  country: "India"
}
xhr.send(JSON.stringify(body));

• PATCH — “PATCH” method is similar to “PUT” method, but there is subtle difference between these two methods. “PATCH” method only needs to contain the “changes to be done” to the resource, and not the complete resource.

xhr.open("PATCH", "url");
var body = {
  name: "Sarthak",
  city: "Noida"
}
xhr.send(JSON.stringify(body));

• DELETE — “DELETE” is, as the name suggests, a method to delete a resource form the server.

xhr.open("DELETE", "url");
xhr.send();

Summary

In this article, I tried to make the concept of XHR, a bit more lucid. Along with the concept, I have included some basic methods, and code snippets along with each method to make it crystal clear. Try to code the above mentioned methods for better understanding of the concept.