Core Concepts

Traditional web applications suffer from several limitasions:

• Pages take long loading times during slow network conditions, forcing users to wait
• Form validation errors require re-entering entire forms
• Page navigation causes full reloads, wasting resources and increasing wait times

AJAX (Asynchronous JavaScript and XML) provides browser capabilities for updating page data without full refreshes, enhancing user experience.

Common Use Cases

• Infinite scroll loading additional content
• Pagination without page refreshes
• Real-time form validation on feild blur
• Auto-complete dropdown suggestions

Environment Requirements

AJAX functionality requires operation within a web server environment. Node.js servers serve as development platforms for testing.

Implementation Process

Creating XMLHttpRequest Instance

const httpReq = new XMLHttpRequest();

Configuring Request Parameters

// Define method and endpoint
httpReq.open('GET', 'https://api.example.com/data/search?q=test');

Executing the Request

httpReq.send();

Handling Server Response

httpReq.onload = function() {
    console.log(httpReq.responseText);
}

Server-Side Data Formats

Real-world applications typically return JSON objects as response formats. Client-side code must parse JSON data and combine it with HTML templates for display purposes.

Server implemantation example:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'public')));
app.listen(3000);

app.get('/api/data', (req, res) => {
    res.send({
        name: 'Sample Data',
        value: 123
    });
});

Client-side JSON parsing:

httpReq.onload = function() {
    const parsedData = JSON.parse(httpReq.responseText);
    const htmlContent = `<h2>${parsedData.name}</h2>`;
    document.body.innerHTML = htmlContent;
}

Parameter Transmission Methods

GET Requests

Parameters append to URL query strings:

const formData = `username=${usernameInput.value}&email=${emailInput.value}`;
httpReq.open('GET', `http://localhost:3000/api/submit?${formData}`);

Server-side parameter reception:

app.get('/api/submit', (req, res) => {
    res.send(req.query); // Query parameters object
});

POST Requests

POST requests embed parameters in request body rather than URL:

const payload = `username=${usernameInput.value}&email=${emailInput.value}`;

httpReq.open('POST', 'http://localhost:3000/api/submit');
httpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpReq.send(payload);

Server configuration for POST data:

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/api/submit', (req, res) => {
    res.send(req.body); // Parsed form data
});

JSON Format Requests

For JSON data transmission:

const jsonData = {
    username: usernameInput.value,
    email: emailInput.value
};

httpReq.open('POST', 'http://localhost:3000/api/json');
httpReq.setRequestHeader('Content-Type', 'application/json');
httpReq.send(JSON.stringify(jsonData));

Legacy Response Handling

The deprecated onreadystatechange event monitors state changes:

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

State codes represent different phases:

• 0: Uninitialized (before open() call)
• 1: Opened (open() called, send() not called)
• 2: Sent (send() called, headers received)
• 3: Loading (response in progress)
• 4: Complete (response finished)

Error Management

Different error scenarios require specific handling approaches:

Network success with unexpected server responses:

httpReq.onload = function() {
    if (httpReq.status >= 200 && httpReq.status < 300) {
        // Success case
    } else {
        // Handle server errors
        console.error('Request failed:', httpReq.status);
    }
}

Network failure handling:

httpReq.onerror = function() {
    console.log('Network connection lost');
}

HTTP status codes indicate processing results, while AJAX ready states show request progression.

Synchronous vs Asynchronous Execution

Synchronous code executes line-by-line sequentially:

console.log('First');
console.log('Second');

Asynchronous operations allow non-blocking execution:

console.log('First');
setTimeout(() => {
    console.log('Third');
}, 2000);
console.log('Second');

Code Abstraction

Multiple request implementations create redundancy. Function encapsulation addresses this:

function makeRequest(method, url, data, callback) {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    
    xhr.onload = function() {
        if (xhr.status === 200) {
            callback(null, JSON.parse(xhr.responseText));
        } else {
            callback(new Error('Request failed'));        
        }
    };
    
    xhr.send(data ? JSON.stringify(data) : null);
}