Making a GET request with JavaScript

What is JavaScript?

JavaScript is a scripting language that runs in browsers and on the server side (Node.js), making it a versatile programming language across devices and platforms. JavaScript turns static HTML and CSS web pages into interactive pages by dynamically updating content, validating form data, managing media, and playing videos.

What is Fetch API?

The Fetch API is a modern, promise-based JavaScript interface that allows you to make HTTP requests to servers from browsers and Node.js (as of version 18). The Fetch API can perform all the tasks that the XMLHttpRequest object does, but in a more JavaScript-friendly way thanks to promises, and can be used by other technologies such as Service Workers.

What is XMLHttpRequest?

XMLHttpRequest is an old way of sending GET requests from JavaScript and is supported by almost all browsers. XMLHttpRequest can send and receive any type of data including JSON, XML, text, etc. It is used mainly for historical reasons, as there is a lot of legacy code based on XMLHttpRequest and the need to support older browsers. The only advantage of XMLHttpRequest over Fetch is that Fetch cannot yet track the progress of sending data to the server.

Before the Fetch API, sending requests from JavaScript was pretty awkward. This has resulted in several popular JavaScript libraries (jQuery, Axios, etc.) that make sending GET and POST requests from JavaScript easy and work on top of XMLHttpRequest.

How to send GET request using the Fetch API?

Fetch API is a powerful new web API that allows you to make asynchronous requests. The Fetch API provides a more effective and flexible set of features than the XMLHttpRequest object. Fetch returns a "promise," which is one of the new ES6 features. Promises allow you to process an asynchronous request more intelligently. Below is an example of making GET a request to the ReqBin echo URL with Fetch API.

fetch('https://reqbin.com/echo/get/json')
   .then(response => response.text())
   .then(text => console.log(text))

How to send a GET request with custom HTTP headers?

To send a GET request with custom HTTP headers using the Fetch API, you need to pass those headers to the "headers" parameter.

fetch('https://reqbin.com/echo/get/json', {
   headers: {
      'Accept': 'application/json'
   }})
.then(response => response.text())
.then(text => console.log(text))

How to send a GET request using the XMLHttpRequest?

To send an HTTP GET request using the XMLHttpRequest, we need to first create an object by calling new XMLHttpRequest() and then use the XMLHttpRequest open() and send() methods. Onreadystatechange informs when the status of a request has changed. Below is an example of getting JSON from the ReqBin echo URL with the XMLHttpRequest object.

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://reqbin.com/echo/get/json");

xhr.onreadystatechange = function () {
   if (xhr.readyState === 4) {
      console.log(xhr.responseText);
   }};

xhr.send();

How to send a GET request using jQuery?

If you are using jQuery in your project, it is recommended to use the jQuery Ajax methods instead of the raw XMLHttpRequest object. The jQuery $.get() method allows you to get from the server in a single line. This is a simple wrapper for the more advanced $.ajax method. Below is an example of getting JSON from the ReqBin echo URL with the jQuery Ajax method.

$.ajax({
  type: "GET",
  url: "https://reqbin.com/echo/get/json",
  success: function (result) {
    console.log(result);
  },
});

How to send a GET request using the Axios?

Axios is a popular open-source library for making HTTP requests in JavaScript. Axios works with the built-in XMLHttpRequest object, providing a convenient and versatile set of functions for common tasks such as intercepting HTTP requests and sending concurrent requests. Like Fetch API, it supports promises to handle asynchronous requests. Axios uses the axios.get() method to send a GET requests. Axios automatically parses the received data and catches HTTP errors in its catch method, eliminating the need for special status code checking before processing the response.

axios.get("https://reqbin.com/echo/get/json");
  .then(response => {
    data = response.text;
    console.log(data);
  })
  .catch(error => {
      console.log(error.message);
  })

How to send a GET request in Node.js?

Node.js provides many methods for making HTTP requests. Many popular open-source libraries are available to make any HTTP request. The following example is sending a GET request to Node.js using the "request" library. The request library is a lightweight HTTP client comparable to the Python Requests Library.

let request = require('request');

request.get(
    'https://reqbin.com/echo/get/json',
    function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body);
        }
    }
);

See also

• How do I send a POST request using JavaScript?
• How do I send requests using JavaScript Fetch API?
• How do I send an AJAX request using JavaScript?