এটি ওয়েব ডেভেলপমেন্টের অন্যতম কোর এবং গুরুত্বপূর্ণ একটি কনসেপ্ট! ব্রাউজার বা ফ্রন্টএন্ড থেকে যখন আমরা ব্যাকএন্ডে (সার্ভারে) ডেটা পাঠাই, তখন সেই ডেটাগুলোকে কোনো না কোনোভাবে “প্যাকেট” বা এনকোড (Encode) করে পাঠাতে হয়।
প্রধানত ৩টি ফরম্যাট সবচেয়ে বেশি ব্যবহৃত হয়: URL Encoded, Multipart/Form-Data, এবং JSON। চলো ভেতরে ঢুকে দেখি এগুলো আসলে কীভাবে কাজ করে।
১. application/x-www-form-urlencoded (URL Encoded)
এটি হলো এইচটিএমএল (HTML) ফর্মের একদম ডিফল্ট বা জন্মগত ফরম্যাট। তুমি যদি ফর্মে কোনো নির্দিষ্ট টাইপ বলে না দাও, ব্রাউজার এই ফরম্যাটেই ডেটা পাঠায়।
- কীভাবে কাজ করে?
এটি পুরো ফর্মের ডেটাকে একটি লম্বা স্ট্রিংয়ে পরিণত করে। ঠিক যেমন URL-এর শেষে কুয়েরি স্ট্রিং থাকে, সেভাবে
key=valueআকারে ডেটা সাজায় এবং একাধিক ফিল্ড থাকলে&দিয়ে যুক্ত করে। স্পেস থাকলে সেটাকে+বা%20বানিয়ে দেয়। - বিহাইন্ড দ্য সিন (Raw HTTP):
name=Hasib+Hasnain&age=24&city=Khulna- সুবিধা: খুব হালকা এবং সাধারণ ফর্মের জন্য দারুণ।
- অসুবিধা: কোনো ছবি বা ফাইল (File Upload) এই ফরম্যাটে পাঠানো সম্ভব না। কমপ্লেক্স বা নেস্টেড অবজেক্ট (যেমন একটা লিস্টের ভেতর আরেকটা লিস্ট) পাঠানো খুব কঠিন।
২. multipart/form-data
যখনই তোমার ফর্মে একটি <input type="file"> থাকবে, তখনই তোমাকে ফর্মে enctype="multipart/form-data" বলে দিতে হয়।
- কীভাবে কাজ করে? নাম শুনেই বোঝা যাচ্ছে, এটি ডেটাকে বিভিন্ন “পার্ট” বা অংশে ভাগ করে ফেলে। প্রতিটি অংশের মাঝে একটা দেয়াল বা Boundary তৈরি করে দেয়। ফলে সাধারণ টেক্সট ডেটার পাশাপাশি এটি বাইনারি ডেটা (যেমন: ইমেজের কাঁচা ডেটা) নিরাপদে পাঠাতে পারে।
- বিহাইন্ড দ্য সিন (Raw HTTP):
------WebKitFormBoundary7MA4YWxk
Content-Disposition: form-data; name="username"
Hasib
------WebKitFormBoundary7MA4YWxk
Content-Disposition: form-data; name="profilePic"; filename="photo.jpg"
Content-Type: image/jpeg
(এখানে ইমেজের হাবিজাবি বাইনারি কোড থাকে...)
------WebKitFormBoundary7MA4YWxk--
- সুবিধা: ফাইল আপলোডের জন্য এটাই একমাত্র স্ট্যান্ডার্ড উপায়।
- অসুবিধা: পেলোড (Payload) সাইজ একটু ভারী হয়ে যায়, কারণ বারবার ঐ বাউন্ডারি টেক্সটগুলো লিখতে হয়। শুধু মাত্র নাম-ঠিকানা পাঠানোর জন্য এটা ব্যবহার করাটা ওভারকিল (Overkill)।
৩. application/json (The Modern “Other”)
তুমি যখন React, Angular, Vue বা মোবাইল অ্যাপ থেকে কোনো API কল করো, তখন সাধারণত এই ফরম্যাটটি ব্যবহার করা হয়।
- কীভাবে কাজ করে? এটি ডেটাকে জাভাস্ক্রিপ্ট অবজেক্ট বা JSON স্ট্রিং আকারে পাঠায়।
- বিহাইন্ড দ্য সিন (Raw HTTP):
{
"name": "Hasib Hasnain",
"age": 24,
"skills": ["C#", ".NET", "Linux"]
}
- সুবিধা: যেকোনো কমপ্লেক্স ডেটা স্ট্রাকচার (Nested objects, Arrays) খুব সুন্দরভাবে এবং ক্লিন ওয়েতে পাঠানো যায়। সব মডার্ন ফ্রেমওয়ার্ক JSON খুব সহজে বুঝতে পারে।
- অসুবিধা: সরাসরি ফাইল পাঠানো যায় না (ফাইল পাঠাতে হলে ফাইলকে Base64 এনকোড করে বিশাল বড় স্ট্রিং বানিয়ে পাঠাতে হয়, যা মোটেও ভালো প্র্যাকটিস না)।
📊 এক নজরে তুলনামূলক চিত্র
| বৈশিষ্ট্য | x-www-form-urlencoded | multipart/form-data | application/json |
|---|---|---|---|
| ডেটার ধরন | প্লেইন টেক্সট (key=value) | টেক্সট + বাইনারি (ফাইল) | JSON স্ট্রিং |
| ফাইল আপলোড | ❌ সাপোর্ট করে না | ✅ সেরা অপশন | ❌ সাপোর্ট করে না |
| নেস্টেড ডেটা (Array/Object) | পাঠানো কঠিন/ঝামেলাপূর্ণ | পাঠানো কঠিন/ঝামেলাপূর্ণ | ✅ খুব সহজেই পাঠানো যায় |
| পেলোড সাইজ | সবচেয়ে হালকা | একটু ভারী (বাউন্ডারির কারণে) | মাঝারি (ডেটার ওপর নির্ভর করে) |
| ASP.NET Core Binding | [FromForm] | [FromForm] | [FromBody] |
💡 তুমি কখন কোনটা ব্যবহার করবে?
- শুধু টেক্সট ডাটা + API (যেমন: লগইন, রেজিস্ট্রেশন, রুম ফিল্টার): চোখ বন্ধ করে JSON (
application/json) ব্যবহার করবে। - ফাইল বা ইমেজ আপলোড (যেমন: প্রফাইল পিকচার আপডেট): অবশ্যই
multipart/form-dataব্যবহার করবে। - পুরোনো স্টাইলের HTML Form সাবমিট (যেখানে কোনো ফাইল নেই): ব্রাউজার ডিফল্টভাবে
x-www-form-urlencodedব্যবহার করবে, ওটাই থাকতে দেবে।