Theory
Eight seconds to update one number
FestConnect's registration page shows Seats left: 350. To refresh that ONE number, the current design reloads the ENTIRE page: on hostel wifi, 8 seconds of white screen, and the half-typed form is wiped.
Meanwhile you have used apps that never do this: a cricket score ticks over, a chat message lands, Gmail marks a mail read: no reload anywhere.
The technique behind that smoothness has a name from 2005: AJAX, and it is this unit.
Theory
Rebuilding the shop vs sending a runner
The synchronous web is a shop that DEMOLISHES and rebuilds itself every time you ask the price of one item: everyone stands outside and waits.
The asynchronous web keeps the shop open and sends a runner to the godown for the answer. Customers keep browsing; when the runner returns, one price tag is quietly updated.
The runner has a name in the browser: the XMLHttpRequest object.
Theory
AJAX, formally
AJAX (Asynchronous JavaScript And XML) is a web development technique for exchanging data with a server in the background and updating parts of a page without a full reload.
It is NOT a language and NOT a library: it combines things you already hold:
- HTML/CSS: the page being updated
- JavaScript + DOM: the code that asks, and the tree it updates
- XMLHttpRequest: the browser object that carries requests (next 2 lessons)
- XML or JSON: the data's costume: despite the name's X, today it is usually JSON
At a glance
Synchronous vs asynchronous web application
| Aspect | Synchronous (classic) | Asynchronous (AJAX) |
|---|---|---|
| Request | Whole page, via form submit or link | Background, via XMLHttpRequest |
| While waiting | Browser frozen, white screen | User keeps working |
| Response | A complete new HTML page | Just data (JSON/XML/text) |
| Update | Everything re-rendered | Only the affected DOM part |
| Cost | Heavy: full page each time | Light: a few hundred bytes |
| Feel | Click, wait, flicker | Instant, app-like |
Practical
The seat counter goes live (complete page)
<!DOCTYPE html>
<html>
<head>
<script>
function refreshSeats() {
var xhr = new XMLHttpRequest(); // the runner
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById("seats").innerHTML = data.seats;
}
};
xhr.open("GET", "seats.json", true); // true = asynchronous
xhr.send(); // runner departs
} // page never reloads
</script>
</head>
<body>
<p>Seats left: <span id="seats">350</span></p>
<button onclick="refreshSeats()">Refresh count</button>
<input placeholder="Your name (survives the refresh!)">
</body>
</html>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
What exactly IS AJAX?
- A programming language for server communication
- A technique combining JavaScript, XMLHttpRequest and data formats to update pages without reloading
- A JavaScript library, like jQuery, loaded from a CDN
- A server technology that generates HTML faster
Show the answer
A technique combining JavaScript, XMLHttpRequest and data formats to update pages without reloading
AJAX is an approach: existing pieces (JS, the DOM, XMLHttpRequest, XML or JSON) arranged so data moves in the background and only part of the page updates. Option A is the most-marked wrong answer in this unit: nothing new is installed or compiled. Option C confuses it with libraries that merely WRAP the technique (jQuery has AJAX helpers). Option D points at the wrong side of the wire: AJAX is a browser-side technique; the server just answers requests as always: smaller ones, more often.
Think first
Where does the A actually live?
The A stands for Asynchronous. Looking at the listing, identify: which single argument makes the request asynchronous, and what does the user-visible experience owe to it? Recall the jQuery effects lesson before tapping.
Show the answer
The true in xhr.open("GET", "seats.json", true). Asynchronous means send() returns immediately and the response arrives LATER, announced through the onreadystatechange handler: meanwhile the user types, scrolls, clicks: nothing freezes, and the half-filled name field survives. This is precisely the async model you met with fadeOut and its callback: start the work, continue the code, handle completion in a function. Effects animated in the background; AJAX fetches in it: one mental model, now carrying data.
Watch out
Name-induced confusions
The X misleads: XML is in the name for historical reasons; modern AJAX overwhelmingly carries JSON (which is why Unit 3 came first). Write that awareness and gain the mark.
Asynchronous does not mean instant: the network still takes its time; async means the user is not HELD HOSTAGE while it does.
AJAX is not jQuery: jQuery offers convenient wrappers, but this syllabus examines the raw XMLHttpRequest, and the raw object is what the next 2 lessons dissect.
Theory
The pipeline closes its loop
Look at the listing's handler line by line: responseText arrives (this unit), JSON.parse decodes it (Unit 3), the DOM updates (Units 2 and BCA305-01): every earlier unit is a stage of this one pipe. What remains is mastering the runner itself: its 4 properties (including the famous readyState 0 to 4) next lesson, its 3 methods after that, and the full architecture diagram to close the unit.
Summary
Key takeaways
- AJAX = Asynchronous JavaScript And XML: a technique, not a language or library.
- Ingredients: HTML/CSS + JavaScript/DOM + XMLHttpRequest + a data format (XML historically, JSON today).
- Synchronous apps freeze and reload whole pages; asynchronous apps fetch in the background and update parts.
- The user keeps working while the request runs: that is the A.
- The XMLHttpRequest object is the browser's runner for these background requests.
- Benefits: no reload, no flicker, preserved form state, less bandwidth, app-like feel.
- Memory hook: send a runner, do not rebuild the shop.