The Old NetISSUE #58 of 60

ajax · the leap to fetching without reload

Pixel PeteVSQuirks Mode

Pixel Pete saysAJAX let pages fetch data and update without a full reload — the leap beyond classic DHTML.

AJAX (Asynchronous JavaScript and XML) — originally XMLHttpRequest, now fetch — let a page request data in the background and update part of the DOM, no page refresh. Despite the name, JSON replaced XML as the payload. This was the breakthrough that turned static documents into interactive applications (Gmail, Maps) and set the stage for SPAs.

Power-ups you unlock

Fetch data in the background, update part of the page
XMLHttpRequest then fetch
JSON replaced XML as the payload
Turned documents into web apps

Quirks Mode attacks — common mistakes

Still calling it "AJAX with XML" (it’s JSON now)
Full reloads where a fetch+patch would do
No loading/error states around requests

Boss battleSketch a fetch that loads JSON and updates a single element without a reload.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>// AJAX, modern form:
const res = await fetch('/api/data');
const data = await res.json();
document.getElementById('out').textContent = data.value;
// only that element updates — no reload</pre></body></html>

▶ Open the interactive comic issue

‹ Accordion · Tabs · The Classic Widgets Why Dhtml Became Invisible · Frameworks Ate It ›