Blog

AJAX ও JavaScript – The XMLHttpRequest Object

AJAX মানে হলো Asynchronous JavaScript and XML, যা ওয়েব পেজকে রিলোড না করেই সার্ভারের সাথে ডেটা এক্সচেঞ্জ করতে সাহায্য করে। AJAX এর পেছনে সবচেয়ে গুরুত্বপূর্ণ অবজেক্ট হলো XMLHttpRequest। এই অবজেক্ট ব্যবহার করে আমরা সার্ভারের সাথে ডেটা পাঠাতে বা আনতে পারি পেইজ রিলোড ছাড়াই।

XMLHttpRequest কী?

XMLHttpRequest একটি বিল্ট-ইন JavaScript অবজেক্ট যা ক্লায়েন্ট সাইড স্ক্রিপ্ট থেকে সার্ভারে HTTP রিকোয়েস্ট পাঠাতে এবং রেসপন্স নিতে ব্যবহৃত হয়। এটি GET এবং POST উভয় পদ্ধতি সাপোর্ট করে।

XMLHttpRequest ব্যবহার করার ধাপসমূহ:

একটি সিম্পল AJAX উদাহরণ:

HTML Code:

JavaScript Code:

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

• XMLHttpRequest() দিয়ে একটি রিকোয়েস্ট অবজেক্ট তৈরি করা হয়।
• onreadystatechange হল একটি ইভেন্ট হ্যান্ডলার যা সার্ভারের রেসপন্স আসলে কাজ করে।
• readyState == 4 মানে রিকোয়েস্ট সম্পূর্ণ হয়েছে।
• status == 200 মানে রিকোয়েস্ট সফল হয়েছে।
• open() method দিয়ে GET মেথড এবং ফাইলের নাম দিয়ে সংযোগ তৈরি করা হয়।
• send() method দিয়ে রিকোয়েস্ট পাঠানো হয়।

POST মেথডের ব্যবহার:

POST রিকোয়েস্ট পাঠানোর কোড:

এখানে setRequestHeader() method ব্যবহার করে Content-Type নির্ধারণ করা হয়, এবং send() method এ ডেটা পাঠানো হয় সার্ভারে।

AJAX ব্যবহারে সুবিধাসমূহ:

• ওয়েবপেজ রিলোড ছাড়া ডেটা আপডেট করা যায়।
• ইউজার এক্সপেরিয়েন্স বাড়ায়।
• সার্ভারের সাথে দ্রুত যোগাযোগ করা যায়।
• কম ব্যান্ডউইথ খরচ হয়।

// HTML Button
<button onclick="loadData()">Load User</button>

// JavaScript Function
function loadData() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "data.json", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText);
      document.getElementById("result").innerHTML =
        "<strong>Name:</strong> " + response.name + "<br>" +
        "<strong>Age:</strong> " + response.age;
    }
  };
  xhr.send();
}
    

function sendData() {
  var xhr = new XMLHttpRequest();
  var data = "name=Arif&age=30";

  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("Data saved: " + xhr.responseText);
    }
  };
  xhr.send(data);
}