Ajax (Asynchronous JavaScript and XML) is a technique that allows web pages to communicate with servers asynchronously without reloading the entire page. This enables you to update parts of a web page dynamically, creating faster and more responsive web applications.

Basic Example: Simple GET Request

// Create XMLHttpRequest object
const xhr = new XMLHttpRequest();

// Configure the request
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

// Define what happens on successful data retrieval
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log('Response:', JSON.parse(xhr.responseText));
        document.getElementById('result').innerHTML = xhr.responseText;
    }
};

// Define what happens in case of an error
xhr.onerror = function() {
    console.error('Request failed');
};

// Send the request
xhr.send();

XMLHttpRequest Object Methods

XMLHttpRequest Object Properties

The onload Property

Method	Description	Example
open(method, url, async)	Initializes a request. Parameters: HTTP method, URL, async (true/false).	`xhr.open('GET', 'api/data', true)`
send(body)	Sends the request to the server. Optional body for POST/PUT requests.	`xhr.send()` or `xhr.send(JSON.stringify(data))`
abort()	Aborts the request if it has already been sent.	`xhr.abort()`
setRequestHeader(header, value)	Sets the value of an HTTP request header. Must be called after open() but before send().	`xhr.setRequestHeader('Content-Type', 'application/json')`
getResponseHeader(header)	Returns the string containing the text of the specified header.	`xhr.getResponseHeader('Content-Type')`
getAllResponseHeaders()	Returns all response headers as a string.	`xhr.getAllResponseHeaders()`
overrideMimeType(mimeType)	Overrides the MIME type returned by the server.	`xhr.overrideMimeType('text/xml')`

Property	Description	Common Values
readyState	Current state of the request	0: UNSENT, 1: OPENED, 2: HEADERS_RECEIVED, 3: LOADING, 4: DONE
status	HTTP status code from the server	200: OK, 404: Not Found, 500: Server Error
statusText	HTTP status text	"OK", "Not Found", "Internal Server Error"
responseText	Response data as a string	`'{"id":1,"title":"Hello"}'`
responseXML	Response data as XML document	XML document object or null
responseType	Defines the response type	"", "text", "json", "blob", "arraybuffer", "document"
response	Response body according to responseType	Depends on responseType
timeout	Request timeout in milliseconds	`xhr.timeout = 5000`
withCredentials	Whether to include cookies in cross-origin requests	`xhr.withCredentials = true`

The onload event handler is triggered when the request completes successfully (regardless of HTTP status code). It's a modern, cleaner alternative to onreadystatechange.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'api/data.json', true);

xhr.onload = function() {
    console.log('Request completed!');
    console.log('Status:', xhr.status);
    console.log('Ready state:', xhr.readyState);

    if (xhr.status >= 200 && xhr.status < 300) {
        // Success! Parse the response
        const data = JSON.parse(xhr.responseText);
        console.log('Data:', data);
    } else {
        // Handle HTTP errors (404, 500, etc.)
        console.error('Error:', xhr.statusText);
    }
};

xhr.send();

Multiple Callback Functions

You can attach multiple event handlers to handle different aspects of the request:

function loadUsers() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);

    // 1. onload - When request completes
    xhr.onload = function() {
        console.log('Request completed with status:', xhr.status);

        if (xhr.status === 200) {
            const users = JSON.parse(xhr.responseText);
            displayUsers(users);
        }
    };

    // 2. onerror - When request fails
    xhr.onerror = function() {
        console.error('Network error occurred');
        showErrorMessage('Network error. Please check your connection.');
    };

    // 3. ontimeout - When request times out
    xhr.ontimeout = function() {
        console.error('Request timed out');
        showErrorMessage('Request took too long. Please try again.');
    };

    // 4. onprogress - Track progress (for large responses)
    xhr.onprogress = function(event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            updateProgressBar(percentComplete);
        }
    };

    // 5. onloadstart - When request starts
    xhr.onloadstart = function() {
        console.log('Request started');
        showLoadingSpinner();
    };

    // 6. onloadend - When request finishes (success or error)
    xhr.onloadend = function() {
        console.log('Request finished');
        hideLoadingSpinner();
    };

    // Set timeout to 10 seconds
    xhr.timeout = 10000;

    xhr.send();

    // Helper functions
    function displayUsers(users) {
        const userList = document.getElementById('userList');
        users.forEach(user => {
            const li = document.createElement('li');
            li.textContent = user.name;
            userList.appendChild(li);
        });
    }

    function updateProgressBar(percent) {
        document.getElementById('progressBar').style.width = percent + '%';
    }
}

