Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Load view data on navigation without full reloads.
AJAX in Single-Page Apps is easiest to learn by reading the example, changing it, and observing the result.
async function loadLessons() {
const response = await fetch('/api/lessons', {
headers: { 'Accept': 'application/json' }
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return response.json();
}
loadLessons()
.then(lessons => console.log(lessons))
.catch(error => console.error('Failed to load:', error.message));Practice the AJAX in Single-Page Apps example in a small scratch file, then explain what changed and why.