Why should you care?

Gmail-style apps update parts of the page while you keep scrolling.

See it live — copy this example

Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.

// Modern AJAX with fetch
async function loadUser(id) {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error("Failed");
  return res.json();
}

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• fetch is the AJAX transport.
• You update the DOM when data returns.

Practice next

1. Load JSONPlaceholder users into a list element.
2. Show "Loading…" text before fetch and clear after.
3. Handle errors with try/catch and user message.
4. Append new rows to a tbody instead of replacing the whole page.
5. Debounce search input before AJAX filter requests.

Remember

AJAX = async data + partial UI update fetch is modern AJAX Update DOM when data arrives

ScriptVerse admin search

Typing in user search triggers AJAX fetch and replaces table rows without reloading the admin shell.

Outcome: Partial updates keep admin panels fast and familiar like Gmail-style apps.