रूबी ऑन Rails में AJAX में महारत हासिल करें: डायनामिक, एसिंक्रोनस वेब इंटरैक्शन

आइए समझते हैं कि AJAX क्यों मौजूद है, ताकि आप अपने Rails प्रोजेक्ट्स में इसका उपयोग कैसे करें इसका बेहतर अंदाजा लगा सकें।

जब आप किसी वेबसाइट पर जाते हैं, तो क्या होता है?

सर्वर से एक पेज लोड होता है। लेकिन अगर आप नई जानकारी देखना चाहते हैं तो आपको या तो पेज को रीलोड करके अपडेट करना होगा, या किसी लिंक पर क्लिक करके एक अलग पेज पर जाना होगा।

यह एक सिंक्रोनस फ्लो है।

नया डेटा केवल तभी प्रस्तुत किया जाता है जब सर्वर से एक नया पेज अनुरोध किया जाता है।

लेकिन...

क्या होगा यदि आप यह पेज रीलोड नहीं चाहते?

क्या होगा यदि आप बैकएंड से डेटा प्राप्त करना चाहते हैं, जब भी आप चाहें, ताकि आप वर्तमान पेज के किसी भी हिस्से को अपडेट कर सकें?

यहीं पर AJAX आता है।

AJAX का अर्थ है Asynchronous JavaScript & XML।

यह एक तकनीक है जो आपके वेब फ्रेमवर्क से स्वतंत्र है, लेकिन Rails में विशेष रूप से इसके लिए अच्छा समर्थन है जैसा कि आप इस लेख में सीखेंगे।

ध्यान रखें कि अपने ऐप में AJAX जोड़ने से यह अधिक जटिल हो जाता है।

डायरेक्ट AJAX रिक्वेस्ट

AJAX के दो भाग होते हैं, रिक्वेस्ट, जिसे आप ब्राउज़र से JavaScript का उपयोग करके बनाते हैं, और रिस्पांस, जिसे आप अपने रूबी ऐप से संभालते हैं।

आप AJAX रिक्वेस्ट बना सकते हैं सादे JavaScript के साथ।

लेकिन चूंकि इसके लिए बहुत सारे बॉयलरप्लेट कोड की आवश्यकता होती है, हम आमतौर पर इसे jQuery जैसी JavaScript लाइब्रेरी के माध्यम से करते हैं।

यहाँ एक jQuery रिक्वेस्ट कैसी दिखती है:

$.get(
  "/vegetables",
  function(data) {
    alert("Vegetables are good for you!");
  }
);

हालांकि, Rails 5.1 के बाद से jQuery डिफ़ॉल्ट रूप से उपलब्ध नहीं है (लेकिन आप इसे वापस जोड़ सकते हैं)।

नोट: जब आप jQuery POST रिक्वेस्ट करते हैं तो आपको InvalidAuthenticityToken एरर मिलेगा, इसका मतलब है कि आपको सुरक्षा उपाय के रूप में वर्तमान पेज से csrf-token सबमिट करना होगा। Rails.ajax का उपयोग करने से यह आपके लिए स्वचालित रूप से हो जाता है।

एक समाधान है!

Rails में अपना स्वयं का AJAX फंक्शन शामिल है:

Rails.ajax({
  url: "/books",
  type: "get",
  data: "",
  success: function(data) {},
  error: function(data) {}
})

याद रखें, यह अभी भी चीजों के रिक्वेस्ट पक्ष से है, ब्राउज़र से।

मतलब कि यह JavaScript कोड है।

Rails में, यह AJAX कार्यक्षमता "अनऑब्ट्रूसिव JavaScript", या संक्षेप में "UJS" नामक किसी चीज़ द्वारा प्रदान की जाती है।

AJAX के साथ पार्शियल अपडेट करना

यदि आप AJAX से प्राप्त डेटा के साथ अपने पेज के केवल एक हिस्से को अपडेट करना चाहते हैं, तो आपके पास ज्यादातर दो विकल्प हैं।

1. आप एक JavaScript + ERB व्यू लिख सकते हैं, जो एलिमेंट को अपडेट करता है
2. आप अपने कंट्रोलर से नए HTML को स्ट्रिंग के रूप में JSON प्रतिक्रिया के साथ वापस कर सकते हैं, फिर एलिमेंट को अपडेट करने के लिए JavaScript का उपयोग कर सकते हैं

एक तीसरा विकल्प भी है।

इसमें केवल डेटा को JSON के रूप में वापस करना शामिल है, फिर उस डेटा का उपयोग करके JavaScript के साथ HTML एलिमेंट्स उत्पन्न करना।

यहीं पर React जैसे JS फ्रेमवर्क आते हैं।

मेरी राय में, वे बहुत अधिक अनावश्यक जटिलता जोड़ते हैं।

लेकिन हम इसे सादे JavaScript के साथ संभाल सकते हैं!

वह विकल्प 1 और 2 हैं।

आइए अभी उन पर टिके रहें 🙂

JavaScript व्यू उदाहरण:

Rails.$('.random-number')[0].innerHTML = ("<%= j (render partial: 'random') %>")

j escape_javascript का उपनाम है

jQuery उदाहरण:

$('.random-number').html("<%= j (render partial: 'random') %>")

html और innerHTML दोनों टार्गेट एलिमेंट की सामग्री को बदल देते हैं।

