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.

using fetch

The most straightforward way to make a GET request is using a global method named <kbd class="highlighted">fetch</kbd>. 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 <kbd class="highlighted">.json()</kbd> on the response to get the response body as a second promise. See the example below.

JavaScript global fetch method

<!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>

Try it Yourself »

using XMLHttpRequest

Browsers provide an <kbd class="highlighted">XMLHttpRequest</kbd> object which is used to make HTTP requests from JavaScript.

Javascript HTTP GET Request

<!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>

Try it Yourself »

The <kbd class="highlighted">XMLHttpRequest</kbd> fetches the data either asynchronously or synchronously. The type of request is chosen by the optional async argument set on the <kbd class="highlighted">XMLHttpRequest.open() </kbd> method. If this argument returns true or is not specified, the <kbd class="highlighted">XMLHttpRequest</kbd> 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:

Javascript async HTTP GET Request

<!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>

Try it Yourself »

HTTP GET Method

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

The <kbd class="highlighted">GET</kbd> method should never be used while working on sensitive data. The <kbd class="highlighted">GET</kbd> requests have length restrictions, and only should be used to get data.