How to Make HTTP Requests in Javascript using XMLHttpRequest 101

XMLHttpRequest is a built-in object in Javascript that allows you to make HTTP requests. It was first introduced by Microsoft in Internet Explorer 5 and has since been standardized and implemented in all major browsers. It provides a way to send HTTP or HTTPS requests to a server and receive the response, without having to reload the page.

The XMLHttpRequest an object has a number of properties and methods that allow you to customize the request and handle the response.

Here are some of the most commonly used properties and methods:

• open(method, url[, async]): This method initializes the request. It takes three arguments: the HTTP method (e.g., GET, POST, PUT), the URL of the server, and an optional boolean value indicating whether the request should be asynchronous (default is true).
• send([body]): This method sends the request to the server. It takes an optional argument that contains data to send with the request (e.g., form data, JSON data).
• setRequestHeader(header, value): This method sets a header for the request. It takes two arguments: the name of the header (e.g., “Content-Type”), and the value of the header (e.g., “application/json”).
• getResponseHeader(header): This method returns the value of a response header. It takes one argument: the name of the header.
• getAllResponseHeaders(): This method returns all the response headers as a string.
• onreadystatechange: This property contains a callback function that is called each time the readyState property changes. The readyState the property indicates the current state of the request (e.g., 0 = uninitialized, 1 = opened, 2 = headers received, 3 = loading, 4 = done).
• status: This property contains the HTTP status code of the response (e.g., 200 = OK, 404 = Not Found).
• statusText: This property contains a string representing the status message of the response.

Here’s an example of using XMLHttpRequest it to send a GET request:

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.log('Request failed. Returned status of ' + xhr.status);
    }
  }
};

In this example, the XMLHttpRequest object is created with the new keyword, and the request is initialized using the open() method with the GET method and URL of the server. The request is then sent to the server using the send() method. The onreadystatechange property is set to a callback function that is called each time the readyState property changes. When the request is complete (i.e., readyState is 4), the HTTP status code of the response is checked using the status property. If the status code is 200 (OK), the response is logged to the console using the responseText property. Otherwise, an error message is logged to the console.

You can make an HTTP request in Javascript by using the built-in XMLHttpRequest object or the newer fetch() method. Here’s an example using XMLHttpRequest:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data');
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log('Request failed.  Returned status of ' + xhr.status);
  }
};

This code creates a new XMLHttpRequest object sets the request method and URL using the open() method sends the request using the send() method, and sets a callback function to handle the response when it is received.

Here’s an example using the newer fetch() method:

fetch('https://example.com/api/data')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.log(error));

This code sends a GET request to the specified URL using the fetch() method and uses promises to handle the response asynchronously. The response is converted to text using the text() method, and the data is logged into the console. Any errors are caught using the catch() method.