आप पूरे चीज को बदलने के बजाय jQuery के साथ एक सूची में एक नया एलिमेंट जोड़ (append) भी सकते हैं।

इस कोड को .js.erb एक्सटेंशन वाली फाइल में रखें, वर्तमान एक्शन के नाम के साथ (जैसे create.js.erb) और व्यूज फोल्डर के अंदर।

कंट्रोलर पर आप इस व्यू को किसी अन्य व्यू की तरह ही रेंडर कर सकते हैं।

अब:

जब आप AJAX कॉल करते हैं, तो यह JavaScript कोड स्वचालित रूप से चलेगा और HTML को अपडेट करेगा।

आइए दूसरे विकल्प पर एक नज़र डालते हैं।

यहाँ कंट्रोलर कोड है:

render json: { html: render_to_string(partial: 'random') }

फिर अपने JavaScript कोड से:

Rails.ajax({
  url: "/books",
  type: "get",
  success: function(data) {
    Rails.$(".random-number")[0].innerHTML = data.html;
  }
})

यह इसे करने का एक और तरीका है!

आपको क्या उपयोग करना चाहिए?

DHH का पसंदीदा पहला तरीका है, जिसे वह "SJR" (सर्वर-जेनरेटेड JavaScript) कहते हैं।

मुझे लगता है कि यह Rails चाहता है कि आप इसे कैसे करें, लेकिन बेझिझक दोनों (SJR और render_to_string) को स्वयं आज़माएं और देखें कि आपके लिए कौन सा सबसे अच्छा काम करता है।

अपने JS व्यूज के लिए HAML का उपयोग कैसे करें

ठीक है।

मान लें कि आप एक HAML उपयोगकर्ता हैं।

क्या इस SJR तकनीक का उपयोग करना और .js.haml व्यूज रेंडर करना संभव है?

हाँ!

यहाँ एक उदाहरण है:

- content = j (render partial: "random")
Rails.$('.random-number')[0].innerHTML = ("#{content}")

यह ERB संस्करण की तुलना में थोड़ा बदसूरत है, लेकिन यह काम करता है।

पेज रीफ्रेश किए बिना Rails फॉर्म कैसे सबमिट करें

यदि आप AJAX का उपयोग करके फॉर्म सबमिट करना चाहते हैं तो आप बिना AJAX रिक्वेस्ट लिखे ऐसा कर सकते हैं।

Rails इसे आपके लिए संभाल सकता है।

कैसे?

form_for के साथ remote: true विकल्प का उपयोग करें।

यहाँ एक उदाहरण है:

<%= form_for @fruit, remote: true do |f| %>
  <%= f.label :name, 'Fruit' %>
  <%= f.text_field :name %>
  <%= f.submit 'Create' %>
<% end %>

अब जब आप "Create" पर क्लिक करते हैं तो Rails आपके लिए AJAX रिक्वेस्ट भेजेगा और पेज रीलोड नहीं होगा।

यदि आप वैलिडेशन एरर्स प्रदर्शित करना चाहते हैं तो आपको एक JavaScript व्यू (.js.erb फाइल) बनाना और रेंडर करना होगा जो वर्तमान एरर्स को नए एरर्स से बदल देता है।

"AJAX के साथ पार्शियल अपडेट करना" में उदाहरण की तरह।

वैसे, यह remote विकल्प लिंक्स के साथ भी इस्तेमाल किया जा सकता है, ताकि आप AJAX delete रिक्वेस्ट कर सकें।

उदाहरण:

<%= link_to "Delete", book_path(book), { method: "delete", remote: true, data: { confirm: "Are you sure?" } }

आप JavaScript व्यू का उपयोग करके रिस्पांस को संभाल सकते हैं।

यदि आप 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 रिक्वेस्ट काम नहीं कर रही है तो आपको कुछ डीबगिंग करनी होगी।

सबसे पहले, अपने ब्राउज़र डेवलपर टूल्स खोलें।

आप कंसोल पैनल में किसी भी JavaScript एरर को देखना चाहते हैं।

उन्हें ठीक करें।

साथ ही, सुनिश्चित करें कि आप जिस CSS सेलेक्टर को टार्गेट कर रहे हैं वह सही है और आपके पास कोई टाइपो नहीं है।

फिर, किसी भी एरर के लिए अपने Rails लॉग्स की जांच करें।

फिर, सुनिश्चित करें कि सही व्यू रेंडर हो रहा है।

यदि आप इस प्रक्रिया का पालन करते हैं तो आप यह पता लगाने में सक्षम होना चाहिए कि आपकी AJAX रिक्वेस्ट क्यों काम नहीं कर रही है और इसे ठीक करें।

सारांश

आपने AJAX के बारे में सीखा, एक वेब डेवलपमेंट तकनीक जो आपको एसिंक्रोनस रिक्वेस्ट बनाने की अनुमति देती है!

आपने यह भी सीखा कि इसे Rails में कैसे लागू किया जाए। याद रखें कि आपके नियमित (गैर-JS फ्रेमवर्क) Rails ऐप को काम करने के लिए AJAX आवश्यक नहीं है, लेकिन यह आपके टूलबॉक्स में रखने के लिए उपयोगी चीज है।

इस लेख को शेयर करना न भूलें ताकि अधिक लोग इससे लाभ उठा सकें 🙂

पढ़ने के लिए धन्यवाद!