How do I send a GET request using JavaScript?

To send a GET request using vanilla JavaScript, you must use the XMLHttpRequest object to interact with the server. You need to create an XMLHttpRequest object, open the URL and send the request. After the request is made, the response body can be retrieved and processed using the xhr.response parameter of the XMLHttpRequest object. You can also send a GET requests using the new modern Fetch API method. jQuery users can send GET requests using the jQuery.get() method. Click Execute to run JavaScript GET Request Example online and see the result.
How do I send a GET request using JavaScript? Execute
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://reqbin.com/echo/get/json");

xhr.send();

xhr.onload = () => console.log(xhr.responseText);
Updated: Viewed: 2789 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 XMLHttpRequest?

XMLHttpRequest is an object built into the browser that allows you to make HTTP requests to the server without reloading the page. XMLHttpRequest is mostly used in Ajax programming. XMLHttpRequest can send and retrie any type of data including JSON, XML, text, etc. XMLHTTPRequest is used for asynchronous communications between clients and servers. XMLHttpRequest is used mainly for historical reasons, as there is a lot of legacy code based on XMLHttpRequest, as well as the need to support older browsers.

  • There is a lot of XMLHttpRequest legacy code that needs to be supported
  • The need to support older browsers without the use of polyfills
  • The fetch method cannot yet provide tracking of the progress of sending to the server

How to send 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 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 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 GET request using the jQuery Ajax?

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 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)
  })

See also