Ajax Event Handling Process

2015-07-12

Ajax Event Handling Process

Ajax (Asynchronous JavaScript and XML) allows web pages to update content dynamically without reloading. Below is a step-by-step process for handling Ajax events.

  1. Write the Request Object Creation Function.
    Create a function that returns an XMLHttpRequest object when called. This object should be a global variable since the callback function needs to access it. Consider browser compatibility (e.g., use ActiveXObject for older IE).

  2. Establish the Event Handling Function.

    • Call the request object creation function to create the request object.
    • Set the request object properties (e.g., method, URL).
    • Set the callback function.
    • Initiate the request.

  3. Establish the Callback Function.

    • Write the callback logic, such as updating CSS properties or setting innerHTML based on the response.

  4. Set Up Event Listening.

    • After the page loads, attach an event listener to a DOM element, setting it to the event handling function from step 2.

Example Code

Here’s a basic example of Ajax event handling:

// Step 1: Create XMLHttpRequest object (with browser compatibility)
function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

// Global request object
var xhr = createXHR();

// Step 2: Event handling function
function handleAjaxRequest() {
    xhr.open("GET", "https://api.example.com/data", true);
    xhr.onreadystatechange = callbackFunction;
    xhr.send();
}

// Step 3: Callback function
function callbackFunction() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById("result").innerHTML = xhr.responseText;
    }
}

// Step 4: Set up event listener
window.onload = function() {
    document.getElementById("myButton").addEventListener("click", handleAjaxRequest);
};

Important Notes

  • Modern Alternatives: For new projects, consider using fetch() API or libraries like Axios for simpler and more powerful Ajax handling.
  • Error Handling: Always check xhr.status and handle errors in the callback.
  • Security: Be cautious with CORS (Cross-Origin Resource Sharing) and validate inputs.
  • Async vs Sync: Use asynchronous requests (true in open()) to avoid blocking the UI.
  • JSON Handling: If the response is JSON, parse it with JSON.parse(xhr.responseText).

Resources