কিভাবে লিস্ট ট্যাগের মাঝে একটি নির্দিষ্ট স্থানে ডাটা প্রদর্শন করাতে হয়?
এ কাজটি করার জন্য নিচের কোড গুলো প্রয়োগ করতে পারেন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>AJAX Bangla Tutorial</title>
</head>
<body>
<h1>AJAX page</h1>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="script.js"></script>
</body>
</html>
তারপর জাভাস্ক্রিপ্ট ফাইল:
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'data.txt');
request.onreadystatechange = function() {
if ((request.readyState===4) && (request.status===200)) {
var modify = document.getElementsByTagName('li');
for (var i = 0; i < modify.length; i++) {
modify[i].innerHTML = request.responseText;
}
}
}
request.send();
উপরে একটি txt ফাইল থেকে ডাটা প্রদর্শন করা হয়েছিল।
এবার দেখুন কিভাবে XML ফাইল থেকে কিভাবে ডাটা প্রদর্শন করাতে হয়।
এ জন্য নিচের কোড গুলো ব্যবহার করতে পারেন:
এইচটিএমএল ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>AJAX Bangla Tutorial</title>
</head>
<body>
<h1>AJAX page</h1>
<div id="update"></div>
<script src="script.js"></script>
</body>
</html>
জাভাস্ক্রিপ্ট ফাইল:
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'data.xml');
request.onreadystatechange = function() {
if ((request.readyState===4) && (request.status===200)) {
console.log(request.responseXML.getElementsByTagName('name')[1].firstChild.nodeValue);
var items = request.responseXML.getElementsByTagName('name');
var output = '<ul>';
for (var i = 0; i < items.length; i++) {
output += '<li>' + items[i].firstChild.nodeValue + '</li>';
}
output += '</ul>';
document.getElementById('update').innerHTML = output;
}
}
request.send();
|