When building web applications, making HTTP requests is a common task. There are several ways to do this in JavaScript, each with its own advantages and use cases. In this post, we’ll explore four popular methods: fetch(), axios(), $.ajax(), and XMLHttpRequest(), with simple examples for each.

1. Using fetch()
The fetch() function allows you to request HTTP to fetch resources from a network. It uses promises, which makes it easier to handle asynchronous operations.

Example

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

2. Using Axios()
axios() is a popular HTTP client for making requests from browsers or Node.jsapplications. It is similar to the built-in fetch() API but includes additional features such as request and response interceptors, automatic JSONparsing, and more.

Example

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

3. Using $.ajax()
If you’re working with jQuery, you can use the $.ajax() function to make HTTP requests. It provides a simple interface for making AJAX requests and handling responses.

Example

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  }
});

4. Using XMLHttpRequest()
The XMLHttpRequest object provides an easy way to fetch data from a URL without a page refresh. It's a bit lower-level than fetch() or libraries like Axios, but it's still widely used in many applications.

Example

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Request failed');
};
xhr.send();

In this example, we create a new XMLHttpRequest, open a GET request, and handle the response by checking the status code and parsing the response text.