Ajax এর মাধ্যমে XML ডেটা প্রসেস করা এবং তা HTML ডকুমেন্টে ডিসপ্লে করার প্রক্রিয়ায় XMLHttpRequest এবং DOM মেথডগুলো ব্যবহার করা হয়। XML ডেটা কিভাবে এক্সট্র্যাক্ট, প্রসেস, এবং HTML এ দেখানো যায়, তার একটি উদাহরণ নিচে দেওয়া হলো।
উদাহরণ: XML Data Parsing এবং Display
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>XML Data Parsing Example</title>
</head>
<body>
<h1>XML Data Parsing and Display Using Ajax</h1>
<button onclick="fetchXMLData()">Fetch XML Data</button>
<div id="xml-data-container">
<!-- XML ডেটা এখানে দেখানো হবে -->
</div>
<script src="app.js"></script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
- HTML ফাইলে একটি শিরোনাম (
<h1>), একটি বোতাম (<button>), এবং একটি<div>এলিমেন্ট রয়েছে। - "Fetch XML Data" বোতামে ক্লিক করলে
fetchXMLData()ফাংশন কল হবে, যা Ajax রিকোয়েস্ট করে XML ডেটা নিয়ে আসবে এবং তা প্রসেস করবে। xml-data-containerনামে একটি<div>এলিমেন্ট রয়েছে, যেখানে XML ডেটা ডিসপ্লে করা হবে।
JavaScript (app.js):
function fetchXMLData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// GET রিকোয়েস্ট ওপেন করা
xhr.open("GET", "https://example.com/api/data.xml", true);
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সফল এবং সম্পূর্ণ কিনা তা চেক করা
// XML ডেটা রিসিভ করা
var xmlDoc = xhr.responseXML;
// XML ডেটা থেকে ভ্যালু এক্সট্র্যাক্ট করা
var items = xmlDoc.getElementsByTagName("item");
var output = "<h2>Items:</h2><ul>";
for (var i = 0; i < items.length; i++) {
var name = items[i].getElementsByTagName("name")[0].textContent;
var price = items[i].getElementsByTagName("price")[0].textContent;
output += `<li><strong>${name}</strong>: $${price}</li>`;
}
output += "</ul>";
// HTML এ ডেটা দেখানো
document.getElementById("xml-data-container").innerHTML = output;
} else if (xhr.readyState === 4) {
// যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
document.getElementById("xml-data-container").innerHTML = "Error fetching XML data!";
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
বিস্তারিত ব্যাখ্যা:
XMLHttpRequest অবজেক্ট তৈরি করা:
fetchXMLData()ফাংশনে একটিXMLHttpRequestঅবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।
রিকোয়েস্ট ওপেন করা:
xhr.open("GET", "https://example.com/api/data.xml", true);মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে।"https://example.com/api/data.xml"URL থেকে XML ডেটা ফেচ করা হবে। এটি একটি উদাহরণ URL যেখানে XML ডেটা পাওয়া যাবে।trueমানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে।
XML ডেটা প্রসেস করা:
xhr.onreadystatechangeইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 200)।- যদি রিকোয়েস্ট সফল হয়, তাহলে
xhr.responseXMLব্যবহার করে XML ডেটা প্রাপ্ত হয়েছে। getElementsByTagName()মেথড ব্যবহার করে XML ডেটা থেকে নির্দিষ্ট এলিমেন্টের ভ্যালু এক্সট্র্যাক্ট করা হয়েছে।
HTML DOM আপডেট করা:
- XML ডেটা থেকে এক্সট্র্যাক্ট করা ভ্যালু দিয়ে একটি HTML তালিকা তৈরি করা হয়েছে এবং তা
xml-data-containerডিভে ইনজেক্ট করা হয়েছে।
এরর ম্যানেজমেন্ট:
- যদি রিকোয়েস্ট ব্যর্থ হয় (
readyState === 4কিন্তুstatus !== 200), তাহলে একটি এরর মেসেজ দেখানো হয়েছে।
XML Data Example (data.xml):
<items>
<item>
<name>Apple</name>
<price>0.99</price>
</item>
<item>
<name>Banana</name>
<price>0.59</price>
</item>
<item>
<name>Cherry</name>
<price>2.99</price>
</item>
</items>
XML ডেটা প্রসেস করার ধাপ:
- Ajax রিকোয়েস্ট পাঠানো:
XMLHttpRequestব্যবহার করে একটি GET রিকোয়েস্ট পাঠানো হয়েছে। - XML ডেটা রিসিভ করা: সার্ভার থেকে XML ডেটা রিসিভ হলে তা
xhr.responseXMLদিয়ে ডকুমেন্ট অবজেক্টে কনভার্ট করা হয়েছে। - XML ডেটা প্রসেস করা:
getElementsByTagName()মেথড ব্যবহার করে XML থেকে প্রয়োজনীয় ভ্যালু এক্সট্র্যাক্ট করা হয়েছে, যেমনnameএবংprice। - HTML DOM আপডেট করা: প্রাপ্ত XML ডেটা ব্যবহার করে HTML তালিকা তৈরি করে
xml-data-containerডিভে ইনজেক্ট করা হয়েছে।
সারসংক্ষেপ:
- Ajax এবং XML ডেটা প্রসেসিং: Ajax এর মাধ্যমে XML ডেটা রিকোয়েস্ট করে এবং তা প্রসেস করা হয়, যাতে ডেটা HTML এ দেখানো যায়।
- responseXML: XML রেসপন্স প্রসেস করতে
responseXMLপ্রপার্টি ব্যবহার করা হয়, যা XML ডেটাকে ডকুমেন্ট অবজেক্টে কনভার্ট করে। - DOM ম্যানিপুলেশন: XML ডেটা থেকে ভ্যালু নিয়ে HTML এ ইনজেক্ট করা হয়, যা ব্যবহারকারীদের জন্য ডায়নামিকভাবে দেখানো যায়।
Content added By
Read more
