Ajax এর মাধ্যমে সার্ভার থেকে ডেটা ফেচ করা হলো ওয়েব ডেভেলপমেন্টের একটি সাধারণ এবং গুরুত্বপূর্ণ প্রক্রিয়া। এই প্রক্রিয়ায় JavaScript ব্যবহার করে, সার্ভারের সাথে যোগাযোগ করা হয় এবং ডেটা রিসিভ করা হয়, যা পেজ রিলোড না করেই HTML ডকুমেন্টে আপডেট করা যায়। নিচে একটি উদাহরণসহ Ajax এর মাধ্যমে ডেটা ফেচ করার ধাপগুলি এবং তা কিভাবে কার্যকর করা যায়, তা ব্যাখ্যা করা হলো।
উদাহরণ: Ajax এর মাধ্যমে Server থেকে Data Fetch করা
১. HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Data Fetch Example</title>
</head>
<body>
<h1>Fetch Data Using Ajax</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- ফেচ করা ডেটা এখানে দেখানো হবে -->
</div>
<script src="app.js"></script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
- একটি HTML ফাইল তৈরি করা হয়েছে যেখানে একটি শিরোনাম (
<h1>) এবং একটি বোতাম (<button>) রয়েছে। - বোতামটিতে একটি
onclickইভেন্ট হ্যান্ডলার রয়েছে, যা বোতাম ক্লিক করার সময়fetchData()ফাংশন কল করবে। data-containerনামে একটি<div>রয়েছে যেখানে Ajax এর মাধ্যমে ফেচ করা ডেটা ডায়নামিকভাবে দেখানো হবে।
২. JavaScript (app.js):
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 ডেটা প্রসেস করা
// HTML ডকুমেন্টে ডেটা দেখানো
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else {
// যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
document.getElementById("data-container").innerHTML = "Error fetching data!";
}
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
বিস্তারিত ব্যাখ্যা:
- XMLHttpRequest অবজেক্ট তৈরি:
fetchData()ফাংশনের মধ্যে একটিXMLHttpRequestঅবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করতে ব্যবহৃত হয়।
- রিকোয়েস্ট সেটআপ করা:
xhr.open("GET", "URL", true)মেথড ব্যবহার করে আমরা একটি GET রিকোয়েস্ট সেটআপ করেছি, যা সার্ভারের URL থেকে ডেটা আনবে।"true"মানে এটি অ্যাসিনক্রোনাস পদ্ধতিতে কাজ করবে।
- onreadystatechange ইভেন্ট:
xhr.onreadystatechangeইভেন্ট হ্যান্ডলার ব্যবহার করে রিকোয়েস্টের অবস্থা চেক করা হয়েছে।- যদি
xhr.readyState === 4(রিকোয়েস্ট সম্পূর্ণ) এবংxhr.status === 200(রিকোয়েস্ট সফল) হয়, তখন JSON ডেটা প্রসেস করে HTML ডকুমেন্টেরdata-containerডিভে আপডেট করা হয়েছে। - অন্যথায়, যদি কোনো এরর হয়, তবে একটি এরর মেসেজ দেখানো হয়েছে।
- রিকোয়েস্ট পাঠানো:
xhr.send();মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।
৩. সার্ভার রেসপন্স:
এই উদাহরণে আমরা একটি ডেমো API (https://jsonplaceholder.typicode.com/posts/1) ব্যবহার করেছি, যা নিচের মতো JSON ডেটা রিটার্ন করে:
{
"userId": 1,
"id": 1,
"title": "Sample Title",
"body": "This is a sample body text."
}
প্রোগ্রামটি কীভাবে কাজ করে:
- যখন ইউজার "Fetch Data" বোতামটি ক্লিক করে, তখন
fetchData()ফাংশন কল হয়। - ফাংশনটি একটি Ajax রিকোয়েস্ট পাঠায় এবং সার্ভার থেকে JSON ডেটা রিসিভ করে।
- ডেটা রিসিভ হলে, তা HTML ডিভ (
data-container) এ আপডেট করা হয়, ফলে ইউজার সেই ডেটা দেখতে পারে পেজ রিলোড না করেই।
সারসংক্ষেপ:
Ajax এর মাধ্যমে সার্ভার থেকে ডেটা ফেচ করতে আমরা XMLHttpRequest অবজেক্ট ব্যবহার করি এবং ডেটা পাওয়ার পর JavaScript এর মাধ্যমে HTML আপডেট করি। এটি ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করার একটি বেসিক কিন্তু কার্যকর পদ্ধতি।
Read more
