Tutorials – Ajax

In the previous chapter, we introduced the concept of Ajax and its significance in modern web development. We explored the principles and key components that define Ajax. Now, in this chapter, we will delve into the practical aspect of Ajax: making asynchronous requests. You will learn how to create, send, and handle Ajax requests using both the XMLHttpRequest object and the more modern Fetch API. These techniques are the building blocks for enabling your web applications to communicate with web servers and update content dynamically without requiring full page reloads.

XMLHttpRequest: The Traditional Approach

Before the Fetch API was introduced, the primary method for making Ajax requests in web development was through the XMLHttpRequest object. This object allows you to send HTTP requests asynchronously and handle responses with JavaScript.

Creating an XMLHttpRequest Object

To initiate an Ajax request, you first need to create an instance of the XMLHttpRequest object. Here’s how to do it:

var xhr = new XMLHttpRequest();

Sending an Asynchronous Request

Once you have an XMLHttpRequest object, you can configure it and send a request to a specified URL. Here is an example of how to send a GET request:

xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

• The first argument to the open method specifies the HTTP method (e.g., ‘GET’ or ‘POST’).
• The second argument is the URL to which the request is sent.
• The third argument, when set to true, makes the request asynchronous.

Handling the Response

To handle the response from the server, you can use event listeners. The most commonly used events are onload, onerror, and onreadystatechange. Here’s how you can set up an event listener to process the response when it’s complete:

xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    // Successful response
    var responseData = xhr.responseText; // Retrieve the response data
    // Process responseData as needed
  } else {
    // Error response
    console.error('Request failed with status: ' + xhr.status);
  }
};

Sending Data with XMLHttpRequest

You can also send data to the server in an XMLHttpRequest. For example, when making a POST request to submit a form, you can attach data to the request. Here’s how you can send JSON data:

var data = {
  username: 'john_doe',
  email: 'john@example.com',
};
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(JSON.stringify(data));

XMLHttpRequest Example

Let’s put it all together in a simple example. Suppose you want to retrieve data from a remote server and update a web page with the results. Here’s how you can achieve that with XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    var responseData = xhr.responseText;
    // Process and update the web page with responseData
  } else {
    console.error('Request failed with status: ' + xhr.status);
  }
};
xhr.send();

This example demonstrates the fundamental steps of making an asynchronous request with XMLHttpRequest.

The Fetch API: A Modern Approach

The Fetch API is a more recent addition to web development and provides a more user-friendly and promise-based way to perform asynchronous requests. It simplifies the process of making HTTP requests and handling responses compared to the older XMLHttpRequest.

Making a Simple Fetch Request

Here’s how you can make a simple GET request using the Fetch API:

fetch('https://api.example.com/data')
  .then(function (response) {
    if (!response.ok) {
      throw new Error('Request failed with status: ' + response.status);
    }
    return response.json(); // Parse the response body as JSON
  })
  .then(function (data) {
    // Process and update the web page with data
  })
  .catch(function (error) {
    console.error(error);
  });

The Fetch API returns a Promise, which allows you to use .then() and .catch() to handle successful and failed responses.

Sending Data with Fetch

You can also send data with a Fetch request. To make a POST request with JSON data, you can do the following:

var data = {
  username: 'jane_smith',
  email: 'jane@example.com',
};
fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
  },
  body: JSON.stringify(data),
})
  .then(function (response) {
    if (!response.ok) {
      throw new Error('Request failed with status: ' + response.status);
    }
    return response.json();
  })
  .then(function (data) {
    // Process and update the web page with the response data
  })
  .catch(function (error) {
    console.error(error);
  });

Fetch vs. XMLHttpRequest

The Fetch API has several advantages over XMLHttpRequest:

• Promises: Fetch uses Promises, making code more readable and easier to work with.
• Simplified Syntax: Fetch requests and responses are more straightforward to set up and handle.
• JSON by Default: Fetch automatically parses JSON responses, reducing the need for additional processing.
• Consistency: The Fetch API is consistent with other modern web APIs and is the recommended choice for new projects.

Cross-Origin Requests and CORS

When making Ajax requests to a different domain (cross-origin requests), you may encounter the “Same-Origin Policy.” Browsers restrict such requests for security reasons. To overcome this limitation, you can use Cross-Origin Resource Sharing (CORS).

CORS is a set of rules implemented on the server to specify who can access resources on a web page. It involves configuring HTTP headers on the server to allow or deny cross-origin requests.

Here’s how to set up a simple CORS configuration on the server to allow cross-origin requests:

// Example CORS configuration in Express.js
const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // Allow requests from any origin
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});
// Rest of your server code
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

This configuration allows any origin to make requests to your server.

Conclusion

In this chapter, we’ve explored the practical aspects of making asynchronous requests in web development using both the traditional XMLHttpRequest and the modern Fetch API. You’ve learned how to create, send, and handle Ajax requests, along with the differences and advantages of each approach.

Understanding how to make asynchronous requests is the first step in mastering Ajax, a critical technology for creating dynamic, interactive web applications. In the following chapters, we’ll dive deeper into specific use cases, error handling, and advanced features of Ajax to equip you with the knowledge and skills necessary for modern web development.