Ajax এর মাধ্যমে Request এবং Response Handling হলো ওয়েব সার্ভার এবং ক্লায়েন্ট (ব্রাউজার) এর মধ্যে ডেটা আদান-প্রদানের একটি প্রক্রিয়া। Ajax রিকোয়েস্টের মাধ্যমে সার্ভারে তথ্য পাঠানো হয় এবং সার্ভার থেকে প্রাপ্ত রেসপন্স ডেটা প্রসেস করা হয়। XMLHttpRequest অবজেক্ট ব্যবহার করে এই প্রক্রিয়াটি সম্পন্ন করা হয়। নিচে Request এবং Response Handling এর বিস্তারিত আলোচনা এবং উদাহরণ তুলে ধরা হলো।
Request Handling:
Request Handling হলো সেই প্রক্রিয়া, যেখানে একটি Ajax রিকোয়েস্ট সার্ভারে পাঠানো হয় এবং এই রিকোয়েস্টটি কীভাবে সেটআপ এবং পরিচালনা করা হয়।
ধাপগুলো:
১. XMLHttpRequest অবজেক্ট তৈরি করা:
- JavaScript এর মাধ্যমে একটি
XMLHttpRequestঅবজেক্ট তৈরি করা হয়, যা Ajax রিকোয়েস্ট পরিচালনা করবে।
var xhr = new XMLHttpRequest();২. রিকোয়েস্ট ওপেন করা:
open()মেথড ব্যবহার করে HTTP মেথড (যেমন GET বা POST), সার্ভারের URL এবং অ্যাসিনক্রোনাস বা সিঙ্ক্রোনাস সেট করা হয়।
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);৩. রিকোয়েস্ট হেডার সেট করা (ঐচ্ছিক):
- যদি POST রিকোয়েস্ট হয়, তবে
setRequestHeader()মেথড ব্যবহার করে কনটেন্ট টাইপ বা অন্যান্য হেডার সেট করা হয়।
xhr.setRequestHeader("Content-Type", "application/json");৪. রিকোয়েস্ট পাঠানো:
send()মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়।
xhr.send();- POST রিকোয়েস্টের ক্ষেত্রে ডেটা প্যারামিটার হিসেবে
send()এ পাঠানো হয়।
Response Handling:
Response Handling হলো সেই প্রক্রিয়া, যেখানে সার্ভার থেকে প্রাপ্ত রেসপন্স ডেটা প্রসেস করা হয় এবং UI বা HTML DOM আপডেট করা হয়।
ধাপগুলো:
১. onreadystatechange ইভেন্ট হ্যান্ডলার সেট করা:
- রিকোয়েস্টের অবস্থা পরিবর্তন হলে
onreadystatechangeইভেন্ট হ্যান্ডলার ট্রিগার হয়।
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
// রেসপন্স প্রসেস করা
}
};
readyStateএবংstatusব্যবহার করে চেক করা হয় যে রিকোয়েস্ট সম্পূর্ণ এবং সফল হয়েছে কিনা।readyState === 4নির্দেশ করে রিকোয়েস্ট সম্পূর্ণ।status === 200নির্দেশ করে রিকোয়েস্ট সফল।
২. রেসপন্স ডেটা প্রসেস করা:
- যদি রিকোয়েস্ট সফল হয়, তবে
responseTextবাresponseXMLব্যবহার করে ডেটা রিসিভ করা হয় এবং প্রসেস করা হয়।
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
responseTextব্যবহার করে প্লেইন টেক্সট বা JSON ডেটা রিসিভ করা যায়।- যদি XML ফরম্যাটের ডেটা আসে, তবে
responseXMLব্যবহার করা হয়।
৩. HTML DOM আপডেট করা:
- প্রাপ্ত ডেটা ব্যবহার করে HTML DOM এ পরিবর্তন আনা হয়, যেমন নতুন কন্টেন্ট যোগ করা বা বিদ্যমান কন্টেন্ট আপডেট করা।
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
এরর হ্যান্ডলিং:
- যদি রিকোয়েস্ট ব্যর্থ হয় (যেমন
status২০০ না হয়), তবে একটি এরর মেসেজ বা লজিক্যাল এক্সেপশন হ্যান্ডল করা হয়।
if (xhr.readyState === 4 && xhr.status !== 200) {
console.error("Request failed with status: " + xhr.status);
}
সম্পূর্ণ উদাহরণ: Request এবং Response Handling
function fetchData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// রিকোয়েস্ট ওপেন করা (GET মেথড, URL এবং অ্যাসিনক)
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ
if (xhr.status === 200) { // রিকোয়েস্ট সফল
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else {
// এরর হ্যান্ডলিং
document.getElementById("data-container").innerHTML = "Error loading data!";
}
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
এই উদাহরণে কী হচ্ছে:
- রিকোয়েস্ট পাঠানো:
fetchData()ফাংশন কল করলে একটি GET রিকোয়েস্ট তৈরি হয় এবংhttps://jsonplaceholder.typicode.com/posts/1থেকে ডেটা ফেচ করা হয়।
- রেসপন্স হ্যান্ডলিং:
- রিকোয়েস্ট সফল হলে (status 200), JSON ডেটা প্রসেস করা হয় এবং HTML পেজে ইনজেক্ট করা হয়।
- যদি কোনো এরর হয়, তবে একটি এরর মেসেজ দেখানো হয়।
সারসংক্ষেপ:
- Request Handling: Ajax রিকোয়েস্ট সেটআপ ও সার্ভারে পাঠানোর প্রক্রিয়া।
- Response Handling: সার্ভার থেকে প্রাপ্ত ডেটা প্রসেস ও HTML আপডেট করার প্রক্রিয়া।
এই ধাপগুলোর মাধ্যমে Ajax এর Request এবং Response Handling সম্পন্ন করা হয়, যা ওয়েব পেজকে ডায়নামিক এবং ইন্টারেক্টিভ করে তোলে।
Read more
