Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Apply conventions that keep AJAX code reliable.
AJAX Best Practices is easiest to learn by reading the example, changing it, and observing the result.
// Good habits:
// - Always check response.ok before reading the body
// - Parse the body only once (.json() consumes the stream)
// - Cancel stale requests with AbortController
// - Debounce typing-driven requests
// - Run independent requests with Promise.all
const res = await fetch('/api/lessons');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();Practice the AJAX Best Practices example in a small scratch file, then explain what changed and why.