Vivasoft-logo

5.3 AJAX

A = Asynchronous
J = JavaScript
A = And
X = XML

Ajax হলো একটা টেকনিক যার মাধ্যমে একটা ওয়েব পেইজ থেকে সহজেই ওয়েব সার্ভার এক্সেস করা যায়। Ajax এর মাধ্যমে behind the scene ওয়েব সার্ভার এর সাথে asynchronously ডাটা বিনিময় করে ওয়েব পেইজ আপডেট করা যায়। যার ফলে পুরো পেইজ reload না করেই পেইজের একটা অংশ আপডেট করা যায়। Ajax ব্যাসিক্যালি দুটো কাজের কম্বিনেশনে হয়ে থাকে – XMLHttpRequest অবজেক্ট ব্যবহার করে সার্ভারে ডাটা রিকোয়েস্ট করে এবং জাভাস্ক্রিপ্ট ও HTML DOM দিয়ে ডাটাটা ব্যবহার করে।

এখনকার মর্ডান ব্রাউজার HTTP রিকোয়েস্টের জন্য XMLHttpRequest অবজেক্টের বদলে Fetch API ব্যবহার করে। যার মাধ্যমে একই কাজ আরো সহজে করা যায়।

XMLHttpRequest কি ?

ওয়েব সাইট এবং সার্ভারের মাঝে ডাটা আদানপ্রদান করার জন্য XMLHttpRequest ব্যবহার করে HTTP requests পাঠানো যায়। এটি একটি ব্রাউজার অবজেক্ট। এর জন্য কিছু ধাপ আছে – প্রথমে একটা XMLHttpRequest অবজেক্ট তৈরি করতে হবে, তারপর একটা URL ওপেন করতে হবে এবং তারপর request পাঠাতে হবে। Transaction শেষ হওয়ার পর অবজেক্টটিতে রেজাল্ট হিসেবে রেস্পন্স বডি আর HTTP স্ট্যাটাস পাওয়া যাবে। onload, onprogress আর onerror হচ্ছে সবচেয়ে বেশি ব্যবহৃত ইভেন্ট। বর্তমানে fetch API দিয়ে আরো সহজে মোটামুটি প্রায় সব কাজই করা যায় যা XMLHttpRequest দিয়ে করা যায়। চলুন কযেকটি উদাহরণ যাক।

উদাহরণ ১:

 
 
 
let request = new XMLHttpRequest();
 
request.open(“GET”, “/my/url”, async=false);
// async=false দিয়ে বোঝায় request টি syncronous হবে
 
request.responseType = ‘json’;
// এভাবে রেস্পন্সটাইপ সেট করে দেওয়া যায়
 
request.send();
 
request.onload = function() {
if (request.status != 200) {
alert(`Error ${request.status}: ${request.statusText}`);
} else {
alert(`Done, got ${request.response.length} bytes`);
}
};
 
request.onprogress = function(event) {
if (event.lengthComputable) {
alert(`Received ${event.loaded} of ${event.total} bytes`);
} else {
alert(`Received ${event.loaded} bytes`);
}
};
 
request.onerror = function() {
alert(“Request failed”);
};
 

উদাহরণ ২:

 
 
 
let formData = new FormData();
formData.append(“Name”, “Lee”);
 
let request = new XMLHttpRequest();
request.open(“POST”, “/article/post”);
request.setRequestHeader(‘Content-Type’, ‘multipart/form-data’);
request.send(formData);
request.onload = () => alert(request.response);
 

উদাহরণ ৩:

 
 
 
let json = JSON.stringify({
name: “John”,
surname: “Smith”
});
 
let request = new XMLHttpRequest();
request.open(“POST”, ‘/article/submit’)
request.setRequestHeader(‘Content-type’, ‘application/json; charset=utf-8’);
request.send(json);
 

 

Send GET, POST, PATCH, PUT and DELETE requests:

 

আমরা fetch API দিয়ে এই HTTP রিকোয়েস্ট মেথডগুলো বোঝানোর চেষ্টা করবো। fetch API সবর্দা প্রমিস রিটার্ন  করে বিধায় আমাদেরকে ডাটা প্রসেস করার জন্য .then() ব্যবহার করতে হয়।

Get – এই মেথডটি দিয়ে সার্ভার থেকে ডাটা আনা বা read করা হয়।

 
 
 
fetch(‘https://jsonplaceholder.typicode.com/todos’, {
method: ‘GET’
})
.then(response => response.json())
.then(data => console.log(data))
 

 

Post – এই মেথড দিয়ে সার্ভারে ডাটা পাঠানো যায়। ডাটাটা বিভিন্ন রকমের হতে পারে – অবজেক্ট বা ফাইল।

 
 
 
fetch(‘https://jsonplaceholder.typicode.com/todos’, {
method: ‘POST’,
headers: {‘content-type’: ‘application/json’},
body: JSON.stringify({
name: ‘Random’,
age: 28,
married: false
})
})
.then(response => response.json())
.then(data => console.log(data))
 

 

Put – এই মেথডটি দিয়ে ডাটা আপডেটের কাজ করা হয়। এর mechanism হচ্ছে যে প্রথমে চেক করা হবে যে যেই রিসোর্সটি আপডেটের চেষ্টা করা হচ্ছে, তা আদৌ আছে নাকি। যদি থাকে, তাহলে সেটাকে আপডেট করা হবে। অন্যথায় নতুন রিসোর্স তৈরি করা হবে।

 
 
 
fetch(‘https://jsonplaceholder.typicode.com/todos/2’, {
method: ‘PUT’,
headers: {‘content-type’: ‘application/json’},
body: JSON.stringify({
name: ‘Random’,
age: 25,
married: true
})
})
.then(response => response.json())
.then(data => console.log(data))
 

 

