Understanding AJAX: Principles, Form Submission, XMLHttpRequest, jQuery Implementation, Advantages and Disadvantages

Background : Traditional web pages reload the entire page when a form is submitted, causing long wait times, heavy server load, and large data transfers.

Problem : Improve user experience by avoiding full‑page reloads and reducing network overhead.

What is AJAX : AJAX stands for Asynchronous JavaScript and XML; it enables fast, dynamic web pages by exchanging small amounts of data with the server and updating only parts of the page without a full refresh.

Why AJAX is needed : It lets the browser continue to operate while the server processes a request, preventing the UI from becoming unresponsive.

Asynchronous concept : The page sends a request and does not wait for the response before allowing further user interaction.

Partial refresh methods : Two approaches are shown – using an <iframe> that reloads a sub‑page, and true AJAX updates that modify the DOM directly.

Iframe example :

<iframe id="indexFrame" name="index" width="1000" height="800" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" style="margin-top:100px;"></iframe>

JavaScript to change the iframe source:

var indexFrame = document.getElementById("indexFrame");
indexFrame.src = "introduction.php";

Button click handler to reload the iframe:

<button id="room" onclick='IndexClick("room")'>Click Me!</button>

function IndexClick(moduleKey) {
    var indexFrame = document.getElementById("indexFrame");
    if (indexFrame == null) {
        indexFrame = parent.document.getElementById("indexFrame");
    }
    var url = "introduction.php";
    switch (moduleKey) {
        case "introduction":
            url = "introduction.php";
            break;
        case "room":
            url = "room.php";
            break;
        default:
            break;
    }
    indexFrame.src = url;
}

AJAX request flow : client creates an XMLHttpRequest, opens a GET or POST request, sets callbacks, sends the request, the server processes it (often querying a database), returns a response, and the client updates the DOM based on xmlhttp.responseText .

Form submission principle : Example HTML form and C# handler are provided. The form posts to Test.ashx , the server reads fname from the request, waits two seconds, and returns Hello World <fname> . Deployment steps on IIS and test URLs are shown.

AJAX GET vs POST :

// GET example
function testGet() {
    var fname = document.getElementById("testGetName").value;
    xmlhttp.open("GET", "Test.ashx?fname=" + fname + "&random=" + Math.random(), true);
    xmlhttp.onreadystatechange = callback;
    xmlhttp.send(null);
}

// POST example
function testPost() {
    var fname = document.getElementById("testPostName").value;
    xmlhttp.open("POST", "Test.ashx?&random=" + Math.random(), true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
    xmlhttp.onreadystatechange = callback;
    xmlhttp.send("fname=" + fname);
}

Key differences: GET parameters appear in the URL, POST sends data in the request body, POST requires a Content‑Type header, and GET may expose sensitive data.

XMLHttpRequest object : Images (not reproduced here) illustrate its methods (e.g., open , send , setRequestHeader ) and properties (e.g., readyState , status , responseText ).

jQuery AJAX implementation :

function getWeeklyCalendar(name, currentDate, mode) {
    $.ajax({
        type: 'POST',
        url: 'weekProcess.php',
        data: 'func=getWeeklyCalender&name=' + name + '&currentDate=' + currentDate + '&mode=' + mode,
        success: function(data) {
            paintWeeklyCandler(data);
        }
    });
}

Server‑side PHP returns JSON data which is then rendered by paintWeeklyCandler .

Advantages of AJAX :

No full page reload – smoother user experience.

Data fetched on demand reduces server load.

Faster response to user interactions.

Based on widely supported standards; no plugins required.

Clear separation of presentation (JavaScript) and business logic (server).

Disadvantages of AJAX :

Exposes server endpoints, creating potential security risks.

Large amounts of JavaScript can be error‑prone.

Without visual cues, users may be confused about whether data is fresh.

Can interfere with the browser’s back button behavior.

Older mobile browsers may lack full support.

Applicable scenarios include data filtering, adding/removing tree nodes, editing table rows, dynamic dropdown changes, and username‑availability checks.

Non‑applicable scenarios are full‑page content saving and traditional navigation where a complete page refresh is required.