একটি ওয়েব অ্যাপ্লিকেশন বিল্ড করার কর্নারস্টোন হলো HTTP রিকোয়েস্ট ব্যবহার করা। HTTP রিকোয়েস্ট ডেটা ক্যাপচার করার অনুমতি দেয় ইউজার ইনপুট থেকে তারপর ব্যাক এন্ডের মাধ্যমে একটি সার্ভারে পাঠানো। পরে, একটি রেসপন্স রিটার্ন করা হয়।
কখনও কখনও এই রিকোয়েস্টগুলো ডেটা পাঠায় যা ডেটাবেসে সেভ হয়, যেমন একটি POST রিকোয়েস্ট। অন্যান্য কমন রিকোয়েস্ট একটি রেসপন্স রিসিভ করে এবং ইউজারকে ডিসপ্লে করে। এটি GET রিকোয়েস্ট হিসেবে পরিচিত। jQuery-র একটি get() মেথড আছে যা একটি রিকোয়েস্ট পাঠানো একটি স্ট্রিমলাইনড প্রসেস করে দেয়।
jQuery get() কী?
jQuery get() হলো একটি মেথড যা একটি GET রিকোয়েস্ট পাঠায় একটি URL এন্ডপয়েন্টে এবং একটি রেসপন্স রিসিভ করে। রেসপন্স হলো সার্ভার থেকে পাঠানো ডেটা। একটি POST রিকোয়েস্টের বিপরীতে, একটি GET রিকোয়েস্ট শুধু প্রি-এক্সিস্টিং ডেটা রিসিভ করে সার্ভার থেকে। এটি ডেটাবেসে কিছু সেভ করে না।
একটি GET রিকোয়েস্ট উপকারী একটি স্পেসিফিক সাবসেট ডেটা রিকোয়েস্ট করার জন্য এবং সেটির সাথে কিছু করার জন্য। উদাহরণস্বরূপ, আমরা যদি একটি ই-কমার্স অ্যাপ বিল্ড করি, তবে আমরা একটি GET রিকোয়েস্ট পাঠাব একটি URL এন্ডপয়েন্টে প্রোডাক্টগুলো অ্যাক্সেস করার জন্য। আমরা রেসপন্সে রিসিভ করা ডেটা নিতে পারি, এবং এটিকে স্টাইল করতে পারি সব উপলব্ধ প্রোডাক্টের একটি কার্ড লেআউট তৈরি করতে।
jQuery get() রেসপন্সিবল একটি URL-এ রিকোয়েস্ট পাঠাতে এবং ডেটা রেসপন্স হিসেবে রিসিভ করতে। ডেভেলপার এখন সার্ভার থেকে ডেটা অ্যাক্সেস করতে পারেন এবং তা ইউজারকে যেভাবে চান তেভাবে ডিসপ্লে করতে পারেন।
এখন যেহেতু আমরা GET রিকোয়েস্ট কী সেটি ফ্যামিলিয়ার হয়েছি, চলুন get() মেথডের সিনট্যাক্সে এক নজর দিই।
get() jQuery সিনট্যাক্স
jQuery একটি GET রিকোয়েস্ট পাঠানো সোজা করে দিয়েছে। get() URL অ্যাড্রেস একটি স্ট্রিং হিসেবে রিসিভ করে এবং একটি কলব্যাক ফাংশন ডেটা রিসিভ করার জন্য। বেসিক্যালি, একটি কলব্যাক ফাংশন হলো একটি ফাংশন যা একটি মেথডে পাস করা হয় বাদে এক্সিকিউট হওয়ার জন্য।
কলব্যাক ফাংশন সম্পর্কে আরও ইন-ডেপথ এক্সপ্লানেশনের জন্য, এই গাইড চেক আউট করুন।
get() কয়েকটি অপশনাল আর্গুমেন্ট গ্রহণ করে, কিন্তু সবচেয়ে কমনলি ইউজড হলো URL এবং কলব্যাক ফাংশন।
আমাদের ই-কমার্স উদাহরণের সাথে থাকি, চলুন দেখি একটি বেসিক GET রিকোয়েস্ট get() ব্যবহার করে কীভাবে দেখাবে:
$.get('/products', (data) => { console.log(data) })
আমরা get() কল করি এবং এটিতে URL পাস করি একটি স্ট্রিং হিসেবে। রিকোয়েস্টটি প্রোডাক্টস ইনডেক্স পেজে পাঠানো হচ্ছে এবং সার্ভার ডেটা পাঠিয়ে দেবে। কলব্যাক ফাংশন কয়েকটি আর্গুমেন্ট গ্রহণ করে, কিন্তু ডেটা এবং স্ট্যাটাস আমাদের উদ্দেশ্যে পর্যাপ্ত।
Data রিপ্রেজেন্ট করে রিকোয়েস্ট থেকে রিসিভ করা ডেটা। আমাদের উদাহরণে, আমরা শুধু কনসোলে যা রিটার্ন হয়েছে তা আউটপুট করছি। jQuery কিছু ডেটা টাইপ রিকগনাইজ করার জন্য বিল্ট ছিল, কিন্তু সবচেয়ে সম্ভবত আমরা একটি JSON অবজেক্ট পাব।
আমাদের JSON অবজেক্ট থেকে ডিজায়ারড ইনফরমেশন এক্সট্রাক্ট করার জন্য আরও কোড প্রয়োজন হবে। চলুন দেখি আমরা কীভাবে তা করতে পারি।
jQuery get() উদাহরণ
আমাদের উদাহরণের জন্য, চলুন একটি ফান API ব্যবহার করি। এই সাইট আমাদের বলে দেয় এখন কতজন অ্যস্ট্রোনট স্পেসে আছেন! এছাড়া নাম এবং স্পেসক্রাফটও দেয়। চলুন URL get()-এ পাস করি:
$.get('https://api.open-notify.org/astros.json', (data) => { console.log(data) })
যখন আমরা রিকোয়েস্ট পাঠাই, আমরা এই রেসপন্স কনসোলে লগড পাই:
URL থেকে, আমরা ইতিমধ্যে জানি আমরা একটি JSON অবজেক্ট পাব সার্ভার থেকে। কনসোলে, আমরা "message", "number", এবং "people" কীগুলো দেখি। success মেসেজ ভ্যালু এরর হ্যান্ডলিং-এ হেল্প করে।
number কীটি স্পেসে থাকা মানুষের কাউন্টকে রেফার করে। "People" একটি অ্যারে অফ অবজেক্ট ধারণকারী একটি ভ্যালুকে পয়েন্ট করে। এখান থেকে, আমরা "people" অ্যারে 넘는 ইটারেট করতে পারি এবং সেই ইনফরমেশন ইউজারকে একটি লিস্ট হিসেবে ডিসপ্লে করতে পারি। সার্ভার দ্বারা রিটার্ন করা ডেটা পাওয়া ডেভেলপারের চোইস খুলে দেয় কীভাবে ডেটা ডিসপ্লে করা হবে।
উপসংহার
আমরা রিভিউ করেছি GET রিকোয়েস্ট কী এবং jQuery কীভাবে এটাকে কুইক এবং স্ট্রেটফরওয়ার্ড করে। কমন সিনট্যাক্স প্র্যাকটিসের সাথে ফ্যামিলিয়ার হওয়ার পর, আমরা get() একশনে দেখেছি। নোট করা গুরুত্বপূর্ণ যে ডেটা কলব্যাক ফাংশনের বডি থেকে ইটারেট এবং রেন্ডার করা যাবে।
এখান থেকে, একটি ফান প্রজেক্ট হতে পারে সিম্পল API-গুলো লুক আপ করা এবং ছোট প্রজেক্ট বিল্ড করা GET রিকোয়েস্ট পাঠাতে এবং সেই ডেটা ডিসপ্লে করার প্র্যাক্টিস করার জন্য। ডেটা রিসিভ এবং রেন্ডার করা একটি প্লিজিংভাবে একজন প্রফিশিয়েন্ট ডেভেলপার बनার শুরু।
