চলুন বুঝি AJAX কেন আছে, যাতে আপনি আপনার রেইলস প্রজেক্টগুলতে এর ব্যবহার ভালোভাবে বুঝতে পারেন।
যখন আপনি একটি ওয়েবসাইট ভিজিট করেন, কী হয়?
সার্ভার থেকে একটি পেজ লোড হয়। কিন্তু আপনি নতুন তথ্য দেখতে চাইলে পেজ রিলোড করতে হয় অথবা অন্য পেজে যেতে লিংক ক্লিক করতে হয়।
এটি একটি সিঙ্ক্রোনাস ফ্লো।
নতুন ডেটা শুধু তখন উপস্থিত হয় যখন সার্ভার থেকে নতুন পেজ রিকোয়েস্ট করা হয়।
কিন্তু...
যদি আপনি এই পেজ রিলোড চান না?
যদি আপনি ব্যাকএন্ড থেকে ডেটা ফেচ করতে চান, যেকোনো সময়, যাতে কারেন্ট পেজের যেকোনো অংশ আপডেট করতে পারেন?
এখানেই AJAX আসে।
AJAX মানে অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট এবং XML।
এটি একটি টেকনিক যা আপনার ওয়েব ফ্রেমওয়ার্ক থেকে স্বাধীন, কিন্তু রেইলস বিশেষভাবে এর জন্য ভালো সাপোর্ট দেয় যা আপনি এই আর্টিকেলে শিখবেন।
মনে রাখবেন যে আপনার অ্যাপে AJAX যোগ করলে সেটি আরও জটিল হয়ে যায়।
ডায়রেক্ট AJAX রিকোয়েস্ট
AJAX-এর দুটি অংশ আছে: রিকোয়েস্ট, যা আপনি ব্রাউজার থেকে জাভাস্ক্রিপ্ট দিয়ে করেন, এবং রেসপন্স, যা আপনি আপনার রুবি অ্যাপ থেকে হ্যান্ডল করেন।
আপনি AJAX রিকোয়েস্ট করতে পারেন প্লেইন জাভাস্ক্রিপ্ট দিয়ে।
কিন্তু যেহেতু এতে অনেক বয়লারপ্লেট কোড লাগে, আমরা সাধারণত এটি জাভাস্ক্রিপ্ট লাইব্রেরি যেমন jQuery দিয়ে করি।
jQuery রিকোয়েস্ট এরূপ দেখায়:
$.get( "/vegetables", function(data) { alert("Vegetables are good for you!"); });
তবে, রেইলস ৫.১ থেকে jQuery ডিফল্টলি উপলব্ধ নয় (কিন্তু আপনি আবার যোগ করতে পারেন)।
নোট: jQuery POST রিকোয়েস্ট করলে
InvalidAuthenticityTokenএরর পাবেন, এর মানে হলো সিকিউরিটির জন্য বর্তমান পেজ থেকেcsrf-tokenসাবমিট করতে হবে।Rails.ajaxব্যবহার করলে এটি অটোমেটিক হয়ে যায়।
সমাধান আছে!
রেইলস নিজস্ব AJAX ফাংশন দিয়ে আসে:
Rails.ajax({ url: "/books", type: "get", data: "", success: function(data) {}, error: function(data) {} })
মনে রাখবেন, এটি এখনো রিকোয়েস্ট সাইড থেকে, ব্রাউজার থেকে।
অর্থাৎ এটি জাভাস্ক্রিপ্ট কোড।
রেইলসে এই AJAX ফাংশনালিটি "Unobtrusive JavaScript" বা সংক্ষেপে "UJS" নামে কিছু দিয়ে প্রদান করা হয়।
AJAX দিয়ে পারশিয়াল আপডেট করা
আপনি AJAX থেকে পাওয়া ডেটা দিয়ে আপনার পেজের শুধু একটি অংশ আপডেট করতে চাইলে মূলত দুটি অপশন আছে।
- আপনি একটি জাভাস্ক্রিপ্ট + ERB ভিউ লিখতে পারেন, যা এলিমেন্টটি আপডেট করবে
- আপনি কন্ট্রোলার থেকে JSON রেসপন্স রিটার্ন করতে পারেন নতুন HTML স্ট্রিং হিসেবে, তারপর জাভাস্ক্রিপ্ট দিয়ে এলিমেন্টটি আপডেট করতে পারেন
একটি ৩য় অপশনও আছে।
এতে শুধু ডেটা JSON হিসেবে রিটার্ন করা হয়, তারপর সেই ডেটা দিয়ে জাভাস্ক্রিপ্টে HTML এলিমেন্ট জেনারেট করা হয়।
এখানেই রিয়েক্টের মতো JS ফ্রেমওয়ার্ক আসে।
আমার মতে, এগুলো অনাবশ্যক জটিলতা যোগ করে।
কিন্তু আমরা এটি প্লেইন জাভাস্ক্রিপ্ট দিয়েই হ্যান্ডেল করতে পারি!
সেটি হলো অপশন ১ এবং ২।
ফিলহাল সেগুলোর সাথে থাকি 🙂
জাভাস্ক্রিপ্ট ভিউ উদাহরণ:
Rails.$('.random-number')[0].innerHTML = ("<%= j (render partial: 'random') %>")
jহলোescape_javascriptএর এলিয়াস
jQuery উদাহরণ:
$('.random-number').html("<%= j (render partial: 'random') %>")
html এবং innerHTML দুটোই টার্গেট এলিমেন্টের কন্টেন্ট রিপ্লেস করে।
আপনি পুরো জিনিস রিপ্লেস করার বদলে jQuery দিয়ে একটি লিস্টে নতুন এলিমেন্ট অ্যাপেন্ডও করতে পারেন।
এই কোডটি .js.erb এক্সটেনশন الصالة ফাইলে রাখুন, নাম হবে করেন্ট একশনের নাম (যেমন create.js.erb) এবং ভিউজ ফোল্ডারের ভিতরে।
কন্ট্রোলার থেকে আপনি অন্য ভিউയের মতই এই ভিউ রেন্ডার করতে পারেন।
এখন:
যখন আপনি AJAX কল করবেন, এই জাভাস্ক্রিপ্ট কোড অটোমেটিক্যালি রান হবে এবং HTML আপডেট করবে।
চলুন ২ নম্বর অপশনটি দেখি।
এখানে কন্ট্রোলার কোড:
render json: { html: render_to_string(partial: 'random') }
তারপর আপনার জাভাস্ক্রিপ্ট কোড থেকে:
Rails.ajax({ url: "/books", type: "get", success: function(data) { Rails.$(".random-number")[0].innerHTML = data.html; } })
এটি আরেকটি পদ্ধতি!
আপনি কী ব্যবহার করবেন?
DHH-এর পছন্দ হলো প্রথম পদ্ধতি, যাকে তিনি "SJR" (Server-Generated Javascript) বলেন।
আমার ধারণা রেইলস আপনাকে এইভাবে করাই চায়, কিন্তু উভয় পদ্ধতি (SJR এবং render_to_string) নিজে চেষ্টা করুন এবং দেখুন আপনার জন্য কোনটি ভালো কাজ করে।
জাভাস্ক্রিপ্ট ভিউর জন্য HAML কীভাবে ব্যবহার করবেন
ঠিক আছে।
ধরুন আপনি HAML ইউজার।
কি SJR টেকনিক এবং .js.haml ভিউ রেন্ডার করা সম্ভব?
হ্যাঁ!
এখানে একটি উদাহরণ:
- content = j (render partial: "random") Rails.$('.random-number')[0].innerHTML = ("#{content}")
ERB ভার্সনের চেয়ে একটু বদসूरत, কিন্তু কাজ করে।
পেজ রিফ্রেশ ছাড়া রেইলস ফর্ম সাবমিট করা
আপনি AJAX দিয়ে ফর্ম সাবমিট করতে চাইলে AJAX রিকোয়েস্ট লিখতে হবে না।
রেইলস আপনার জন্য এটি হ্যান্ডেল করতে পারে।
কীভাবে?
form_for-এর সাথে remote: true অপশন ব্যবহার করুন।
এখানে একটি উদাহরণ:
<%= form_for @fruit, remote: true do |f| %> <%= f.label :name, 'Fruit' %> <%= f.text_field :name %> <%= f.submit 'Create' %> <% end %>
এখন "Create" ক্লিক করলে রেইলস আপনার জন্য AJAX রিকোয়েস্ট পাঠাবে এবং পেজ রিলোড হবে না।
আপনি ভ্যালিডেশন এরর দেখাতে চাইলে আপনাকে একটি জাভাস্ক্রিপ্ট ভিউ (.js.erb ফাইল) তৈরি ও রেন্ডার করতে হবে যা করেন্ট এররগুলোর সাথে নয়া এররগুলো রিপ্লেস করবে।
"AJAX দিয়ে পারশিয়াল আপডেট করা" সেকশনের উদাহরণের মত।
ব্রাম্ভে, এই remote অপশনটি লিংকগুলোর ওপরও ব্যবহার করা যায়, যাতে AJAX delete রিকোয়েস্ট করা যায়।
উদাহরণ:
<%= link_to "Delete", book_path(book), { method: "delete", remote: true, data: { confirm: "Are you sure?" } }
আপনি জাভাস্ক্রিপ্ট ভিউ দিয়ে রেসপন্স হ্যান্ডেল করতে পারেন।
আপনি যদি HTML রিকোয়েস্ট (পেজ রিলোড থেকে আসা) এবং AJAX রিকোয়েস্ট দুটোই হ্যান্ডেল করতে চান, তবে respond_to মেথড ব্যবহার করতে হবে।
উদাহরণ:
respond_to do |f| f.html { redirect_to :index } f.js end
এই উদাহরণে Turbolinks হ্যান্ডেল করাই সহজ হতে পারে।
আপনি এখনও AJAX রিকোয়েস্ট ও কন্ট্রোলার থেকে redirect_to করতে পারেন (বিনা respond_to), তখন Turbolinks পেজ রিলোড ছাড়া পেজের কন্টেন্ট রিপ্লেস করবে।
AJAX কাজ না করলে? কিছু টিপস
আপনার AJAX রিকোয়েস্ট কাজ না করলে আপনার ডিবাগিং করতে হবে।
প্রথমে, আপনার ব্রাউজার ডেভেলপার টুলস খুলুন।
আপনি কনসোল প্যানেলে যেকোনো জাভাস্ক্রিপ্ট এরর খুঁজুন।
সেগুলো ফিক্স করুন।
এছাড়া নিশ্চিত হন যে আপনি যে CSS সিলেক্টর টার্গেট করছেন সেটি সঠিক এবং কোনো টাইপো নেই।
তারপর, আপনার রেইলস লগস চেক করুন যেকোনো এররের জন্য।
তারপর, নিশ্চিত হন যে সঠিক ভিউ রেন্ডার হচ্ছে।
আপনি এই প্রসেস ফলো করলে আপনার AJAX রিকোয়েস্ট কেন কাজ করছে না তা খুঁজে বের করে ফিক্স করতে পারবেন।
সারসংক্ষেপ
আপনি AJAX সম্পর্কে শিখেছেন, একটি ওয়েব ডেভেলপমেন্ট টেকনিক যা আপনাকে অ্যাসিঙ্ক্রোনাস রিকোয়েস্ট করতে দেয়!
আপনি রেইলসে এটি ইমপ্লিমেন্ট কীভাবে করবেন সেটাও শিখেছেন। মনে রাখবেন নন-জেএস ফ্রেমওয়ার্ক রেইলস অ্যাপ চালানোর জন্য AJAX আবশ্যক নয়, কিন্তু আপনার টুলবক্সে থাকলে এটি খুব উপকারী।
এই আর্টিকেলটি শেয়ার করতে ভুলবেন না যাতে আরও অনেকের উপকার হয় 🙂
পড়ার জন্য ধন্যবাদ!
