AJAX পরিচিতি

AJAX কী?

AJAX (Asynchronous JavaScript and XML) হলো একটি টেকনিক যার মাধ্যমে ওয়েবপেজ রিলোড না করেই সার্ভার থেকে ডেটা আনা বা পাঠানো যায়।

💡 আজকের ওয়েবে "XML" এর জায়গায় সবাই JSON ব্যবহার করে, কিন্তু নাম AJAX-ই রয়ে গেছে।

AJAX কী করতে পারে?

• Page refresh ছাড়া ডেটা লোড (Facebook news feed)
• Live search suggestions (Google)
• Infinite scroll (Instagram, Twitter)
• Form submit ছাড়া validation
• Real-time notifications
• Chat applications

AJAX কীভাবে কাজ করে?

১. User একটি action করে (click/type)
২. JavaScript background-এ server-কে request পাঠায়
৩. Server JSON/HTML response ফেরত পাঠায়
৪. JavaScript DOM update করে — পেজ reload না করে!

AJAX করার ৩টি উপায়

1. XMLHttpRequest — পুরনো, verbose
2. fetch() — আধুনিক, Promise-based ⭐
3. jQuery $.ajax() — legacy, সহজ

১. XMLHttpRequest (XHR) — পুরনো পদ্ধতি

const xhr = new XMLHttpRequest();

xhr.open("GET", "https://api.example.com/users", true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {      // DONE
        if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            console.log(data);
        } else {
            console.error("Error:", xhr.status);
        }
    }
};

xhr.send();

readyState এর অর্থ

• 0 — UNSENT
• 1 — OPENED
• 2 — HEADERS_RECEIVED
• 3 — LOADING
• 4 — DONE ✅

POST Request (XHR)

const xhr = new XMLHttpRequest();
xhr.open("POST", "/api/users", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function() {
    if (xhr.status === 201) {
        console.log("তৈরি হয়েছে:", xhr.responseText);
    }
};

const data = JSON.stringify({ name: "করিম", age: 25 });
xhr.send(data);

আধুনিক বিকল্প — fetch API ⭐

// একই কাজ fetch দিয়ে (অনেক ছোট)
fetch("https://api.example.com/users")
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

পরবর্তী টপিকে fetch বিস্তারিত দেখব।