XMLHttpRequest এবং Fetch API দুটি এমন প্রযুক্তি যা JavaScript ব্যবহার করে সার্ভারের সাথে asynchronous (অসিঙ্ক্রোনাস) ডেটা আদান-প্রদান করার জন্য ব্যবহৃত হয়। ওয়েব অ্যাপ্লিকেশনে ডেটা ফেচ করা এবং সার্ভারের সাথে যোগাযোগ করতে এই দুটি API অত্যন্ত গুরুত্বপূর্ণ।
XMLHttpRequest এর ব্যবহার
XMLHttpRequest হল একটি পুরোনো API, যা JavaScript ব্যবহার করে সার্ভারের সাথে ডেটা পাঠানোর এবং গ্রহণ করার জন্য ব্যবহৃত হয়। এটি একটি asynchronous HTTP রিকোয়েস্ট তৈরি করে, যার মাধ্যমে ওয়েব পেজ পুনরায় লোড না করে সার্ভার থেকে ডেটা ফেচ করা যায়।
XMLHttpRequest উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest Example</title>
<script>
function fetchData() {
var xhr = new XMLHttpRequest(); // XMLHttpRequest অবজেক্ট তৈরি
xhr.open('GET', 'data.json', true); // GET রিকোয়েস্ট
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = 'Name: ' + data.name;
}
};
xhr.send(); // রিকোয়েস্ট পাঠানো
}
</script>
</head>
<body>
<button onclick="fetchData()">ডেটা লোড করুন</button>
<div id="result"></div>
</body>
</html>
এখানে:
- XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে এবং GET রিকোয়েস্ট পাঠানো হয়েছে।
- সার্ভার থেকে data.json ফাইল ফেচ করে, সেটিকে JSON.parse() দিয়ে প্যার্স করা হয়েছে।
- পেজের একটি div (ID
result) তে JSON ডেটা প্রদর্শিত হবে।
JSON ফাইল (data.json) উদাহরণ:
{
"name": "John Doe",
"age": 30
}
এখানে, data.json ফাইল থেকে নাম প্রদর্শন করা হচ্ছে।
Fetch API এর ব্যবহার
Fetch API হল একটি আধুনিক ওয়েব API যা XMLHttpRequest এর পরিবর্তে ব্যবহার করা যায়। এটি ওয়েব পেজে HTTP রিকোয়েস্ট পাঠাতে এবং রেসপন্স পেতে একটি সরল এবং সমৃদ্ধ ইন্টারফেস প্রদান করে। Fetch Promise ভিত্তিক, যার ফলে কোডের readability এবং error handling আরও সহজ হয়।
Fetch API উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Example</title>
<script>
function fetchData() {
fetch('data.json') // GET রিকোয়েস্ট
.then(response => response.json()) // JSON রেসপন্স প্যার্স করা
.then(data => {
document.getElementById('result').innerHTML = 'Name: ' + data.name;
})
.catch(error => console.error('Error:', error)); // Error handling
}
</script>
</head>
<body>
<button onclick="fetchData()">ডেটা লোড করুন</button>
<div id="result"></div>
</body>
</html>
এখানে:
- fetch() মেথড ব্যবহার করে
data.jsonফাইল ফেচ করা হয়েছে। .then()মেথড ব্যবহার করে JSON রেসপন্স প্যার্স করা হয়েছে।.catch()মেথড দিয়ে ত্রুটি পরিচালনা করা হয়েছে।
JSON ফাইল (data.json) উদাহরণ:
{
"name": "Jane Doe",
"age": 28
}
এখানে, Fetch API ব্যবহার করে JSON ডেটা ফেচ করা হচ্ছে এবং পেজে name প্রদর্শিত হচ্ছে।
XMLHttpRequest এবং Fetch API এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | XMLHttpRequest | Fetch API |
|---|---|---|
| অ্যাসিনক্রোনাস প্রসেসিং | সাপোর্টেড (callback function) | Promise ভিত্তিক (অধিক সহজ এবং উন্নত) |
| সিম্পল সিঙ্ক্রোনাস/অ্যাসিনক্রোনাস | সিঙ্ক্রোনাসও ব্যবহার করা যেতে পারে | শুধুমাত্র অ্যাসিনক্রোনাস |
| Error Handling | .onerror বা try-catch ব্যবহৃত হয় | .catch() Promise error handling |
| API | পুরোনো এবং জটিল | আধুনিক এবং সরল |
| JSON রেসপন্স প্যার্সিং | ম্যানুয়ালি JSON.parse() ব্যবহার করা হয় | .json() মেথড দ্বারা সরাসরি JSON প্যার্স করা যায় |
| অবজেক্ট স্ট্রাকচার | callback স্টাইল | Promise চেইনিং স্টাইল |
উপসংহার
- XMLHttpRequest এবং Fetch API উভয়ই asynchronous ডেটা আদান-প্রদান করতে ব্যবহৃত হয়, তবে Fetch API আধুনিক এবং Promise ভিত্তিক, যা কোড লেখার সময় আরও সহজতা ও পরিষ্কারতা প্রদান করে।
- Fetch API ব্যবহার করার ফলে কোডটি আরও সহজ এবং উন্নত Error Handling সমর্থন করে, যা XMLHttpRequest এ কিছুটা জটিল হতে পারে।
- XMLHttpRequest এখনও কিছু পুরনো ব্রাউজার বা নির্দিষ্ট প্রয়োজনে ব্যবহৃত হতে পারে, তবে Fetch API এখন আধুনিক ওয়েব ডেভেলপমেন্টের জন্য আদর্শ।
Read more
