How to Make HTTP GET Request in JavaScript

Browsers provide an XMLHttpRequest object which is used to make HTTP requests from JavaScript. In this tutorial, you will learn how to make HTTP GET request.

You can retrieve data from the URL without refreshing the page. XMLHttpRequest enables a Web page to update a part of the page without interrupting the user.

function httpGet(theUrl) {
  let xmlHttpReq = new XMLHttpRequest();
  xmlHttpReq.open("GET", theUrl, false); 
  xmlHttpReq.send(null);
  return xmlHttpReq.responseText;
}
 console.log(httpGet('https://jsonplaceholder.typicode.com/posts'));

The XMLHttpRequest fetches the data either asynchronously or synchronously. The type of request is chosen by the optional async argument set on the XMLHttpRequest.open() method. If this argument returns true or is not specified, the XMLHttpRequest is processed asynchronously; otherwise, it is processed synchronously.

As the synchronous requests will generate a warning you should make an asynchronous request and handle the response inside an event handler:

function httpGetAsync(theUrl, callback) {
  let xmlHttpReq = new XMLHttpRequest();
  xmlHttpReq.onreadystatechange = function () {
    if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)
      callback(xmlHttpReq.responseText);
  }
  xmlHttpReq.open("GET", theUrl, true); // true for asynchronous 
  xmlHttpReq.send(null);
}
httpGetAsync('https://jsonplaceholder.typicode.com/posts', function(result){
    console.log(result);
});

HTTP GET Method

HTTP (Hypertext Transfer Protocol) provides communication between clients and the server working as a request and answer. The GET method of HTTP requests data from the specified source. GET requests can be cached and remain in the browser history. It can also be bookmarked.

The GET method should never be used while working on sensitive data. The GET requests have length restrictions, and only should be used to get data.


Do you find this helpful?

Related articles