Asynchronous JavaScript and XML (AJAX)

AJAX stands for Asynchronous JavaScript and XML. It is a technique for building fast and interactive web applications. With AJAX, you can send requests to a server and receive response data without refreshing the entire page.

Traditional web applications require complete page reloads to fetch updated data or handle user enteractions. AJAX enables JavaScript to communicate with the server in the background, allowing for partial updates and improved interactivity.

The core of AJAX is the XMLHttpRequest object, which allows the client to send HTTP requests and handle server responses. However, besides XML, other data formats like JSON can also be used for data transmission.

AJAX significantly improves user experience by reducing page refreshes, speeding up application response times, and providing more flexible content updates. This technology is widely used in various web applications, including social media platforms, online gaming, and e-commerce sites.

AJAX is a powerful technology that enables smoother and more interactive web applications through asynchronous communication.

Traditional Request Methods and Their Limitations

Common Traditional Request Approaches

1. Entering URL directly in the browser address bar
2. Using hyperlink elements
3. Submittting HTML forms
4. Implementing requests through JavaScript code

Hyperlink Example

<a href="/legacy/endpoint">Standard Request (Hyperlink)</a>

Form Submission Example

<form action="/legacy/endpoint" method="get">
    <input type="submit" value="Standard Request (Form)"/>
</form>

JavaScript Implementation Example

<input type="button" value="JavaScript Request" onclick="dispatchRequest()">
<script type="text/javascript">
    function dispatchRequest() {
        window.location.href = "/legacy/endpoint";
    }
</script>

The Problem with Traditional Requests

Consider this scenario:

You are watching a video on a website, and significant portions have been buffered. You notice a login prompt on the side and out of curiosity, click the login or registration button. If the website uses traditional request methods, the entire page will refresh, and the buffered video will be lost. Furthermore, if your network connection is poor, the page will display as a blank screen. Would you accept this?

This is unacceptable.

Imagine a more acceptable approach:

Your click action should only affect the login section—nothing else should be impacted. The video should continue playing without a full page refresh.

AJAX achieves exactly this: partial page updates.

Additionally, as illustrated in the concept below:

After clicking button 1, even if its AJAX request is still processing, it does not affect button 2 or button 3 from sending requests. User experience remains uninterrupted.

These requests operate independently, like separate threads—they are asynchronous.

AJAX Overview

• AJAX is not a single technology but rather a combination of multiple technologies.
• AJAX allows browsers to send special requests that can be asynchronous.
• Understanding asynchronous vs. synchronous:
  • If thread T1 and thread T2 execute concurrently, they are asynchronous.
  • If thread T2 must wait for thread T1 to reach a certain point before executing, then T2 is waiting for T1—they are queued, which represents synchronous execution.
• AJAX can send asynchronous requests. Within the same browser page, multiple AJAX requests can be sent simultaneously without waiting for each other—they execute concurrently.
• AJAX code belongs to front-end JavaScript. It has no dependency on back-end technology—back-ends can be implemented in Java, PHP, C, or other languages.
• AJAX applications may use XML for data transmission, but transmitting data as plain text or JSON is equally common.
• AJAX can update portions of a webpage without reloading the entire page (partial page refresh).
• AJAX can initiate multiple requests within the same webpage, similar to starting "multiple threads" in a single page, with each "thread" handling one request.

Fundamentals (JavaScript Basics)

For those unfamiliar with JavaScript event handling, the following example demonstrates two approaches to binding click events:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Handling Demo</title>
</head>
<body>

    <script type="text/javascript">
        function displayMessage() {
            alert("message1");
        }
    </script>

    <!-- Direct onclick attribute binding -->
    <input type="button" value="message1" onclick="displayMessage()">

    <!-- Programmatic event binding using JavaScript -->
    <input type="button" value="message2" id="triggerBtn">

    <script type="text/javascript">
        // Execute when DOM is fully loaded
        document.addEventListener('DOMContentLoaded', function() {
            // Retrieve the button element by its ID
            var triggerElement = document.getElementById("triggerBtn");

            // Assign click handler programmatically
            triggerElement.onclick = function() {
                // 'this' refers to the element that triggered the event
                // Display the button's value in an alert
                alert(this.value);
            };
        });
    </script>
</body>
</html>

This example demonstrates two methods of attaching click event handlers to buttons: the inline onclick attribute and programmatic binding using JavaScript's addEventListener or direct property assignment.