This content originally appeared on DEV Community and was authored by Arifur Rahman
তোমার দেওয়া কোডটি আমি ধাপে ধাপে ব্যাখ্যা করছি, যাতে তুমি সহজেই বুঝতে পারো এবং কখনো ভুলে না যাও। এটি হলো একটি AJAX রিকোয়েস্ট যা XMLHttpRequest ব্যবহার করে API থেকে ডেটা আনে। নিচে প্রতিটি লাইন কীভাবে কাজ করছে তা বাংলায় বুঝিয়ে দিচ্ছি।
১. ফাংশন তৈরি:
function fetchData() {
এখানে একটি ফাংশন তৈরি করা হয়েছে, যার নাম fetchData()। তুমি যখন এই ফাংশনটি কল করবে, তখন এটি সার্ভার থেকে ডেটা আনার জন্য AJAX রিকোয়েস্ট পাঠাবে।
২. XMLHttpRequest অবজেক্ট তৈরি:
var xhr = new XMLHttpRequest();
XMLHttpRequest হলো একটি বিল্ট-ইন জাভাস্ক্রিপ্ট অবজেক্ট, যা AJAX রিকোয়েস্ট পাঠাতে ব্যবহার করা হয়। xhr নামে একটি ভ্যারিয়েবল তৈরি করা হয়েছে, যেটি এই অবজেক্টটি ধারণ করছে।
৩. সার্ভারে GET রিকোয়েস্ট প্রস্তুত:
xhr.open('GET', 'https://api.example.com/data', true);
এখানে xhr.open() মেথডটি ব্যবহার করে সার্ভারে একটি GET রিকোয়েস্ট তৈরি করা হয়েছে। এই রিকোয়েস্টে তিনটি বিষয় আছে:
'GET': এটি HTTP মেথড, যা নির্দেশ করে যে আমরা সার্ভার থেকে ডেটা আনতে চাই (তথ্য পাঠানোর জন্য POST মেথড ব্যবহৃত হয়)।
'https://api.example.com/data': এটি হলো API এর ঠিকানা (endpoint)। তুমি এই ঠিকানায় রিকোয়েস্ট পাঠাচ্ছো, যেখানে থেকে সার্ভার ডেটা ফেরত পাঠাবে।
true: এটি নির্দেশ করে যে রিকোয়েস্টটি asynchronous হবে, অর্থাৎ পুরো পেজটি অপেক্ষা করবে না; ডেটা যখন পাওয়া যাবে তখন পেজের অন্য অংশের কাজ চলতে থাকবে।
৪. ডেটা পাওয়ার পর কী হবে:
xhr.onload = function() {
এটি হলো অনলোড ইভেন্ট, যা তখন ট্রিগার হবে যখন সার্ভার থেকে ডেটা আসবে। অর্থাৎ, যখন রিকোয়েস্ট সফলভাবে সম্পন্ন হবে এবং সার্ভার থেকে ডেটা আসবে, তখন এই ফাংশনটি চলবে।
৫. রেসপন্স স্ট্যাটাস চেক করা:
if (xhr.status === 200) {
এখানে xhr.status চেক করা হচ্ছে। 200 মানে হলো সার্ভার থেকে রিকোয়েস্ট সফলভাবে সম্পন্ন হয়েছে। যদি স্ট্যাটাস 200 হয়, তাহলে আমরা ডেটা প্রসেস করবো। অন্য যেকোনো স্ট্যাটাস মানে হতে পারে যে কোনো সমস্যা হয়েছে (যেমন 404 – পেজ না পাওয়া)।
৬. JSON ডেটা পার্স করা:
var data = JSON.parse(xhr.responseText);
xhr.responseText হলো সার্ভার থেকে আসা রেসপন্স, যা সাধারণত JSON ফরম্যাটে থাকে। JSON.parse() মেথডটি ব্যবহার করে JSON ডেটাকে জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তর করা হচ্ছে, যাতে আমরা সেটি সহজে ব্যবহার করতে পারি।
উদাহরণ:
{
"name": "John",
"age": 30
}
এটি JSON ফরম্যাট, যা সার্ভার থেকে আসতে পারে, এবং আমরা সেটিকে জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তর করবো।
৭. ডেটা কনসোলে দেখানো:
console.log(data);
console.log(data) ব্যবহার করে আমরা সেই ডেটাকে কনসোলে দেখাচ্ছি, যাতে ডেভেলপাররা সহজে ডেটা দেখতে এবং ডিবাগ করতে পারেন। তুমি ব্রাউজারের কনসোলে ডেটাটি দেখতে পাবে।
৮. রিকোয়েস্ট পাঠানো:
xhr.send();
xhr.send() মেথডটি ব্যবহার করে রিকোয়েস্ট সার্ভারে পাঠানো হয়। যখন রিকোয়েস্ট পাঠানো হবে, তখন সার্ভার সেটি গ্রহণ করবে এবং ডেটা পাঠিয়ে দেবে।
সম্পূর্ণ ব্যাখ্যা:
- ১. ফাংশনটি তৈরি করা হলো যা AJAX রিকোয়েস্ট পাঠাবে।
- ২. XMLHttpRequest অবজেক্ট তৈরি করা হলো AJAX রিকোয়েস্টের জন্য।
- ৩. সার্ভারে GET রিকোয়েস্ট প্রস্তুত করা হলো API থেকে ডেটা আনার জন্য।
- ৪. রিকোয়েস্ট সফলভাবে ডেটা নিয়ে এলে অনলোড ইভেন্ট কাজ করবে।
- ৫. যদি স্ট্যাটাস 200 হয়, তাহলে ডেটা প্রসেস করা হবে।
- ৬. JSON ডেটাকে জাভাস্ক্রিপ্ট অবজেক্টে পার্থক্য (parse) করা হবে।
- ৭. কনসোলে ডেটা দেখা যাবে।
- ৮. রিকোয়েস্ট পাঠানো হবে সার্ভারে।
সংক্ষেপে মনে রাখার টিপস:
AJAX দিয়ে API থেকে ডেটা নিতে XMLHttpRequest ব্যবহার করা হয়।
API URL এ রিকোয়েস্ট পাঠিয়ে ডেটা পাওয়া হয়।
ডেটা সাধারণত JSON ফরম্যাটে আসে এবং আমরা সেটি JSON.parse() করে ব্যবহার করি।
এইভাবে প্রতিটি ধাপ অনুসরণ করলে তুমি কখনো এই প্রক্রিয়াটি ভুলবে না!
This content originally appeared on DEV Community and was authored by Arifur Rahman
Arifur Rahman | Sciencx (2024-10-03T07:19:43+00:00) Ajax. Retrieved from https://www.scien.cx/2024/10/03/ajax-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.