Making Web Requests with JavaScript: Beyond jQuery

Asynchronous JavaScript and XML (AJAX) is a powerful technique for creating dynamic web applications. While libraries like jQuery have simplified AJAX for years, modern JavaScript provides robust, built-in mechanisms for making web requests without any external dependencies. This tutorial will guide you through the core concepts and techniques for making AJAX requests using vanilla JavaScript, and explore newer approaches like the Fetch API.

The Foundation: `XMLHttpRequest`

The XMLHttpRequest object is the cornerstone of AJAX in JavaScript. It allows you to send HTTP requests to a server and process the response without reloading the entire page.

Creating and Initializing an XMLHttpRequest Object

First, you need to create an instance of the XMLHttpRequest object:

var xhttp = new XMLHttpRequest();

This line creates a new XMLHttpRequest object and assigns it to the variable xhttp.

Configuring the Request

Next, you configure the request using the open() method:

xhttp.open("GET", "ajax_info.txt", true);

GET: The HTTP method to use (e.g., GET, POST, PUT, DELETE).
"ajax_info.txt": The URL of the resource you want to request.
true: A boolean value indicating whether the request should be asynchronous. Setting this to true (the recommended approach) allows your JavaScript code to continue executing while waiting for the server’s response.

Handling the Response with onreadystatechange

The onreadystatechange event is triggered whenever the readyState property of the XMLHttpRequest object changes. The readyState indicates the current state of the request:

0: Uninitialized. The request has not been initialized.
1: Loading. The request is being initialized.
2: Loaded. The request has been completed successfully.
3: Interactive. The server is sending a response.
4: Complete. The request has been completed, and the response is fully loaded.

You need to define a function to handle the response when the readyState is 4 and the status is 200 (OK):

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // Request finished successfully!
        console.log(this.responseText);
        // Do something with the response text
    }
};

Sending the Request

Finally, send the request using the send() method:

xhttp.send();

Complete Example:

var xhttp = new XMLHttpRequest();

xhttp.open("GET", "ajax_info.txt", true);

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);
    }
};

xhttp.send();

This code retrieves the content of ajax_info.txt and logs it to the console.

The Fetch API: A Modern Approach

The Fetch API provides a more modern and flexible way to make web requests. It’s based on Promises, which makes asynchronous code easier to read and manage.

Making a Simple GET Request

fetch('/get-data')
  .then(response => response.json())
  .then(data => {
    // Do something with the data
    console.log(data);
  })
  .catch(error => {
    console.error('There was an error:', error);
  });

fetch('/get-data'): Initiates a GET request to the /get-data endpoint.
.then(response => response.json()): Parses the response body as JSON.
.then(data => { ... }): Handles the parsed JSON data.
.catch(error => { ... }): Handles any errors that occur during the request.

Using async/await for Cleaner Code

You can further simplify the code using async/await:

async function fetchData() {
  try {
    const response = await fetch('/get-data');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There was an error:', error);
  }
}

fetchData();

This code achieves the same result as the previous example but with a more readable and concise syntax.

Sending POST Requests with Fetch

fetch('/post-data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('There was an error:', error);
});

Conclusion

Both XMLHttpRequest and the Fetch API provide powerful ways to make web requests in JavaScript. While XMLHttpRequest is a more traditional approach, the Fetch API offers a more modern and flexible solution that integrates well with Promises and async/await. Choose the approach that best suits your project’s needs and coding style. Remember to handle potential errors and always validate the data you receive from the server.