AJAX : Asynchronous JavaScript XML

Don't break the flow 💥

AJAX, short for Asynchronous JavaScript and XML, is a technique that allows web pages to update dynamically without requiring a full page reload. It enables web applications to send and receive data asynchronously, allowing for a more responsive and interactive user experience. In this blog post, we will explore the basics of AJAX and how to use it to build dynamic web applications.

Understanding AJAX 💭

AJAX allows web pages to communicate with a server asynchronously, without requiring a full page reload. This is achieved by using the XMLHttpRequest (XHR) object, which is built into most modern web browsers. The XHR object allows JavaScript to send and receive data in the background, while the user is still interacting with the page.

Making an AJAX request

To make an AJAX request, you first need to create a new XHR object. This can be done using JavaScript's XMLHttpRequest() constructor. Once the XHR object is created, you can use its open() and send() methods to send a request to the server. For example, to make a GET request to a server-side script, you would use the following code:

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.php", true);
xhr.send();

Handling the server response

Once the server has processed the request and sent a response, the XHR object's onreadystatechange event is triggered. You can use this event to check the status of the response and take appropriate action.

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        // Do something with the data
    }
};

Sending data with an AJAX request

In addition to sending a request to the server, you can also send data with an AJAX request. To send data, you need to set the open() method's third parameter to true, indicating that the request is asynchronous. You can then use the send() method to send the data to the server. You can send data in a variety of formats, such as a JavaScript object, a FormData object, or a query string.

var data = { name: "John", age: 30 };
xhr.open("POST", "submit.php", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify(data));

Handling errors

It's important to handle errors that may occur during an AJAX request. The XHR object's onerror event is triggered when an error occurs, you can use this event to handle the error and take appropriate action.

xhr.onerror = function() {
    console.error("An error occurred while making the request.");
};

AJAX frameworks and libraries

While it is possible to use the XHR object to make AJAX requests, it can be quite cumbersome to do so. There are several AJAX frameworks and libraries available, such as

jQuery, Axios, and Fetch API, which provides a more convenient and consistent API for making AJAX requests.

These frameworks and libraries also provide additional features, such as support for older browsers, error handling, and utility functions.

Here's a simple JavaScript application that uses the fetch() method to make an AJAX request to a server-side script, and demonstrates the basic functionality of AJAX:

// Select the button element
const button = document.getElementById("fetch-data-button");

// Attach a click event listener to the button
button.addEventListener("click", fetchData);

function fetchData() {
  // Use the fetch() method to make an AJAX request
  fetch("example.php")
    .then(response => response.json())
    .then(data => {
      // Do something with the data
      console.log(data);
    })
    .catch(error => {
      console.error("An error occurred:", error);
    });
}

This application first selects the button element from the HTML document using getElementById(). It then attaches a click event listener to the button that calls the fetchData() function when the button is clicked.

The fetchData() function uses the fetch() method to make an AJAX request to the server-side script "example.php". The fetch() method returns a promise that resolves with a Response object, which contains the server's response. In this example, the then() method is used to parse the response as JSON and then log the data to the console. If an error occurs, it is caught by the catch() method and logged to the console.

This is a basic example of how AJAX can be used to send a request to a server-side script and retrieve data without requiring a full page reload. With this basic understanding, you can start building more complex web applications that use AJAX to provide a more responsive and interactive user experience.

Please note that fetch is a modern way of making ajax call and it is similar to the XHR(XMLHttpRequest) in older browser, but it works in all modern browsers. This example uses GET request, you can also use POST, PUT, DELETE methods with fetch as well.

In conclusion, AJAX is a powerful technique that allows web pages to update dynamically without requiring a full page reload. It enables web applications to send and receive data asynchronously, allowing for a more responsive and interactive user experience.

By understanding the basics of AJAX and how to use it to make requests and handle responses, you can build dynamic web applications that provide a better user experience.