Patch – এই মেথডটি দিয়ে ডাটা আপডেটের কাজ করা হয়। মেথডটি তখনই ব্যবহার করা হয় যখন ডাটা শুধুমাত্র আপডেটের প্রয়োজন, নতুন তৈরির প্রয়োজন নেই।

 
 
 
fetch(‘https://jsonplaceholder.typicode.com/todos/2’, {
method: ‘PATCH’,
headers: {‘content-type’: ‘application/json’},
body: JSON.stringify({
name: ‘Random Guy’,
age: 35,
married: true
})
})
.then(response => response.json())
.then(data => console.log(data))
 

 

Delete – এই মেথডটি দিয়ে স্পেসিফিক রিসোর্স delete করা হয়।

 
 
 
fetch(‘https://jsonplaceholder.typicode.com/todos/1’, {
method: ‘DELETE’
})
.then(response => response.json())
.then(data => console.log(data))
 

Put, Patch এবং Delete মেথডে রিসোর্স যেটা মডিফাই করা হবে, সেটার identification value URL দিয়ে সাধারণত pass করা হয়।

  • XMLHttpRequest দিয়ে আমরা একটি GET কল করে ডাটা নিয়ে আসার চেষ্টা করি।
let request = new XMLHttpRequest();
request.open(“GET”, “/my/url”, async=false);
// async=false দিয়ে বোঝায় request টি syncronous হবে
request.responseType = ‘json’;
// এভাবে রেস্পন্সটাইপ সেট করে দেওয়া যায়
request.send();
request.onload = function() {
if (request.status != 200) {
alert(`Error ${request.status}: ${request.statusText}`);
} else {
alert(`Done, got ${request.response.length} bytes`);
}
};
request.onprogress = function(event) {
if (event.lengthComputable) {
alert(`Received ${event.loaded} of ${event.total} bytes`);
} else {
alert(`Received ${event.loaded} bytes`);
}
};
request.onerror = function() {
alert(“Request failed”);
};
  এখন আমরা XMLHttpRequest দিয়ে আমরা একটি POST কল এর উদাহরণ দেখবো
let formData = new FormData();
formData.append(“Name”, “Lee”);
let request = new XMLHttpRequest();
request.open(“POST”, “/article/post”);
request.setRequestHeader(‘Content-Type’, ‘multipart/form-data’);
request.send(formData);
request.onload = () => alert(request.response);
fetch api ব্যবহার করে সার্ভার থেকে ডাটা GET করার আমাদের সবসময় প্রমিস রিটার্ন  করে। এইজন্য আমাদেরকে ডাটা প্রসেস করার জন্য .then() ব্যবহার করতে হয়।
fetch(‘https://jsonplaceholder.typicode.com/todos’, {
method: ‘GET’
})
.then(response => response.json())
.then(data => console.log(data))
  • fetch api এর Post মেথড দিয়ে সার্ভারে ডাটা পাঠানো যায়। এখানেও রেসপন্স প্রমিস রিটার্ন করে। এই জন্য then ব্যবহার করতে হয়
fetch(‘https://jsonplaceholder.typicode.com/todos’, {
method: ‘POST’,
headers: {‘content-type’: ‘application/json’},
body: JSON.stringify({
name: ‘Random’,
age: 28,
married: false
})
})
.then(response => response.json())
.then(data => console.log(data))
  • fetch api দিয়ে একটা PUT রিকোয়েস্ট করতে হবে।
URL: https://jsonplaceholder.typicode.com/todos/2/
Payload: {
name: ‘Random’,
age: 25,
married: true
}
  • fetch api দিয়ে একটা DELETE রিকোয়েস্ট করতে হবে।
URL: https://jsonplaceholder.typicode.com/todos/1
5.2. কিভাবে অ্যাসিঙ্ক্রোনাস জাভাস্ক্ৰিপ্ট হ্যান্ডেল করবেন?
5.4. Event loop (ইভেন্ট লুপ) কি?
Vivasoft-logo

প্রিমিয়াম কোয়ালিটির সফটওয়্যার সলুশ্যনের জন্য নির্ভরযোগ্য প্রতিষ্ঠান থেকে আউটসোর্স করুন আপনার কাঙ্ক্ষিত সফটওয়্যার এবং ব্যবসাকে করুন আগের থেকে আরো বেশি তরান্বিত। আউটসোর্সিং এর ব্যাপারে এমন একটি টিম নির্বাচন করুন যারা তাদের দক্ষতা ও সৃষ্টিশীলতার মাধ্যমে আপনার ভিশনকে করবে আরো সুদৃঢ়।

সামাজিক মিডিয়াতে আমরা

Facebook Linkden Instagram

ঠিকানা

বনানী অফিস

ফ্লোর #১১, ১৬ ও ১৯ , আহমেদ টাওয়ার ২৮-৩০,কামাল আতাতুর্ক এভিনিউ, ঢাকা ১২১৩।

রাজশাহী অফিস

৬/এ, রাবেয়া ভিলা, বালিয়াপাকুর বোরো বটতলা, ওয়ার্ড - ২৭, বোয়ালিয়া, রাজশাহী-৬২০৪

লিংকসমূহ

অন্যান্য

যোগাযোগ করুন

contact@vivasoftltd.com

+880 1713428432

অফিসের সময়: সোমবার থেকে শুক্রবার সকাল 10:00 - 7:00 PM GMT +6:00

© Vivasoft 2024 • All rights reserved.