Traditional vs. Asynchronous Web Requests

Understanding the transition from traditional web interactions to modern asynchronous patterns is crucial for web performance. Traditional requests are typically triggered by hyperlinks, form submissions, or direct URL changes via window.location.href. These requests share a common characteristic: they force a full page reload. This process interrupts the user experience and consumes significant network bandwidth by re-downloading unchanged page assets.

In contrast, Ajax (Asynchronous JavaScript and XML) enables asynchronous requests. This approach allows multiple data fetches to occur in the background without disturbing the current state of the page. Only specific portions of the interface are updated, resulting in a smoother, more responsive application.

What is Ajax?

Ajax is not a single programming language but a technique that leverages existing web standards. It utilizes JavaScript to send and receive data from a server after the page has loaded, enabling partial updates without a full refresh. While the name includes "XML," modern implementations almost exclusively use JSON for data exchange.

The Core Object: XMLHttpRequest

The XMLHttpRequest (XHR) object is the backbone of Ajax. It is a built-in browser object that handles the communication between the client and the server. Although modern Fetch APIs exist, understanding XHR is essential for maintaining legacy systems and grasping the underlying mechanics of asynchronous communication.

Basic Implementation Workflow

Implementing a standard Ajax request involves three primary phases:

1. Initialization: Creating the XHR instance while ensuring cross-browser compatibility.
2. Configuration: Defining the HTTP method, destination URL, and sending the payload.
3. Handling: Monitorign the state of the request and processing the returned data.

// 1. Instantiate the request object
var connector;
if (window.XMLHttpRequest) {
    connector = new XMLHttpRequest();
} else {
    // Legacy support for older Internet Explorer versions
    connector = new ActiveXObject("Microsoft.XMLHTTP");
}

// 2. Define communication parameters
connector.open("GET", "/api/resource", true);

// 3. Register state change listener
connector.onreadystatechange = function() {
    // readyState 4: Request finished and response is ready
    // status 200: Successfully processed
    if (connector.readyState === 4 && connector.status === 200) {
        console.log("Server Response:", connector.responseText);
    }
};

// 4. Dispatch the request
connector.send();

Executing GET Requests

GET requests are primarily used for fetching data. Paramteers are appended directly to the URL as a query string.

var request = new XMLHttpRequest();
var queryParam = "id=5001";
var targetUrl = "/api/v1/details?" + queryParam;

request.open("GET", targetUrl);
request.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var data = JSON.parse(this.responseText);
        console.log("Fetched Data:", data);
    }
};
request.send();

Executing POST Requests

POST requests are used to submit data to the server. Unlike GET, data is sent in the request body, and a Content-Type header must be explicitly set to inform the server about the data format.

var xhr = new XMLHttpRequest();
var endpoint = "/api/v1/update";

xhr.open("POST", endpoint);
// Required for form-encoded data submission
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log("Update Successful:", xhr.responseText);
    }
};

var payload = "userId=admin&status=active";
xhr.send(payload);

Data Exchange with JSON

While XML was the original standard, JSON (JavaScript Object Notation) has become the preferred format due to its lightweight nature and native compatibility with JavaScript. When a server needs to return complex data structures like objects or lists, it serializes them into a JSON string.

On the server side (e.g., using Java), libraries like FastJSON or Jackson are used to convert backend entities into JSON strings before sending them back to the client.

// Java Server-side example
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
    InventoryItem item = new InventoryItem("SKU-99", "Wireless Mouse", 25.50);
    
    // Serialize object to JSON format
    String jsonOutput = JSONObject.toJSONString(item);
    
    response.setContentType("application/json;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.print(jsonOutput);
    out.flush();
}