Old Technologies (Legacy)

AJAX — XMLHttpRequest vs fetch

AJAX means loading data without reloading the whole page. XMLHttpRequest was the old tool; fetch is the modern replacement.

Real-life example: Old AJAX is like sending a letter and waiting weeks. fetch is like instant chat — same goal, faster and simpler today.

// OLD way — you may see this in legacy code
const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/courses");
xhr.onload = () => console.log(JSON.parse(xhr.responseText));
xhr.send();

// MODERN way — use fetch instead
fetch("/api/courses").then((r) => r.json()).then(console.log);

jQuery — what it was and why less needed now

jQuery (circa 2006) made DOM and AJAX easy when browsers behaved differently. Modern browsers are consistent — vanilla JS and frameworks replaced most jQuery.

Real-life example: jQuery was like a universal remote when every TV had different buttons. Today TVs (browsers) share one standard remote (modern JS).

// Legacy jQuery — still on some old sites
$("#submit-btn").click(function () {
  $(".message").text("Saved!").fadeIn();
});

// Same idea in modern vanilla JS
document.querySelector("#submit-btn").addEventListener("click", () => {
  const msg = document.querySelector(".message");
  msg.textContent = "Saved!";
  msg.style.opacity = "1";
});

JSONP — obsolete vs CORS

JSONP was a hack to load data from another domain before CORS existed. It wrapped JSON in a script tag callback. CORS and fetch made JSONP obsolete.

Real-life example: JSONP was shouting your order through a fence because the gate was locked. CORS is the gatekeeper who checks ID and lets safe requests through.

• JSONP — legacy cross-domain trick; security risks; avoid in new code.
• CORS — server sends headers like Access-Control-Allow-Origin.
• Modern APIs use fetch with proper CORS — no script-tag hacks.