How to Make HTTP GET Request in JavaScript

When you have a dynamic page and you want to show some information based on a server-response, you need to send a GET request to the server. In this tutorial, you will learn how to make HTTP GET request.

Watch a course JavaScript -The Complete Guide (Beginner + Advanced)

using fetch

The most straightforward way to make a GET request is using a global method named fetch. Simply pass the URL to this function, and it will return the HTTP response as a promise. As a HTTP response is a huge object, you can call the .json() on the response to get the response body as a second promise. See the example below.

<!DOCTYPE html>
<html>
  <body>
    <div>post title: <span id="spanId"></span></div>
    <script>
      async function fillTheTitle() {
        const post = await fetch("https://jsonplaceholder.typicode.com/posts/1").then((res) => res.json());
        document.getElementById("spanId").innerText = post.title;
      }
      fillTheTitle();
    </script>
  </body>
</html>

using XMLHttpRequest

Browsers provide an XMLHttpRequest object which is used to make HTTP requests from JavaScript. 

<!DOCTYPE html>
<html>
  <body>
    <div>post title: <span id="spanId"></span></div>
    <script>
      function httpGet(theUrl) {
        let xmlHttpReq = new XMLHttpRequest();
        xmlHttpReq.open("GET", theUrl, false);
        xmlHttpReq.send(null);
        return xmlHttpReq.responseText;
      }
      document.getElementById("spanId").innerText = JSON.parse(httpGet("https://jsonplaceholder.typicode.com/posts/1")).title;
    </script>
  </body>
</html>

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.

But beware that the above code is not a recommended way to make HTTP requests, as it is a "synchronus" way, meaning that the entire page will be "blocked" while the page is waiting for a response. It is better make an asynchronous request and handle the response inside an event handler:

<!DOCTYPE html>
<html>
  <body>
    <div>post title: <span id="spanId"></span></div>
    <script>
      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/1", function (result) {
        document.getElementById("spanId").innerText = JSON.parse(result).title;
      });
    </script>
  </body>
</html>

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.