Ajax মূলত একটি ক্লায়েন্ট-সাইড প্রযুক্তি, যা ব্রাউজার এবং সার্ভারের মধ্যে ডেটা লেনদেন করে পেজ রিফ্রেশ ছাড়াই। এটি অ্যাসিনক্রোনাস অর্থাৎ ব্রাউজারের অন্য কার্যকলাপের সঙ্গে ডেটা লেনদেন সমান্তরালভাবে সম্পন্ন করে। Ajax এর কাজের প্রক্রিয়া নিম্নলিখিত ধাপগুলোতে বিভক্ত:
Ajax কার্যকর হয় তখন, যখন ব্যবহারকারী ওয়েব পেজের একটি নির্দিষ্ট উপাদানের (যেমন: বাটন ক্লিক, ফর্ম সাবমিট) মাধ্যমে কোনো ইন্টারঅ্যাকশন করে।
JavaScript এর মাধ্যমে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়, যা সার্ভারে HTTP Request পাঠাতে সহায়তা করে।
var xhr = new XMLHttpRequest();
XMLHttpRequest অবজেক্ট ব্যবহার করে সার্ভারের জন্য HTTP Request সেটআপ করা হয়। সাধারণত GET
বা POST
মেথড ব্যবহার করা হয়।
xhr.open("GET", "url-to-fetch-data", true);
send()
মেথড ব্যবহার করে সার্ভারে অনুরোধ পাঠানো হয়। এটি অ্যাসিনক্রোনাসভাবে কাজ করে।
xhr.send();
সার্ভার অনুরোধটি প্রক্রিয়া করে একটি রেসপন্স পাঠায়। সেই রেসপন্সটি XMLHttpRequest অবজেক্টের মাধ্যমে গ্রহণ করা হয়।
xhr.onload = function () {
if (xhr.status == 200) {
console.log(xhr.responseText);
}
};
সার্ভার থেকে প্রাপ্ত ডেটা JavaScript এর মাধ্যমে DOM (Document Object Model) কে আপডেট করে। এটি পেজ রিলোড ছাড়া ইন্টারফেস পরিবর্তন করতে সহায়তা করে।
document.getElementById("content").innerHTML = xhr.responseText;
নিম্নলিখিত উদাহরণে একটি বাটন ক্লিকের মাধ্যমে Ajax ব্যবহার করে ডেটা লোড করার প্রক্রিয়া দেখানো হয়েছে।
<button onclick="loadData()">Load Data</button>
<div id="content"></div>
<script>
function loadData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.txt", true);
xhr.onload = function () {
if (xhr.status == 200) {
document.getElementById("content").innerHTML = xhr.responseText;
}
};
xhr.send();
}
</script>
Ajax এর কাজের প্রক্রিয়া সহজ এবং কার্যকর হলেও এটি ব্যবহার করতে হলে JavaScript এর উপর নির্ভর করতে হয়। এটি পেজ রিলোড ছাড়াই ডেটা লোডিংয়ের মাধ্যমে ওয়েব অ্যাপ্লিকেশনের ইন্টারফেসকে আরও ব্যবহারবান্ধব করে তোলে।
Ajax এর কাজের বেসিক ধাপগুলো নিম্নে ধারাবাহিকভাবে ব্যাখ্যা করা হলো। এই ধাপগুলো অনুসরণ করে Ajax এর মাধ্যমে সার্ভারের সাথে ডেটা আদান-প্রদান করা হয় এবং ডায়নামিকভাবে ওয়েব পেজ আপডেট করা যায়:
Ajax এর মাধ্যমে সার্ভারের সাথে যোগাযোগ করার জন্য প্রথমে JavaScript এর XMLHttpRequest
অবজেক্ট তৈরি করতে হয়। এটি Ajax রিকোয়েস্ট তৈরি ও ম্যানেজ করার জন্য ব্যবহৃত হয়।
var xhr = new XMLHttpRequest();
XMLHttpRequest
অবজেক্ট তৈরি করার পরে, আমরা open()
মেথড ব্যবহার করে রিকোয়েস্টের টাইপ (GET বা POST) এবং সার্ভারের URL নির্ধারণ করি। এটি জানায় যে, কোন URL থেকে ডেটা আনা বা কোন URL-এ ডেটা পাঠানো হবে।
xhr.open("GET", "data-url.json", true);
"GET"
বা "POST"
: HTTP রিকোয়েস্টের টাইপ।"data-url.json"
: সার্ভারের URL (যেখান থেকে ডেটা আনা হবে)।true
: এটি নির্দেশ করে যে রিকোয়েস্টটি অ্যাসিনক্রোনাস (অ্যাসিনক) হবে।রিকোয়েস্টের সেটআপ করার পরে, send()
মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়। যদি এটি POST রিকোয়েস্ট হয়, তবে send()
মেথডে ডেটা প্যারামিটার হিসেবে পাঠানো হয়।
xhr.send();
সার্ভার থেকে রেসপন্স পাওয়ার পরে, onreadystatechange
ইভেন্ট হ্যান্ডলার ব্যবহার করে সেই রেসপন্স হ্যান্ডেল করা হয়। আমরা চেক করি যে রিকোয়েস্টের রেডি স্টেট এবং HTTP স্ট্যাটাস কোড ঠিক আছে কিনা (রেডি স্টেট ৪ এবং স্ট্যাটাস ২০০ হওয়া প্রয়োজন)।
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// রেসপন্স ডেটা প্রসেস করা
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
readyState
:0
: রিকোয়েস্ট তৈরি হয়নি।1
: রিকোয়েস্ট সেটআপ হয়েছে (open() কল হয়েছে)।2
: রিকোয়েস্ট সার্ভারে পাঠানো হয়েছে।3
: রিকোয়েস্ট প্রসেসিং চলছে।4
: রিকোয়েস্ট সম্পূর্ণ এবং রেসপন্স রেডি।status
: সার্ভারের HTTP রেসপন্স স্ট্যাটাস কোড (২০০ মানে সফল)।সার্ভার থেকে ডেটা পাওয়ার পর, JavaScript ব্যবহার করে HTML DOM আপডেট করা হয়। আমরা এই ডেটা ব্যবহার করে পেজের বিভিন্ন এলিমেন্ট আপডেট করি, যেমন টেক্সট পরিবর্তন করা, নতুন কন্টেন্ট যোগ করা, বা ডায়নামিকভাবে টেবিল ভিউ আপডেট করা।
document.getElementById("content").innerHTML = data.content;
Ajax রিকোয়েস্টের সময় কোনো এরর হলে, সেই এররকে হ্যান্ডেল করা জরুরি। আমরা onerror
ইভেন্ট ব্যবহার করে এরর হ্যান্ডেল করতে পারি।
xhr.onerror = function() {
console.error("Request failed.");
};
এই ধাপগুলো অনুসরণ করে Ajax এর মাধ্যমে ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করা যায়।
XMLHttpRequest
হলো Ajax এর একটি মূল উপাদান এবং এটি JavaScript API এর একটি অংশ, যা ওয়েব ব্রাউজার এবং ওয়েব সার্ভারের মধ্যে ডেটা এক্সচেঞ্জ করার জন্য ব্যবহৃত হয়। XMLHttpRequest
অবজেক্ট ব্যবহার করে, ওয়েব পেজ সার্ভারের সাথে ডেটা আদান-প্রদান করতে পারে পেজ রিলোড ছাড়াই, যা ডায়নামিক এবং ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। নিচে XMLHttpRequest
এর ভূমিকা এবং এর ব্যবহার নিয়ে বিস্তারিত আলোচনা করা হলো:
১. অ্যাসিনক্রোনাস ডেটা এক্সচেঞ্জ:
XMLHttpRequest
অবজেক্ট ব্যবহার করে, অ্যাসিনক্রোনাস (অ্যাসিনক) পদ্ধতিতে সার্ভারের সাথে ডেটা আদান-প্রদান করা যায়। এর ফলে, পেজটি রিফ্রেশ করা ছাড়াই ইউজার ইন্টারফেসে ডায়নামিক কন্টেন্ট আপডেট করা যায়।২. GET এবং POST রিকোয়েস্ট পরিচালনা:
XMLHttpRequest
অবজেক্ট ব্যবহার করে আমরা HTTP রিকোয়েস্ট (GET বা POST) পাঠাতে পারি।GET
রিকোয়েস্ট সাধারণত ডেটা আনার জন্য ব্যবহৃত হয়, আর POST
রিকোয়েস্ট ডেটা পাঠানোর জন্য।৩. সার্ভার রেসপন্স রিসিভ করা এবং প্রসেস করা:
XMLHttpRequest
অবজেক্ট ব্যবহার করে আমরা সার্ভার থেকে আসা রেসপন্স রিসিভ করতে পারি এবং সেই রেসপন্সকে প্রসেস করতে পারি।৪. DOM ম্যানিপুলেশন:
XMLHttpRequest
এর মাধ্যমে প্রাপ্ত ডেটা ব্যবহার করে ওয়েব পেজের HTML DOM আপডেট করা যায়। উদাহরণস্বরূপ, সার্ভার থেকে একটি JSON ডেটা এনে তা HTML টেবিল বা ড্রপডাউন তালিকায় রিয়েল-টাইমে আপডেট করা যায়।৫. এরর হ্যান্ডলিং:
XMLHttpRequest
এর মাধ্যমে সার্ভারের সাথে যোগাযোগ করার সময় কোনো সমস্যা হলে (যেমন, নেটওয়ার্ক সমস্যা বা সার্ভার এরর), এরর হ্যান্ডলিং করা যায়। এর মাধ্যমে ইউজারকে সঠিক বার্তা দেখানো বা বিকল্প ব্যবস্থা গ্রহণ করা সম্ভব হয়।XMLHttpRequest
অবজেক্ট তৈরি করে এবং ব্যবহারের প্রক্রিয়া নিচে ব্যাখ্যা করা হলো:
var xhr = new XMLHttpRequest(); // XMLHttpRequest অবজেক্ট তৈরি করা
xhr.open("GET", "https://example.com/api/data", true); // রিকোয়েস্ট সেটআপ করা (GET এবং URL)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা
console.log(xhr.responseText); // রেসপন্স ডেটা কনসোলে দেখানো
}
};
xhr.send(); // রিকোয়েস্ট পাঠানো
xhr.open(method, url, async)
: এটি রিকোয়েস্টের টাইপ (যেমন GET/POST) এবং সার্ভারের URL নির্ধারণ করে।xhr.send()
: এটি রিকোয়েস্ট সার্ভারে পাঠায়।xhr.onreadystatechange
: এটি রিকোয়েস্টের অবস্থা পরিবর্তিত হলে একটি ফাংশন কল করে।xhr.responseText
: এটি সার্ভার থেকে প্রাপ্ত রেসপন্স ডেটা ধারণ করে।সার্বিকভাবে, XMLHttpRequest
Ajax এর একটি প্রধান উপাদান, যা ওয়েব পেজকে ডায়নামিক ও ইন্টারেক্টিভ করে তোলে এবং ইউজার এক্সপেরিয়েন্সকে উন্নত করে।
Ajax রিকোয়েস্ট দুটি পদ্ধতিতে কাজ করতে পারে: Asynchronous এবং Synchronous। এই দুটি পদ্ধতির মধ্যে মূল পার্থক্য হলো কিভাবে ব্রাউজার সার্ভারের সাথে যোগাযোগ করে এবং কিভাবে রেসপন্সের জন্য অপেক্ষা করে। নিচে Asynchronous এবং Synchronous Ajax এর মধ্যে পার্থক্য ব্যাখ্যা করা হলো:
১. অ্যাসিনক্রোনাস নেচার:
২. ইউজার ইন্টারফেস ফ্রিজ না হওয়া:
৩. ব্যবহার:
৪. কোড উদাহরণ:
var xhr = new XMLHttpRequest();
xhr.open("GET", "data-url.json", true); // true = Asynchronous
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText); // রেসপন্স ডেটা প্রসেস করা
}
};
xhr.send();
true
প্যারামিটারটি নির্দেশ করে যে রিকোয়েস্ট অ্যাসিনক্রোনাসভাবে কাজ করবে। এটি পেজের অন্যান্য কাজ চলমান অবস্থায় রিকোয়েস্ট প্রক্রিয়া চালিয়ে যাবে।৫. প্রসেসিং ইফিশিয়েন্সি:
১. সিঙ্ক্রোনাস নেচার:
২. ইউজার ইন্টারফেস ব্লক করা:
৩. ব্যবহার:
৪. কোড উদাহরণ:
var xhr = new XMLHttpRequest();
xhr.open("GET", "data-url.json", false); // false = Synchronous
xhr.send();
if (xhr.status === 200) {
console.log(xhr.responseText); // রেসপন্স ডেটা প্রসেস করা
}
false
প্যারামিটারটি নির্দেশ করে যে রিকোয়েস্টটি সিঙ্ক্রোনাসভাবে কাজ করবে। এটি তখন পর্যন্ত অন্য কোনো কাজ করবে না যতক্ষণ না রেসপন্স পাওয়া যায়।প্রসেসিং ইফিশিয়েন্সি:
বৈশিষ্ট্য | Asynchronous Ajax | Synchronous Ajax |
---|---|---|
রেসপন্স টাইম | রেসপন্স পাওয়ার জন্য ব্রাউজার অপেক্ষা করে না এবং অন্যান্য কাজ চলমান থাকে। | রেসপন্স পাওয়া পর্যন্ত ব্রাউজার অপেক্ষা করে এবং অন্য কোনো কাজ করে না। |
UI প্রতিক্রিয়া | ইউজার ইন্টারফেস প্রতিক্রিয়াশীল থাকে এবং ইউজার অন্যান্য কাজ করতে পারে। | UI ব্লক হয়ে যায় এবং ইউজার কিছু করতে পারে না। |
ব্যবহারিক সুবিধা | দ্রুত এবং স্মুথ, ওয়েব অ্যাপ্লিকেশন তৈরিতে বেশি ব্যবহৃত হয়। | UI ফ্রিজ করে, ইউজার এক্সপেরিয়েন্স খারাপ করে। |
সেটিং | true প্যারামিটার দিয়ে সেট করা হয়। | false প্যারামিটার দিয়ে সেট করা হয়। |
HTTP মেথড GET এবং POST হলো Ajax এবং ওয়েব ডেভেলপমেন্টের ক্ষেত্রে সবচেয়ে সাধারণ এবং গুরুত্বপূর্ণ মেথড। এই মেথডগুলো ওয়েব ব্রাউজার এবং সার্ভারের মধ্যে ডেটা আদান-প্রদান করতে ব্যবহৃত হয়। Ajax এর মাধ্যমে GET এবং POST মেথড ব্যবহার করে সার্ভারের সাথে ডেটা পাঠানো এবং গ্রহণ করা হয়। নিচে GET এবং POST মেথডের ভূমিকা এবং তাদের মধ্যে পার্থক্য আলোচনা করা হলো:
১. ডেটা পাঠানোর সীমাবদ্ধতা:
২. ক্যাশিং:
৩. সুরক্ষার দিক:
৪. Idempotent Property:
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data?id=123", true);
xhr.send();
request body
এর মাধ্যমে পাঠানো হয়, যা URL এর বাইরে থাকে, ফলে এটি GET মেথডের তুলনায় বেশি নিরাপদ।১. ডেটা পাঠানোর সীমাবদ্ধতা নেই:
request body
তে পাঠানো হয়, তাই ডেটার আকারের কোনো সীমাবদ্ধতা নেই এবং এটি বড় ডেটা পাঠানোর জন্য উপযুক্ত।২. নিরাপত্তা:
request body
তে পাঠানো হয়, তাই ডেটা URL হিস্টোরিতে সংরক্ষিত হয় না এবং ব্রাউজারে দেখা যায় না। সংবেদনশীল তথ্য পাঠানোর জন্য POST মেথড নিরাপদ।৩. Idempotent Property:
৪. ক্যাশিং:
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api/data", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({ name: "John", age: 30 }));
বৈশিষ্ট্য | GET | POST |
---|---|---|
ডেটা পাঠানোর উপায় | URL এর কুয়েরি স্ট্রিং হিসেবে পাঠানো হয়। | request body এর মাধ্যমে পাঠানো হয়। |
ডেটার আকারের সীমাবদ্ধতা | সাধারণত সীমিত (URL দৈর্ঘ্য অনুযায়ী)। | বড় আকারের ডেটা পাঠানো সম্ভব। |
নিরাপত্তা | কম নিরাপদ (URL এ দেখা যায়)। | বেশি নিরাপদ (ডেটা request body এ থাকে)। |
ক্যাশিং | ব্রাউজার ক্যাশ করতে পারে। | সাধারণত ক্যাশ করা হয় না। |
Idempotent Property | হ্যাঁ (একই রিকোয়েস্ট বারবার করলে ফলাফল একই)। | না (একাধিকবার রিকোয়েস্ট করলে ফলাফল পরিবর্তিত হতে পারে)। |
Read more