Making HTTP Requests: Leveraging AJAX and the Fetch API

As you dive deeper into web development, you’ll likely encounter situations where you need your web application to communicate with a server. For example, you might need to fetch data from an API, submit form data to a server, or update parts of your web page without refreshing the whole page. This is where making HTTP requests comes in, and today, we’re going to explore two popular methods for doing this: AJAX and the Fetch API.

What Are HTTP Requests?

Before we get into AJAX and Fetch, let’s understand the basics of an HTTP request. When you type a URL into your browser and hit enter, your browser sends an HTTP request to the server. The server then sends back a response, which could be an HTML page, a JSON object, or some other data format.

This process usually reloads the whole web page. But what if you want to update only part of the page without refreshing everything? That’s where AJAX and Fetch come into play!

What Is AJAX?

AJAX (Asynchronous JavaScript and XML) is a technique that allows you to send HTTP requests from your web page without reloading the whole page. Despite its name, AJAX can handle not just XML but also data in other formats, like JSON, which is more common nowadays.

Here’s a simple example of how to use AJAX with JavaScript to fetch data from a server:

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error("Error fetching data");
    }
};
xhr.send();

In this code:

1. We create a new XMLHttpRequest object.
2. The open() method initializes the request, specifying the type of request (GET) and the URL of the resource.
3. The onload event handler is triggered when the request is completed, and it checks if the response was successful (status 200). If it was, the response is logged to the console.
4. Finally, send() actually sends the request.

Introducing the Fetch API

While AJAX has been around for a long time, modern JavaScript provides a simpler and cleaner way to make HTTP requests: the Fetch API. Fetch is easier to use and supports promises, which help make your code more readable and easier to manage.

Here’s how the same request we made using AJAX looks with Fetch:

fetch("https://api.example.com/data")
    .then(response => {
        if (response.ok) {
            return response.json(); // Parse the JSON from the response
        } else {
            throw new Error("Network response was not ok");
        }
    })
    .then(data => {
        console.log(data); // Handle the data from the server
    })
    .catch(error => {
        console.error("There was a problem with the fetch operation:", error);
    });

In this example:

1. fetch() is called with the URL of the data you want to retrieve.
2. The then() method handles the response. If the response is successful (i.e., response.ok is true), we parse the JSON data.
3. The second then() deals with the parsed data, which is logged to the console.
4. catch() handles any errors that may occur during the request.

Why Use Fetch?

While AJAX works fine, the Fetch API offers several advantages:

• Simplicity: Fetch uses promises, which are easier to work with than the callbacks used in AJAX.
• Readability: Fetch code is generally easier to read and maintain.
• More Features: Fetch supports more modern JavaScript features, like handling streams and more detailed control over HTTP headers.

Handling Data Formats

Most modern APIs return data in JSON format. JSON (JavaScript Object Notation) is a lightweight data format that’s easy to read and write. When you use Fetch, you often need to convert the response to JSON:

fetch("https://api.example.com/data")
    .then(response => response.json()) // Convert to JSON
    .then(data => {
        console.log(data);
    });

Making POST Requests

Sometimes, you’ll need to send data to a server, like submitting form data. In this case, you’ll use a POST request. Here’s an example using Fetch:

fetch("https://api.example.com/submit", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ name: "John", age: 30 })
})
.then(response => response.json())
.then(data => {
    console.log(data);
})
.catch(error => {
    console.error("Error:", error);
});

In this example:

1. The method is set to "POST".
2. We include headers to specify the content type as JSON.
3. The body contains the data we’re sending, which we convert to a JSON string using JSON.stringify().

Conclusion

Both AJAX and the Fetch API allow you to make HTTP requests and update your web pages dynamically without refreshing the entire page. While AJAX is still widely used, the Fetch API offers a simpler and more modern approach, making it a preferred choice for many developers today.

Experiment with both methods to get comfortable, buHappy coding!

Author: Aryan Kumar is a web developer specializing in HTML, CSS, and JavaScript, working at Asecurity. Contact here (Instagram) : @aryan_geek .

#webdevelopment #html #css #javascript t for most cases, I recommend using Fetch for its cleaner syntax and modern features.