AJAX - AJAX with Fetch API (Modern Alternative)

AJAX traditionally uses the XMLHttpRequest object to send and receive data from a server without reloading the webpage. However, modern JavaScript provides a better and simpler method called the Fetch API. The Fetch API is now widely used because it is cleaner, easier to understand, and works well with modern JavaScript features.

What is Fetch API

Fetch API is a built-in JavaScript interface used to make HTTP requests such as GET, POST, PUT, and DELETE. It allows web pages to communicate with servers asynchronously, meaning data can be loaded in the background while the user continues using the webpage.

Fetch API replaces XMLHttpRequest in most modern web applications.

Basic Syntax of Fetch

The basic structure of a fetch request is:

fetch("URL")
.then(response => response.json())
.then(data => {
console.log(data);
});

Explanation:

  1. fetch("URL") sends a request to the server.

  2. The server sends a response.

  3. response.json() converts the response into JSON format.

  4. The data received from the server is processed inside the next then block.

Example of GET Request

Suppose we want to retrieve user data from a server.

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

In this example:

  • Data is requested from the server.

  • The response is converted into JSON.

  • Any errors are handled using catch.

Example of POST Request

Fetch API can also send data to a server.

fetch("https://api.example.com/users", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
name: "Rahul",
age: 21
})
})
.then(response => response.json())
.then(data => console.log(data));

Here:

  • method defines the request type.

  • headers describe the data format.

  • body contains the data sent to the server.

Advantages of Fetch API

  1. Simple and readable syntax compared to XMLHttpRequest.

  2. Uses Promises, making asynchronous programming easier.

  3. Supports modern JavaScript features like async and await.

  4. Cleaner error handling.

  5. Supported by all modern browsers.

Difference Between Fetch API and XMLHttpRequest

XMLHttpRequest requires many lines of code and event handling. Fetch API provides a cleaner and more structured approach using Promises, which improves code readability and maintenance.

Limitations of Fetch API

  1. Fetch does not reject promises automatically for HTTP error status like 404 or 500; errors must be handled manually.

  2. Older browsers may require polyfills for support.

Conclusion

Fetch API is the modern way of performing AJAX operations in JavaScript. It simplifies server communication, improves code readability, and integrates well with modern asynchronous programming techniques. Because of these advantages, most developers now prefer Fetch API over traditional XMLHttpRequest for building interactive web applications.