Script.aculo.us এবং Ajax
script.aculo.us একটি জনপ্রিয় JavaScript লাইব্রেরি যা ওয়েব ডেভেলপমেন্টে AJAX (Asynchronous JavaScript and XML) এবং DOM manipulation এর জন্য ব্যবহৃত হয়। এটি বিভিন্ন ইন্টারঅ্যাকটিভ ইফেক্ট এবং UI কন্ট্রোল তৈরি করার জন্য ব্যবহার করা হয় এবং এটি Prototype.js লাইব্রেরির উপরে নির্মিত। Ajax.Request এবং Ajax.Updater দুটি প্রধান AJAX উপাদান যা সার্ভারের সাথে যোগাযোগ করতে ব্যবহৃত হয়, যা ওয়েব অ্যাপ্লিকেশনকে অ্যাসিনক্রোনাস ডেটা লোড করার সুবিধা প্রদান করে।
এই গাইডে আমরা Ajax.Request এবং Ajax.Updater এর মাধ্যমে সার্ভারের সাথে যোগাযোগ করার উপায় দেখব।
১. Ajax.Request
Ajax.Request হল একটি ফাংশন যা সার্ভারের সাথে GET অথবা POST রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়। এটি অ্যাসিনক্রোনাসভাবে সার্ভারের রেসপন্স পেতে সক্ষম। আপনি এই রিকোয়েস্টের মাধ্যমে ডেটা পাঠাতে এবং রিসিভ করতে পারেন।
সিনট্যাক্স:
new Ajax.Request(url, {
method: 'POST', // অথবা 'GET'
parameters: { key1: 'value1', key2: 'value2' },
onSuccess: function(response) {
console.log('Success:', response.responseText);
},
onFailure: function() {
console.log('Request failed');
}
});
url: সার্ভারের API বা স্ক্রিপ্টের URL যেখানে রিকোয়েস্ট পাঠানো হবে।method: রিকোয়েস্টের HTTP মেথড (GET/POST)।parameters: পাঠানো ডেটা। এটি একটি অবজেক্ট হিসেবে নির্ধারণ করতে হবে।onSuccess: সার্ভার থেকে সফলভাবে রেসপন্স পাওয়ার পর যা হবে তা নির্ধারণ করা।onFailure: রিকোয়েস্ট ব্যর্থ হলে যা হবে তা নির্ধারণ করা।
উদাহরণ:
new Ajax.Request('https://example.com/api', {
method: 'POST',
parameters: { username: 'john', password: '12345' },
onSuccess: function(response) {
alert('Response received: ' + response.responseText);
},
onFailure: function() {
alert('Request failed');
}
});
এখানে, একটি POST রিকোয়েস্ট পাঠানো হচ্ছে https://example.com/api এ username এবং password এর ডেটা সহ। সার্ভার থেকে সফল রেসপন্স পাওয়া গেলে onSuccess ফাংশনটি কার্যকর হবে এবং ব্যর্থ হলে onFailure ফাংশনটি চালানো হবে।
২. Ajax.Updater
Ajax.Updater ফাংশনটি মূলত একটি DOM এলিমেন্টকে আপডেট করার জন্য ব্যবহৃত হয়। এটি সার্ভারের রেসপন্সের ভিত্তিতে একটি HTML এলিমেন্টের কনটেন্ট আপডেট করে, এবং এটি সাধারনত GET রিকোয়েস্ট ব্যবহার করে।
সিনট্যাক্স:
new Ajax.Updater(elementId, url, {
method: 'GET', // অথবা 'POST'
parameters: { key1: 'value1', key2: 'value2' }
});
elementId: যেই DOM এলিমেন্টটির কনটেন্ট আপডেট করতে হবে।url: সার্ভারের API বা স্ক্রিপ্টের URL।parameters: সার্ভারে পাঠানো ডেটা।method: রিকোয়েস্টের HTTP মেথড (GET/POST)।
উদাহরণ:
new Ajax.Updater('result', 'https://example.com/getData', {
method: 'GET',
parameters: { id: '123' }
});
এখানে, result নামক এলিমেন্টের কনটেন্ট আপডেট করা হবে https://example.com/getData থেকে প্রাপ্ত ডেটার মাধ্যমে। এখানে সার্ভারে একটি GET রিকোয়েস্ট পাঠানো হচ্ছে এবং id প্যারামিটার সহ ডেটা পাঠানো হচ্ছে।
Ajax.Request এবং Ajax.Updater এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Ajax.Request | Ajax.Updater |
|---|---|---|
| উদ্দেশ্য | সাধারণ AJAX রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়। | DOM এলিমেন্টের কনটেন্ট আপডেট করার জন্য ব্যবহৃত হয়। |
| প্রতিক্রিয়া | সার্ভার থেকে পাওয়া রেসপন্স যেকোনো ফাংশনের মধ্যে ব্যবহৃত হতে পারে। | সার্ভার থেকে পাওয়া রেসপন্স একটি নির্দিষ্ট DOM এলিমেন্টে আপডেট করা হয়। |
| প্যারামিটার | রিকোয়েস্টের জন্য ডেটা পাঠানো হয়, কিন্তু DOM আপডেট হয় না। | সার্ভার রেসপন্স DOM এ আপডেট করা হয় নির্দিষ্ট এলিমেন্টে। |
| ইউজার ইন্টারফেস | সাধারণত একটি ফাংশন চালানোর জন্য ব্যবহৃত হয়, ইউজার ইন্টারফেসের সাথে সম্পর্কিত নয়। | একটি নির্দিষ্ট DOM এলিমেন্টের কনটেন্ট আপডেট করে। |
সারাংশ
Ajax.Request এবং Ajax.Updater হল script.aculo.us লাইব্রেরির শক্তিশালী টুলস যা ওয়েব অ্যাপ্লিকেশনগুলোতে সার্ভারের সাথে যোগাযোগকে সহজ এবং দ্রুত করে তোলে। Ajax.Request সাধারণভাবে সার্ভারের সাথে যোগাযোগ এবং ডেটা পাঠানোর জন্য ব্যবহৃত হয়, যখন Ajax.Updater সার্ভার থেকে প্রাপ্ত ডেটা দিয়ে একটি নির্দিষ্ট DOM এলিমেন্টের কনটেন্ট আপডেট করতে ব্যবহৃত হয়। এই দুটি ফাংশনই AJAX-এ অ্যাসিনক্রোনাস রিকোয়েস্ট পরিচালনা করে এবং ওয়েব অ্যাপ্লিকেশনগুলির রেসপন্সিভনেস এবং ইন্টারঅ্যাকটিভিটি বাড়ায়।
Read more
