What is AJAX?

AJAX (Asynchronous JavaScript and XML) is a technique for exchanging data with the server in the background and updating part of a web page without reloading the whole page. Despite the name, it commonly uses JSON today instead of XML.

Components: HTML/CSS (presentation), DOM (dynamic updates), XMLHttpRequest or fetch() (asynchronous requests), JavaScript (logic), and JSON/XML (data format).

How it improves user experience

1. No full page reloads: only the changed part is refreshed, so the app feels fast and smooth.
2. Responsiveness: the user keeps working while data loads.
3. Less bandwidth: only the needed data travels, not the entire page.
4. Live features: auto-suggest search, form validation, chat, notifications, infinite scroll, live scores.
5. Desktop-like feel: enables single-page applications (Gmail, Google Maps).

Code example (fetch API)

<button id="load">Load user</button>
<div id="result"></div>

<script>
document.getElementById('load').addEventListener('click', async () => {
  const box = document.getElementById('result');
  box.textContent = 'Loading...';
  try {
    const res  = await fetch('https://jsonplaceholder.typicode.com/users/1');  // async request
    if (!res.ok) throw new Error('HTTP ' + res.status);
    const user = await res.json();                                             // parse JSON
    box.innerHTML = `<b>${user.name}</b><br>${user.email}`;                    // update the page
  } catch (err) {
    box.textContent = 'Error: ' + err.message;
  }
});
</script>

Classic version with XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.php?id=1', true);        // true = asynchronous
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    document.getElementById('result').innerHTML = xhr.responseText;
  }
};
xhr.send();

How the page is updated with the response

1. An event (click, keypress, timer) triggers a JavaScript function.
2. JavaScript sends an asynchronous request to the server (fetch/XMLHttpRequest).
3. The server processes it and returns data (JSON, XML, or HTML fragment).
4. A callback (or await) receives the response once it arrives; the page stays usable meanwhile.
5. JavaScript parses the data (res.json()) and modifies the DOM (textContent, innerHTML, appendChild) to show it.

Note: innerHTML with untrusted data risks XSS, so prefer textContent or sanitize the data.