Blog

AJAX এবং XMLHttpRequest: একটি পরিষ্কার ও প্রফেশনাল টিউটোরিয়াল

AJAX (Asynchronous JavaScript and XML) হল এমন একটি কৌশল যার মাধ্যমে ওয়েব পেজ রিফ্রেশ না করেই ব্যাকএন্ড সার্ভার থেকে ডাটা লোড অথবা পাঠানো যায়। এর জন্য XMLHttpRequest একটি মূল JavaScript অবজেক্ট যা সার্ভার-এর সঙ্গে কমিউনিকেশন করে।

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

1. ইউজার একটি ইভেন্ট ট্রিগার করে (যেমনঃ বাটনে ক্লিক)
2. JavaScript একটি XMLHttpRequest অবজেক্ট তৈরি করে
3. সার্ভারের সাথে GET বা POST রিকুয়েস্ট পাঠানো হয়
4. সার্ভার থেকে রেসপন্স পাওয়া গেলে তা প্রসেস করে পেজে দেখানো হয়

ছোট একটি GET রিকুয়েস্ট উদাহরণ:

// HTML:
<button onclick="loadData()">ডাটা লোড করুন</button>
<div id="output"></div>

// JavaScript:
function loadData() {
  var xhr = new XMLHttpRequest(); // 1. অবজেক্ট তৈরি
  xhr.open("GET", "demo.txt", true); // 2. রিকুয়েস্ট ওপেন
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) { // 3. রেসপন্স রেডি
      document.getElementById("output").innerHTML = xhr.responseText;
    }
  };
  xhr.send(); // 4. রিকুয়েস্ট পাঠানো
}
    

ব্যাখ্যা:

• XMLHttpRequest() অবজেক্ট তৈরি করে
• open() দিয়ে HTTP রিকুয়েস্ট সেট করে
• onreadystatechange ইভেন্টে রেসপন্স চেক করা হয়
• send() দিয়ে রিকুয়েস্ট সার্ভারে পাঠানো হয়

POST রিকুয়েস্টের ছোট উদাহরণ:

function sendData() {
  var xhr = new XMLHttpRequest();
  var params = "name=Hasan&age=25";

  xhr.open("POST", "submit.php", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      alert("Server response: " + xhr.responseText);
    }
  };
  xhr.send(params);
}
    

কোড ব্যাখ্যা:

• POST রিকুয়েস্ট তৈরি হয়েছে
• setRequestHeader() দিয়ে কনটেন্ট টাইপ সেট করা হয়েছে
• ডাটা সার্ভারে পাঠানো হয়েছে send() ব্যবহার করে

XMLHttpRequest এর ৫টি গুরুত্বপূর্ণ প্রপার্টি:

✅ সারাংশ (Summary)

AJAX এবং XMLHttpRequest দিয়ে আপনি ক্লায়েন্ট সাইড থেকে সার্ভারে ডাটা পাঠানো, ফেচ করা এবং সেটি পেজে দেখানো — সব কিছু রিফ্রেশ ছাড়াই করতে পারবেন। এটি ওয়েব অ্যাপ্লিকেশনকে আরও ডাইনামিক এবং ইন্টারেক্টিভ করে তোলে।