🌺 👩🏿‍⚖️ 💪🏾 ग्रेल्स, jQuery, AJAX: एंकर नेविगेशन करते हैं। भाग 2, अंतिम ⌛️ 👨🏿‍🎤 🧖🏽

पूर्ण और अपूर्ण पृष्ठ

हम एंकर नेविगेशन के बारे में बातचीत जारी रखते हैं। हमारा लक्ष्य ग्रेल्स पर एक कार्यशील अनुप्रयोग बनाना है।

एक-एक सूक्ष्मता है। मैं वास्तव में पृष्ठ को पूर्ण संस्करण (हेडर, नेविगेशन, आदि) के साथ और संक्षिप्त रूप में (AJAX कॉल के लिए) दिखाया जाना चाहता हूं। हालांकि, टाइपिंग / माय-ऐप / डू / रसीदें , हमें पूर्ण संस्करण मिलती हैं। अब यह इस तरह दिखता है:

ऊप्स! यह किसी भी तरह से उस स्थिति के बीच अंतर करना आवश्यक है जब पृष्ठ मुख्य है और जब यह आंतरिक है। ऐसा करने के लिए, हम एक छोटा सा फ़िल्टर लिखते हैं:

grails-app/conf/PartialPageLoadFilters.groovy

  def filters = { partial(controller: "*", action: "*") { before = { //  AJAX-? if (request.xhr) { //     . request.partialPage = true } true } } }

मैं जादू विशेषता request.xhr के उपयोग पर ध्यान देता हूं, जो ग्रेल्स प्रदान करता है। इसकी उपस्थिति का मतलब है कि वर्तमान अनुरोध AJAX के माध्यम से कहा जाता है। अधिकांश ब्राउज़र एक विशेष HTTP-Header के माध्यम से सर्वर को इसकी सूचना देते हैं। ऊपर, मैंने अभी सभी AJAX अनुरोधों को "आंतरिक" के रूप में घोषित किया है, एक वास्तविक अनुप्रयोग में, स्थिति अधिक जटिल हो सकती है।

अब मैं हर जगह request.partialPage ध्वज का उपयोग कर सकता हूं। आप आंतरिक पृष्ठों के लिए एक अलग लेआउट बना सकते हैं, लेकिन मैंने मुख्य लेआउट में केवल ऐसे सम्मिलित रूप से बेवकूफ बनाना पसंद किया:

grails-app/views/layouts/main.gsp

 %{--   --}% <g:if test="${request.partialPage}"> <g:layoutBody /> </g:if> <g:else> %{--    --}% <html> <head> ... </head> <body> ... <div id="pageContent"> <g:layoutBody /> </div> ... </body> </html> </g:else>

हमने पूर्ण पारदर्शिता (कंट्रोलर और जीएसपी के लिए) हासिल की, जिसमें पेज के विकल्प दिखाए गए थे।

बुकमार्क और इतिहास

तो, हमारे पास AJAX के माध्यम से तीन स्क्रीन उपलब्ध हैं:

/ my-app / # do / प्राप्तियां	/ my-app / # do / buy	/ my-app / # do / प्रतिक्रिया

सब कुछ बहुत अच्छा है, लेकिन जैसा कि यह पता चला है, हमारे "गतिशील" लिंक को बुकमार्क नहीं किया जा सकता है। तथ्य यह है कि उनमें एक एंकर पूंछ होती है, जो सर्वर पर प्रसारित नहीं होती है। इसलिए, ऐसे URL को लोड करते समय, सर्वर को पता नहीं होता है कि कौन से आंतरिक पेज प्रदर्शित करने हैं।

एंकर के बारे में केवल एंकर ही जानता है। यह समाधान बताता है: पहले जावास्क्रिप्ट के साथ बेस पेज को लोड करें, फिर उस कोड को चलाएं जो वर्तमान एंकर को परिभाषित करता है और AJAX का उपयोग करके अंदर लोड होता है। विशेष रूप से परेशान किए बिना, मैंने यह कोड लिखा है:

web-app/js/application.js

 $.ready(function() { $('#pageContent').html('...') .load(buildURL(document.location.hash), function() { //   updateNavLinks(); }); });

यह कोड केवल विचार को प्रदर्शित करता है। यदि वांछित है, तो यह कोड अधिक सुंदर स्थिति में समाप्त हो सकता है, लेकिन सार नहीं बदलेगा: पहले आपको मूल आवरण डाउनलोड करना होगा, फिर उपयोगकर्ता को लोड करने के लिए आंतरिक भाग की प्रतीक्षा करनी होगी। उदाहरण के लिए, फेसबुक आमतौर पर अंदर के भार - स्वाद का मामला होने तक कुछ भी नहीं दिखाता है।

लेकिन कहानी का क्या? बैक / फ़ॉरवर्ड ट्रांज़िशन पर, हमारी $ पहले से मौजूद घटना में आग नहीं लगेगी। ब्राउज़र इस तरह के बदलाव को एक "एंकर" से दूसरे एंकर तक मानता है, अर्थात पृष्ठ को केवल स्क्रॉल करना। कोई विशिष्ट पहचान योग्य जावास्क्रिप्ट घटना नहीं होती है। क्या करें?

इसे हल करने का एक तरीका (अपने आप में काफी क्रूर) परिवर्तनों के लिए समय-समय पर document.location.hash संपत्ति की जांच करना है। यदि अचानक वर्तमान एंकर बदल गया है, तो आपको पृष्ठ के अंदर पुनः लोड करने की आवश्यकता है।

 function checkLocalState() { if (document.location.hash && document.location.hash != currentState) { currentState = document.location.hash; $('#pageContent').html(' , ...') .load(buildURL(currentState), function() { //   updateNavLinks(); }); } }

अब हर 500 मिलीसेकंड में लंगर के बदलाव की जाँच करें:

 $.ready(function() { setInterval(checkLocalState, 500); });

अब हमारा एप्लिकेशन बैक / फॉरवर्ड ट्रांज़िशन का जवाब देगा, लेकिन आधे सेकंड की देरी के साथ। यह देरी (कभी-कभी उपयोगकर्ता को परेशान करने वाली) समान नेविगेशन योजना का उपयोग करके कई बड़ी साइटों पर देखी जा सकती है। यदि आप अंतराल को कम करते हैं, तो पृष्ठभूमि जावास्क्रिप्ट अधिक संसाधन खाएगी। यदि अंतराल बढ़ा है, तो प्रतिक्रिया समय बढ़ जाएगा। सामान्य तौर पर, आपको हर चीज के लिए भुगतान करना होगा।

सारांश

हमने AJAX नेविगेशन के साथ Grails + jQuery एप्लिकेशन बनाया है, जो:

पूरे पृष्ठ को पुनः लोड किए बिना केवल पृष्ठ की आंतरिक सामग्री को पुन: लोड करता है।
पता बार में पृष्ठ की स्थिति को सही ढंग से सहेजता है, अर्थात बुकमार्क और दोस्तों के साथ लिंक साझा करने के लिए उपयुक्त है।
सही ढंग से ब्राउज़र में पीछे / आगे संक्रमण के लिए प्रतिक्रिया करता है।
खेल के नए नियमों से परेशान हुए बिना, आपको सर्वर कोड "पुराने तरीके से" विकसित करने की अनुमति देता है सभी पृष्ठ लोडिंग तर्क को पारदर्शी (नियंत्रकों और जीएसपी पृष्ठों के लिए) बनाया गया है।
लिंक एक नई विंडो में खोले जा सकते हैं और वे सही तरीके से काम करेंगे।
मैं ध्यान देता हूं कि URL की शुरुआत में पाउंड साइन ( # ) को छोड़कर, हमारे एप्लिकेशन के लिंक नियमित लिंक से अलग नहीं हैं ! आखिरकार, हमने ध्यान से लिंक के सभी तर्क को jQuery-कोड में अंजाम दिया।

बेशक, एक वास्तविक आवेदन में, यहां दिए गए कोड को सुधारना होगा, विशेष रूप से, एक एंकर की अनुपस्थिति की स्थितियों को अधिक सटीक रूप से ध्यान में रखना होगा, एक अधिक जटिल लिंक बिल्डिंग योजना का उपयोग करना होगा, आदि। हालांकि, मुझे आशा है कि वह सफलतापूर्वक विचार प्रदर्शित करता है और लंगर नेविगेशन के साथ अधिकांश समस्याओं को हल करता है।

संदर्भ:

ग्रेल्स, jQuery, AJAX: एंकर नेविगेशन करते हैं। भाग 2, अंतिम

पूर्ण और अपूर्ण पृष्ठ

बुकमार्क और इतिहास

सारांश

More articles: