Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Avoid the pitfalls beginners hit most often.
Common AJAX Mistakes 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 Common AJAX Mistakes example in a small scratch file, then explain what changed and why.