XMLHttpRequest অবজেক্ট হলো Ajax এর একটি মূল উপাদান এবং এটি JavaScript API এর একটি অংশ, যা ব্রাউজার এবং ওয়েব সার্ভারের মধ্যে ডেটা এক্সচেঞ্জ করতে ব্যবহৃত হয়। এটি Ajax রিকোয়েস্ট তৈরি ও পরিচালনার জন্য ব্যবহৃত হয়, যা ওয়েব পেজকে পেজ রিলোড ছাড়াই ডায়নামিকভাবে আপডেট করতে সক্ষম করে। নিচে XMLHttpRequest অবজেক্টের ভূমিকা এবং কাজের প্রক্রিয়া নিয়ে বিস্তারিত আলোচনা করা হলো:
XMLHttpRequest এর ভূমিকা:
১. অ্যাসিনক্রোনাস ডেটা এক্সচেঞ্জ:
XMLHttpRequestঅবজেক্ট অ্যাসিনক্রোনাস পদ্ধতিতে (Asynchronous) সার্ভারের সাথে ডেটা আদান-প্রদান করতে সক্ষম। এর ফলে, ওয়েব পেজ রিফ্রেশ না করেই পেজে নতুন ডেটা আপডেট করা যায়।- অ্যাসিনক রিকোয়েস্টের মাধ্যমে, ইউজার ইন্টারফেস (UI) প্রতিক্রিয়াশীল থাকে এবং ব্যবহারকারীরা তাদের কাজ চালিয়ে যেতে পারে, যখন সার্ভারের সাথে যোগাযোগ চলছে।
২. HTTP রিকোয়েস্ট পরিচালনা:
XMLHttpRequestঅবজেক্ট বিভিন্ন HTTP মেথড (যেমন: GET, POST, PUT, DELETE) ব্যবহার করে সার্ভারের সাথে রিকোয়েস্ট পাঠাতে পারে।GETমেথড সাধারণত ডেটা আনার জন্য ব্যবহৃত হয়, এবংPOSTমেথড ডেটা সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়।
৩. সার্ভার রেসপন্স প্রসেস করা:
XMLHttpRequestঅবজেক্ট সার্ভার থেকে আসা রেসপন্স রিসিভ করতে এবং প্রসেস করতে ব্যবহৃত হয়। এটি JSON, XML, HTML বা প্লেইন টেক্সট ফরম্যাটে রেসপন্স হ্যান্ডেল করতে পারে।- JavaScript দিয়ে এই রেসপন্সকে প্রসেস করে HTML DOM আপডেট করা যায়।
৪. সিঙ্ক্রোনাস এবং অ্যাসিনক্রোনাস অপারেশন:
XMLHttpRequestঅবজেক্ট অ্যাসিনক্রোনাস রিকোয়েস্টের পাশাপাশি সিঙ্ক্রোনাস রিকোয়েস্টও (Synchronous) পরিচালনা করতে পারে। তবে সাধারণত Ajax রিকোয়েস্ট অ্যাসিনক্রোনাস পদ্ধতিতে করা হয়, কারণ এটি পেজের ইউজার এক্সপেরিয়েন্স উন্নত করে।
৫. এরর হ্যান্ডলিং:
XMLHttpRequestঅবজেক্টের মাধ্যমে রিকোয়েস্টের সময় কোনো এরর হলে, সেটি চেক করা এবং হ্যান্ডেল করা যায়। এর মাধ্যমে ডেভেলপাররা ইউজারদের সঠিক বার্তা প্রদর্শন করতে পারে বা উপযুক্ত অ্যাকশন নিতে পারে।
XMLHttpRequest অবজেক্টের কাজের ধাপ:
Ajax রিকোয়েস্ট করার জন্য XMLHttpRequest অবজেক্টের কাজের ধাপগুলো নিম্নে দেখানো হলো:
১. XMLHttpRequest অবজেক্ট তৈরি করা:
var xhr = new XMLHttpRequest();- এটি একটি
XMLHttpRequestঅবজেক্ট তৈরি করে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।
২. রিকোয়েস্ট সেটআপ করা:
xhr.open("GET", "https://example.com/api/data", true);open()মেথড ব্যবহার করে HTTP মেথড (যেমন: GET/POST) এবং URL সেট করা হয়।- তৃতীয় প্যারামিটার
trueবাfalseদিয়ে অ্যাসিনক্রোনাস বা সিঙ্ক্রোনাস সেট করা হয় (এখানেtrueমানে অ্যাসিনক্রোনাস)।
৩. রিকোয়েস্ট পাঠানো:
xhr.send();
send()মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়। যদি এটি একটি POST রিকোয়েস্ট হয়, তবেsend()মেথডে ডেটা প্যারামিটার হিসেবে পাঠানো হয়।
৪. রেসপন্স হ্যান্ডলিং:
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// রেসপন্স ডেটা প্রসেস করা
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};onreadystatechangeইভেন্ট হ্যান্ডলার ব্যবহার করে রিকোয়েস্টের অবস্থা চেক করা হয়।readyState === 4নির্দেশ করে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে, এবংstatus === 200নির্দেশ করে যে রিকোয়েস্ট সফল হয়েছে।- রেসপন্স পাওয়ার পর, তা প্রসেস করে DOM বা UI আপডেট করা যায়।
৫. এরর হ্যান্ডলিং (বিকল্প ধাপ):
onerrorইভেন্ট ব্যবহার করে, যদি রিকোয়েস্টের সময় কোনো সমস্যা হয়, তা হ্যান্ডেল করা যায় এবং উপযুক্ত বার্তা দেখানো যায়।
XMLHttpRequest এর উদাহরণ:
function fetchData() {
var xhr = new XMLHttpRequest(); // XMLHttpRequest অবজেক্ট তৈরি করা
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); // রিকোয়েস্ট সেটআপ করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
}
};
xhr.send(); // রিকোয়েস্ট পাঠানো
}
- এখানে
fetchData()ফাংশন একটি Ajax রিকোয়েস্ট পাঠায় এবং সার্ভার থেকে JSON ডেটা এনে তা HTML ডিভে ইনজেক্ট করে।
সারসংক্ষেপ:
- মূল কাজ:
XMLHttpRequestঅবজেক্ট Ajax রিকোয়েস্ট তৈরি, পরিচালনা এবং সার্ভারের রেসপন্স হ্যান্ডেল করতে ব্যবহৃত হয়। - HTTP রিকোয়েস্ট: GET, POST, PUT, DELETE মেথডের মাধ্যমে ডেটা আদান-প্রদান করা যায়।
- রেসপন্স হ্যান্ডলিং: সার্ভার থেকে রেসপন্স পাওয়ার পর, তা প্রসেস করে DOM বা UI আপডেট করা যায়।
- এরর ম্যানেজমেন্ট: Ajax রিকোয়েস্ট চলাকালীন কোনো সমস্যা হলে তা হ্যান্ডেল করা যায়।
XMLHttpRequest অবজেক্ট Ajax এর একটি গুরুত্বপূর্ণ উপাদান যা ওয়েব পেজকে ডায়নামিক, ইন্টারেক্টিভ এবং রেসপন্সিভ করতে ব্যবহৃত হয়।
Read more
