How to Make HTTP Requests in JavaScript

Learn how to send and handle HTTP requests using native features and popular libraries

Posted by Hüseyin Sekmenoğlu on March 05, 2019 Frontend Development

Making HTTP requests is one of the most essential tasks in frontend development. Whether you are fetching user data from a backend API or sending form data to a server, knowing how to make and manage these requests efficiently is key to building modern web applications. JavaScript provides multiple approaches to send HTTP requests both using native APIs and external libraries.

🧱 Using XMLHttpRequest

The XMLHttpRequest object is one of the original ways to send HTTP requests in JavaScript. Although not as commonly used today as fetch or libraries like Axios, it is still a reliable option for sending and receiving data from a server.

▶ Example: GET request with XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/api/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

▶ Example: POST request with XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://www.example.com", true);
xhr.send();

These methods give you full control over the request but often require more boilerplate code.

🌐 Using the Fetch API

The fetch API is the modern alternative to XMLHttpRequest. It is built into most modern browsers and uses Promises to handle asynchronous code more cleanly. It also supports advanced features like streaming and async/await.

▶ Example: GET request with fetch

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

This method is more readable and maintainable compared to XMLHttpRequest especially when dealing with multiple requests or handling errors.

🧰 Using Libraries like Axios

Many developers prefer to use libraries that abstract away the lower-level details of making HTTP requests. Popular choices include Axios, SuperAgent and jQuery AJAX. These libraries offer cleaner syntax and advanced features such as automatic JSON parsing and better error handling.

▶ Example: GET request with Axios

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

Axios and similar libraries are especially useful in larger applications where request and response handling becomes more complex.

🧭 Choosing the Right Method

Here are some tips on which method to use:

  • Use fetch for modern browser support and cleaner syntax

  • Use XMLHttpRequest if you need to support older browsers or require low-level control

  • Use libraries like Axios for robust error handling and simplified configuration

✅ Conclusion

JavaScript gives developers a wide range of tools to make HTTP requests effectively. Whether you prefer native APIs or external libraries, the most important thing is to choose a method that aligns with your project’s complexity and your team’s needs.