AJAX Introduction

🚀 What is AJAX?

AJAX (Asynchronous JavaScript and XML) allows web pages to update content without reloading the entire page. It makes websites faster and more interactive!


// Simple AJAX example
function loadContent() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'data.txt', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            document.getElementById('content').innerHTML = xhr.responseText;
        }
    };
    xhr.send();
}

What happens:

✅ Page stays the same

✅ Only specific content updates

✅ No page refresh needed

Key AJAX Concepts

⚡

Asynchronous

Code runs in background without blocking

// Non-blocking request
xhr.send(); // Continues immediately

🔄

No Page Reload

Update parts of page dynamically

// Update specific element
element.innerHTML = response;

📡

Server Communication

Send and receive data from server

// GET data from server
xhr.open('GET', 'api/data.json');

🎯

Better User Experience

Faster, smoother interactions

// Instant content updates
showLoading(); // Show spinner
loadData(); // Get new data

🔹 How AJAX Works

AJAX follows a simple process:

AJAX Process:

Create XMLHttpRequest: Make a request object
Open Connection: Specify URL and method
Set Handler: Define what happens when response arrives
Send Request: Send the request to server
Handle Response: Process the returned data

// Step-by-step AJAX
// 1. Create request object
const xhr = new XMLHttpRequest();

// 2. Open connection
xhr.open('GET', 'welcome.txt', true);

// 3. Set response handler
xhr.onload = function() {
    if (xhr.status === 200) {
        // 5. Handle response
        document.getElementById('demo').innerHTML = xhr.responseText;
    }
};

// 4. Send request
xhr.send();

🔹 Simple AJAX Example

Let's create a basic AJAX request to load text:

<!-- HTML -->
<button onclick="loadText()">Load Content</button>
<div id="result">Content will appear here...</div>

<script>
function loadText() {
    const xhr = new XMLHttpRequest();
    
    xhr.open('GET', 'sample.txt', true);
    
    xhr.onload = function() {
        if (xhr.status === 200) {
            document.getElementById('result').innerHTML = xhr.responseText;
        } else {
            document.getElementById('result').innerHTML = 'Error loading content';
        }
    };
    
    xhr.send();
}
</script>

Interactive Demo:

Content will appear here...

🔹 Why Use AJAX?

AJAX provides many benefits for modern web applications:

✅ Benefits:

Faster Loading: Only update what's needed
Better UX: No page flicker or reload
Reduced Bandwidth: Transfer less data
Interactive Apps: Real-time updates possible
Modern Feel: Like desktop applications

📱 Common Uses:

Loading new posts on social media
Auto-complete search suggestions
Submitting forms without page reload
Live chat applications
Dynamic content loading