Ajax (Asynchronous JavaScript and XML) হল একটি প্রযুক্তি যা ওয়েব পেজগুলোকে সিঙ্ক্রোনাস না হয়ে asynchronousভাবে ডেটা লোড করার সুবিধা দেয়। Ajax ব্যবহারের মাধ্যমে ব্যবহারকারী পৃষ্ঠাটি রিফ্রেশ না করেই ডেটা পাঠাতে বা গ্রহণ করতে পারে, যার ফলে ইউজার এক্সপিরিয়েন্স উন্নত হয়।
ExpressJS ব্যবহার করে Ajax এর মাধ্যমে ডেটা রিকোয়েস্ট করার প্রক্রিয়া খুবই সহজ এবং সাধারণ। এই প্রক্রিয়াতে সাধারণত HTTP Requests যেমন GET, POST, PUT, বা DELETE ব্যবহার করা হয়।
Ajax কি?
Ajax একটি ওয়েব ডেভেলপমেন্ট কৌশল যা JavaScript এবং XMLHttpRequest অবজেক্ট ব্যবহার করে ওয়েব পেজের মধ্যে ডেটা পাঠানো এবং গ্রহণ করার জন্য ব্যবহৃত হয়, যাতে পেজটি রিফ্রেশ না হয়। সাধারণত, Ajax এর মাধ্যমে JSON ফরম্যাটে ডেটা আদান প্রদান করা হয়।
Ajax এর সুবিধা
- পেজ রিফ্রেশ ছাড়াই ডেটা লোড করা।
- ব্যবহারকারীর ইন্টারঅ্যাকশনের পরিমাণ কমানো।
- সিস্টেম পারফরম্যান্স উন্নত করা, কারণ শুধুমাত্র প্রয়োজনীয় ডেটাই সার্ভার থেকে লোড হয়।
- ওয়েব অ্যাপ্লিকেশনকে আরও গতিশীল এবং ইন্টারঅ্যাকটিভ বানানো।
ExpressJS-এ Ajax রিকোয়েস্ট হ্যান্ডলিং
ExpressJS-এ Ajax রিকোয়েস্ট হ্যান্ডলিং করার জন্য, ক্লায়েন্ট সাইডে JavaScript ব্যবহার করা হয়, এবং সার্ভার সাইডে Express রাউটারের মাধ্যমে রিকোয়েস্ট গুলি হ্যান্ডল করা হয়।
১. ExpressJS সার্ভার সেটআপ করা
প্রথমে, Express অ্যাপ্লিকেশন তৈরি করতে হবে এবং তারপরে HTTP রিকোয়েস্ট গুলি হ্যান্ডল করতে হবে।
১.১. প্যাকেজ ইনস্টল করা
npm install express
১.২. Express অ্যাপ্লিকেশন সেটআপ করা
const express = require('express');
const app = express();
const PORT = 3000;
// JSON রিকোয়েস্ট বডি পার্স করার জন্য Middleware
app.use(express.json());
// স্ট্যাটিক ফাইল সার্ভ করার জন্য (যেমন HTML, CSS, JS)
app.use(express.static('public'));
// রুট তৈরি করা
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
// Ajax রিকোয়েস্ট হ্যান্ডলিং
app.post('/data', (req, res) => {
const userData = req.body; // ক্লায়েন্ট থেকে আসা ডেটা
console.log(userData);
res.json({ message: 'Data received successfully', data: userData });
});
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}`);
});
এখানে, আমরা Express অ্যাপ্লিকেশন তৈরি করেছি, যেখানে /data রাউটটি POST রিকোয়েস্ট গ্রহণ করবে এবং ক্লায়েন্ট থেকে আসা ডেটা রেসপন্স হিসেবে ফিরিয়ে দিবে।
২. ক্লায়েন্ট সাইড: Ajax রিকোয়েস্ট করা
এখন আমরা ক্লায়েন্ট সাইডে JavaScript দিয়ে Ajax রিকোয়েস্ট পাঠাব। এখানে আমরা fetch API ব্যবহার করবো, যা আধুনিক ব্রাউজারে Ajax রিকোয়েস্ট করার জন্য সবচেয়ে জনপ্রিয় এবং সহজ পদ্ধতি।
২.১. HTML ফাইল তৈরি
এটি public/index.html ফাইল হবে যেখানে ক্লায়েন্ট সাইডের HTML এবং JavaScript কোড থাকবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ExpressJS Ajax Example</title>
</head>
<body>
<h1>Ajax Example in ExpressJS</h1>
<form id="dataForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
<div id="response"></div>
<script>
// Ajax রিকোয়েস্ট পাঠানোর জন্য ফর্ম সাবমিট হ্যান্ডলার
document.getElementById('dataForm').addEventListener('submit', function(event) {
event.preventDefault(); // ফর্মের ডিফল্ট সাবমিট প্রতিরোধ
const name = document.getElementById('name').value;
// Fetch API ব্যবহার করে Ajax রিকোয়েস্ট
fetch('/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: name })
})
.then(response => response.json())
.then(data => {
// সার্ভার থেকে পাওয়া রেসপন্স দেখানো
document.getElementById('response').innerHTML = `
<h3>Server Response:</h3>
<p>${data.message}</p>
<pre>${JSON.stringify(data.data, null, 2)}</pre>
`;
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
</body>
</html>
এখানে, যখন ব্যবহারকারী ফর্মটি সাবমিট করবে, তখন fetch() API ব্যবহার করে একটি POST রিকোয়েস্ট /data রাউটে পাঠানো হবে। সার্ভার থেকে পাওয়া রেসপন্স তারপর HTML পৃষ্ঠায় প্রদর্শন করা হবে।
৩. কিভাবে কাজ করবে?
- ক্লায়েন্ট সাইড: ব্যবহারকারী যখন নাম ইনপুট করবে এবং ফর্মটি সাবমিট করবে, তখন fetch() API একটি POST রিকোয়েস্ট
/dataরাউটে পাঠাবে। রিকোয়েস্টের মধ্যে JSON ডেটা পাঠানো হবে। - সার্ভার সাইড (ExpressJS): ExpressJS সার্ভার
/dataরাউটে POST রিকোয়েস্ট গ্রহণ করবে এবং সেই ডেটা প্রসেস করে রেসপন্স পাঠাবে। রেসপন্স হিসেবে সার্ভার একটি JSON অবজেক্ট পাঠাবে, যা ক্লায়েন্ট সাইডে প্রদর্শিত হবে।
৪. এক্সপ্রেস অ্যাপ্লিকেশন এবং Ajax রিকোয়েস্টের কাজের সারাংশ
- ExpressJS সার্ভার তৈরি করা হয়েছে যেখানে রিকোয়েস্ট হ্যান্ডলিংয়ের জন্য বিভিন্ন রাউট রয়েছে।
- Ajax রিকোয়েস্ট ক্লায়েন্ট সাইডে
fetch()API ব্যবহার করে করা হয়েছে। এতে asynchronousভাবে ডেটা আদান প্রদান করা হচ্ছে। - ক্লায়েন্টের কাছে রেসপন্স পাঠানোর সময় JSON ফরম্যাট ব্যবহার করা হয়েছে।
সারাংশ
ExpressJS-এর মাধ্যমে Ajax রিকোয়েস্ট করা খুবই সহজ এবং কার্যকরী। fetch() API ব্যবহার করে ক্লায়েন্ট সাইডে Ajax রিকোয়েস্ট পাঠানো হয়, এবং সার্ভার সেই রিকোয়েস্ট হ্যান্ডল করে JSON ফরম্যাটে রেসপন্স পাঠায়। এই পদ্ধতি ব্যবহার করে ওয়েব অ্যাপ্লিকেশনগুলো আরও গতিশীল এবং ইন্টারঅ্যাকটিভ হয়ে ওঠে।
Read more
