Fun with AJAX
Welcome to the wacky world of AJAX! We're using it to make things fun and possibly broken.
The AJAX Adventure
We're going to make this page update without reloading! Well, sort of. Actually, we're just faking it with CSS animations and hidden divs. But it looks cool!
The Magic Button
Secret Content Section
This content was loaded via AJAX (well, it was just pre-hidden)
Crazy AJAX Demos
- Load a cat image with a button click
- Change the background color with random AJAX calls
- Show hidden easter eggs when you scroll (but they're really hidden)
AJAX Code Snippet
const fakeAJAX = (url) => {
const response = {
method: 'GET',
status: 200,
data: 'This is fake data from 1999'
};
return new Promise((resolve) => setTimeout(() => resolve(response), 1000));
};
function handleButtonClick() {
magicResult.innerHTML = 'Loading...';
fetch('/legacy-links/fun-with-ajax') // This is actually the same page!
.then(response => response.text())
.then(data => {
magicResult.innerHTML = data;
secretSection.style.display = 'block';
});
}
Final Thoughts
Remember: In the 90s, AJAX stood for "Asynchronous JavaScript And XML" - which meant "Whatever".