The onreadystatechange Property

The onreadystatechange event handler is triggered every time the readyState property changes. It's the traditional way to handle Ajax responses.

Ready States Explained:

Example using onreadystatechange:

Value	State	Description
0	UNSENT	Client created, open() not called
1	OPENED	open() has been called
2	HEADERS_RECEIVED	send() has been called, headers and status available
3	LOADING	Downloading, responseText holds partial data
4	DONE	Operation complete

function fetchData() {
    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        console.log(`ReadyState changed to: ${xhr.readyState}`);

        switch(xhr.readyState) {
            case 1: // OPENED
                console.log('Request opened');
                break;

            case 2: // HEADERS_RECEIVED
                console.log('Headers received');
                console.log('Status:', xhr.status);
                break;

            case 3: // LOADING
                console.log('Loading response...');
                if (xhr.responseText) {
                    console.log('Partial data received:', xhr.responseText.length, 'bytes');
                }
                break;

            case 4: // DONE
                console.log('Request complete');

                if (xhr.status === 200) {
                    // Success!
                    try {
                        const data = JSON.parse(xhr.responseText);
                        console.log('Data received:', data);
                        processData(data);
                    } catch (e) {
                        console.error('Error parsing JSON:', e);
                    }
                } else {
                    // Handle errors
                    console.error('Request failed with status:', xhr.status);
                    handleError(xhr.status, xhr.statusText);
                }
                break;
        }
    };

    xhr.open('GET', 'api/data.json', true);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.send();
}

// Practical example: Complete Ajax Utility Function
function ajaxRequest(config) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();

        // Configure request
        xhr.open(config.method || 'GET', config.url, true);

        // Set headers if provided
        if (config.headers) {
            Object.keys(config.headers).forEach(key => {
                xhr.setRequestHeader(key, config.headers[key]);
            });
        }

        // Set timeout if provided
        if (config.timeout) {
            xhr.timeout = config.timeout;
        }

        // Handle response using onload (modern approach)
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                let response = xhr.responseText;

                // Parse JSON if content-type is JSON
                if (xhr.getResponseHeader('Content-Type')?.includes('application/json')) {
                    try {
                        response = JSON.parse(response);
                    } catch (e) {
                        reject(new Error('Invalid JSON response'));
                        return;
                    }
                }

                resolve({
                    data: response,
                    status: xhr.status,
                    statusText: xhr.statusText,
                    headers: xhr.getAllResponseHeaders()
                });
            } else {
                reject({
                    status: xhr.status,
                    statusText: xhr.statusText,
                    response: xhr.responseText
                });
            }
        };

        // Handle errors
        xhr.onerror = function() {
            reject(new Error('Network error'));
        };

        xhr.ontimeout = function() {
            reject(new Error('Request timeout'));
        };

        // Handle progress if callback provided
        if (config.onProgress) {
            xhr.onprogress = config.onProgress;
        }

        // Send request with data (if POST/PUT)
        if (config.data) {
            xhr.send(JSON.stringify(config.data));
        } else {
            xhr.send();
        }
    });
}

// Usage example:
async function getUsers() {
    try {
        const response = await ajaxRequest({
            method: 'GET',
            url: 'https://jsonplaceholder.typicode.com/users',
            timeout: 5000,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        });

        console.log('Users:', response.data);
        return response.data;
    } catch (error) {
        console.error('Failed to fetch users:', error);
        throw error;
    }
}

Key Differences: onload vs onreadystatechange

Best Practices

This comprehensive understanding of XMLHttpRequest will help you work with Ajax in JavaScript effectively, whether maintaining legacy code or understanding the foundation upon which modern APIs like Fetch are built.

Aspect	onload	onreadystatechange
When triggered	Only when request completes (readyState 4)	Every time readyState changes
Modern usage	Preferred for new code	Legacy approach, but still valid
Code clarity	Cleaner, focused on completion	Can be more complex
Error handling	Check status codes manually	Check status in readyState 4
Browser support	IE9+ (modern browsers)	All browsers including old IE

JavaScript Ajax: XMLHttpRequest Object Deep Dive

What is Ajax?