Ajax (Asynchronous JavaScript and XML) হল একটি প্রযুক্তি, যা ওয়েব পেজকে সার্ভারের সাথে অ্যাসিঙ্ক্রোনাস (asynchronous) যোগাযোগ করতে সক্ষম করে। এর মাধ্যমে পেজ রিফ্রেশ না করেই সার্ভার থেকে ডেটা নিয়ে আসা বা সার্ভারে ডেটা পাঠানো সম্ভব হয়। ExpressJS অ্যাপ্লিকেশন এবং ক্লায়েন্ট সাইড জাভাস্ক্রিপ্টের মাধ্যমে Ajax রিকোয়েস্টের মাধ্যমে ডেটা ইন্টারঅ্যাক্ট করতে পারে।
এই লেখায়, আমরা দেখব কিভাবে jQuery, Fetch API, এবং Axios ব্যবহার করে ExpressJS অ্যাপে Ajax রিকোয়েস্ট করা যায়।
১. jQuery দিয়ে Ajax রিকোয়েস্ট
jQuery হল একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি, যা Ajax রিকোয়েস্ট সহজভাবে পরিচালনা করতে সহায়তা করে। ExpressJS অ্যাপে jQuery ব্যবহার করে ডেটা পাঠানোর এবং গ্রহণ করার পদ্ধতি এখানে দেখানো হয়েছে।
১.১. jQuery দিয়ে GET রিকোয়েস্ট
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="getData">GET Data</button>
<div id="response"></div>
<script>
$('#getData').click(function() {
$.ajax({
url: '/api/data', // ExpressJS রাউট
type: 'GET',
success: function(data) {
$('#response').html(data); // সার্ভার থেকে প্রাপ্ত ডেটা প্রদর্শন
},
error: function(error) {
console.log('Error:', error);
}
});
});
</script>
</body>
</html>
১.২. ExpressJS রাউট সেটআপ
const express = require('express');
const app = express();
const port = 3000;
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from ExpressJS!' });
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
এখানে, jQuery.ajax() মেথড ব্যবহার করা হয়েছে /api/data রাউটে GET রিকোয়েস্ট পাঠানোর জন্য এবং সার্ভার থেকে প্রাপ্ত ডেটা HTML পেজে প্রদর্শন করা হয়েছে।
২. Fetch API দিয়ে Ajax রিকোয়েস্ট
Fetch API হল একটি নতুন ওয়েব API যা Ajax রিকোয়েস্ট করার জন্য ব্যবহৃত হয়। এটি ব্রাউজার সাপোর্ট করে এবং Promise-based, যা কোড লেখার সময় আরও পরিষ্কার এবং সহজ করে তোলে।
২.১. Fetch API দিয়ে GET রিকোয়েস্ট
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax with Fetch</title>
</head>
<body>
<button id="getData">GET Data</button>
<div id="response"></div>
<script>
document.getElementById('getData').addEventListener('click', () => {
fetch('/api/data') // ExpressJS রাউট
.then(response => response.json()) // JSON রেসপন্স পার্স করা
.then(data => {
document.getElementById('response').innerHTML = data.message; // ডেটা প্রদর্শন
})
.catch(error => console.error('Error:', error));
});
</script>
</body>
</html>
২.২. ExpressJS রাউট সেটআপ
ExpressJS রাউট সেটআপ আগের মতোই থাকবে:
const express = require('express');
const app = express();
const port = 3000;
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from ExpressJS!' });
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
এখানে fetch() ব্যবহার করে /api/data রাউটে GET রিকোয়েস্ট করা হয়েছে এবং তার রেসপন্সকে .json() পদ্ধতি দিয়ে পার্স করা হয়েছে।
৩. Axios দিয়ে Ajax রিকোয়েস্ট
Axios একটি জনপ্রিয় JavaScript লাইব্রেরি যা Promise ভিত্তিক এবং সহজে HTTP রিকোয়েস্ট পাঠানোর সুবিধা দেয়। এটি GET, POST, PUT, DELETE সহ বিভিন্ন HTTP মেথড সাপোর্ট করে এবং ব্যবহারে সহজ।
৩.১. Axios দিয়ে GET রিকোয়েস্ট
প্রথমে Axios ইনস্টল করতে হবে:
npm install axios --save
এরপর, Axios ব্যবহার করে GET রিকোয়েস্ট করা যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax with Axios</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<button id="getData">GET Data</button>
<div id="response"></div>
<script>
document.getElementById('getData').addEventListener('click', () => {
axios.get('/api/data') // ExpressJS রাউট
.then(response => {
document.getElementById('response').innerHTML = response.data.message; // সার্ভার থেকে প্রাপ্ত ডেটা প্রদর্শন
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
</body>
</html>
৩.২. ExpressJS রাউট সেটআপ
const express = require('express');
const app = express();
const port = 3000;
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from ExpressJS!' });
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
এখানে axios.get() মেথড ব্যবহার করে GET রিকোয়েস্ট পাঠানো হয়েছে এবং রেসপন্সের ডেটা প্রদর্শন করা হয়েছে।
৪. POST রিকোয়েস্ট করা
যখন আপনাকে সার্ভারে ডেটা পাঠাতে হয়, তখন GET রিকোয়েস্টের বদলে POST রিকোয়েস্ট ব্যবহার করা হয়। এখানে আমরা দেখব কিভাবে jQuery, Fetch API, এবং Axios দিয়ে POST রিকোয়েস্ট করা যায়।
৪.১. jQuery দিয়ে POST রিকোয়েস্ট
$('#sendData').click(function() {
$.ajax({
url: '/api/data',
type: 'POST',
data: { name: 'John', age: 30 },
success: function(data) {
$('#response').html(data.message);
},
error: function(error) {
console.log('Error:', error);
}
});
});
৪.২. Fetch API দিয়ে POST রিকোয়েস্ট
fetch('/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => {
document.getElementById('response').innerHTML = data.message;
})
.catch(error => console.error('Error:', error));
৪.৩. Axios দিয়ে POST রিকোয়েস্ট
axios.post('/api/data', { name: 'John', age: 30 })
.then(response => {
document.getElementById('response').innerHTML = response.data.message;
})
.catch(error => {
console.error('Error:', error);
});
৪.৪. ExpressJS POST রাউট
app.post('/api/data', express.json(), (req, res) => {
console.log(req.body); // ক্লায়েন্ট থেকে প্রাপ্ত ডেটা
res.json({ message: 'Data received successfully!' });
});
সারাংশ
ExpressJS এর সাথে Ajax রিকোয়েস্ট করা বেশ সহজ এবং কার্যকরী। আপনি jQuery, Fetch API, এবং Axios এর মাধ্যমে GET ও POST রিকোয়েস্ট পাঠাতে পারেন এবং সার্ভার থেকে রেসপন্স গ্রহণ করতে পারেন। jQuery যেখানে একটি সহজ লাইব্রেরি হিসেবে ব্যবহৃত হয়, সেখানে Fetch API আধুনিক ব্রাউজারে সরাসরি ব্যবহার করা যায় এবং Axios একটি শক্তিশালী লাইব্রেরি যা Promise-বেসড এবং আরও অনেক ফিচার প্রদান করে। এসবের মাধ্যমে আপনি ক্লায়েন্ট সাইড থেকে অ্যাসিঙ্ক্রোনাস রিকোয়েস্ট এবং রেসপন্স হ্যান্ড
লিং করতে পারবেন।
Read more
