Making a GET request with JavaScript

To make a GET request with JavaScript, call the fetch() method and provide the target URL. The fetch() uses GET by default if no HTTP method is passed. To send additional HTTP headers to the server with your JavaScript GET request, pass them with "headers" parameters. If you want to include credentials in your GET request, set credentials: "include". For older browsers, you can use the XMLHttpRequest object to make HTTP requests. In this JavaScript GET Request example, we send a request to the ReqBin echo URL using the fetch() method with a custom HTTP header. Below are additional examples of JavaScript GET requests with detailed descriptions. Click "Execute" to run the JavaScript GET Request online and see the result.
Making a GET request with JavaScript Execute
fetch('https://reqbin.com/echo/get/json', {
   headers: {
      'Accept': 'application/json'
   }
})
   .then(response => response.text())
   .then(text => console.log(text))
Updated: Viewed: 19414 times

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.

JavaScript GET Request with Fetch API Example
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.

JavaScript GET Request with Custom Headers Example
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.

JavaScript GET Request with XMLHttpRequest Example
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.

JavaScript GET request with jQuery Ajax Example
$.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.

JavaScript GET request with Axios Example
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.

JavaScript GET Request with Node.js Example
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