MooTools ব্যবহার করে JSON ডেটার সাথে DOM Elements আপডেট করা খুবই সহজ এবং কার্যকরী। JSON ডেটা সাধারণত সার্ভার থেকে আসা ডেটা বা ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে তৈরি ডেটা হতে পারে, এবং আপনি এই ডেটা ব্যবহার করে HTML এলিমেন্টের কন্টেন্ট বা স্টাইল পরিবর্তন করতে পারেন।
এখানে আমরা দেখব কীভাবে MooTools ব্যবহার করে JSON ডেটা গ্রহণ করা যায় এবং সেই ডেটা DOM উপাদানগুলির সাথে যুক্ত বা আপডেট করা যায়।
১. JSON ডেটা নিয়ে কাজ করা
MooTools-এ JSON ডেটা পাঠানোর জন্য Request.JSON ক্লাস ব্যবহার করা হয়। এটি AJAX রিকোয়েস্ট পাঠানোর জন্য বিশেষভাবে তৈরি, যাতে আপনি JSON ফরম্যাটে ডেটা পাঠাতে এবং গ্রহণ করতে পারেন।
এখন, আমরা উদাহরণ হিসেবে JSON ডেটা নিয়ে DOM উপাদানগুলির কন্টেন্ট আপডেট করব।
উদাহরণ: সার্ভার থেকে JSON ডেটা গ্রহণ এবং DOM আপডেট করা
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools JSON with DOM Update</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// সার্ভার থেকে JSON ডেটা নিয়ে আসা
var request = new Request.JSON({
url: 'data.json', // সার্ভারের JSON ফাইল বা API URL
onSuccess: function(response) {
// সার্ভার থেকে পাওয়া JSON ডেটা
console.log('Received JSON:', response);
// JSON ডেটা দিয়ে DOM আপডেট করা
$('userName').set('html', response.name);
$('userEmail').set('html', response.email);
$('userAge').set('html', response.age);
},
onFailure: function() {
console.log('Request failed');
}
});
// রিকোয়েস্ট পাঠানো
request.send();
});
</script>
</head>
<body>
<h2>User Information</h2>
<p>Name: <span id="userName">Loading...</span></p>
<p>Email: <span id="userEmail">Loading...</span></p>
<p>Age: <span id="userAge">Loading...</span></p>
</body>
</html>
সার্ভার থেকে JSON ডেটা:
এই উদাহরণে আমরা ধরে নিচ্ছি যে সার্ভার থেকে JSON ডেটা এমন কিছু হতে পারে:
{
"name": "John Doe",
"email": "john@example.com",
"age": 30
}
এখানে:
Request.JSONক্লাস ব্যবহার করে সার্ভারের JSON ডেটা গ্রহণ করা হয়েছে।onSuccessফাংশনটি ডেটা গ্রহণের পর DOM আপডেট করতে ব্যবহৃত হয়, যেখানে$('userName'),$('userEmail'), এবং$('userAge')এলিমেন্টগুলিরhtmlপরিবর্তন করা হয়েছে।
২. স্টাইল আপডেট করা JSON ডেটা দিয়ে
MooTools এর setStyle() মেথড ব্যবহার করে আপনি JSON ডেটা থেকে প্রাপ্ত মানের ভিত্তিতে DOM উপাদানের স্টাইল পরিবর্তন করতে পারেন।
উদাহরণ: JSON ডেটা দিয়ে DOM উপাদানের স্টাইল পরিবর্তন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools JSON Style Update</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// সার্ভার থেকে JSON ডেটা নিয়ে আসা
var request = new Request.JSON({
url: 'styleData.json', // JSON ডেটা দেওয়া সার্ভার URL
onSuccess: function(response) {
// JSON ডেটা থেকে স্টাইল আপডেট করা
$('myDiv').setStyle('background-color', response.bgColor);
$('myDiv').setStyle('color', response.textColor);
$('myDiv').setStyle('font-size', response.fontSize + 'px');
},
onFailure: function() {
console.log('Request failed');
}
});
// রিকোয়েস্ট পাঠানো
request.send();
});
</script>
</head>
<body>
<div id="myDiv" style="width: 300px; height: 100px; text-align: center;">
This is a styled div.
</div>
</body>
</html>
styleData.json ডেটা:
{
"bgColor": "#ff7f7f",
"textColor": "white",
"fontSize": 18
}
এখানে:
- JSON ডেটা থেকে
background-color,color, এবংfont-sizeস্টাইল অ্যাট্রিবিউট গুলি পরিবর্তন করা হয়েছে। setStyle()মেথড ব্যবহার করে ইমেজ বা ডিভ উপাদানের স্টাইল পরিবর্তন করা হয়েছে।
৩. কাস্টম ডেটা ব্যবহারের সাথে DOM আপডেট
MooTools-এ আপনি set() এবং get() মেথড ব্যবহার করে কাস্টম ডেটা অ্যাট্রিবিউট যোগ করতে পারেন এবং সেই ডেটা দিয়ে DOM এলিমেন্টে পরিবর্তন আনতে পারেন।
উদাহরণ: কাস্টম ডেটা দিয়ে DOM আপডেট
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Custom Data Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var userData = {
name: 'Alice',
age: 25,
country: 'Bangladesh'
};
// কাস্টম ডেটা সেট করা
$('userDetails').set('data-user', userData);
// কাস্টম ডেটা গেট করে DOM আপডেট করা
var data = $('userDetails').get('data-user');
$('name').set('html', data.name);
$('age').set('html', data.age);
$('country').set('html', data.country);
});
</script>
</head>
<body>
<div id="userDetails">
Name: <span id="name"></span><br>
Age: <span id="age"></span><br>
Country: <span id="country"></span>
</div>
</body>
</html>
এখানে:
set('data-user', userData)ব্যবহার করে কাস্টম ডেটাuserDataযোগ করা হয়েছে।get('data-user')মেথডের মাধ্যমে সেই কাস্টম ডেটা অ্যাক্সেস করা হয়েছে এবং DOM উপাদানগুলির সাথে আপডেট করা হয়েছে।
সারাংশ
MooTools এর JSON ডেটা হ্যান্ডলিং এবং DOM আপডেট প্রক্রিয়া খুবই সহজ এবং শক্তিশালী। Request.JSON ক্লাস ব্যবহার করে আপনি JSON ডেটা পাঠাতে এবং গ্রহণ করতে পারেন, এবং MooTools এর set(), get(), এবং setStyle() মেথড ব্যবহার করে DOM উপাদানগুলিতে ডেটা আপডেট বা স্টাইল পরিবর্তন করতে পারেন। এতে আপনি ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব পেজ তৈরি করতে পারবেন।
Read more
