🐼 👴🏼 ◾️ ग्रेल्स, jQuery, AJAX: एंकर नेविगेशन करते हैं। भाग 1 🛎️ ⛹🏽 🦏

AJAX और सभी, सभी, सभी

पिछली श्रृंखला में, हमने jQuery का उपयोग करके एक सरल ग्रेल्स एप्लिकेशन बनाया, और अपने लिए यह भी तय किया कि यह संभव है और ग्रेल्स में jQuery का उपयोग करना भी आवश्यक है। हम अधिक गंभीर चीजों पर चर्चा करेंगे जो इस तरह के गुच्छा के साथ की जा सकती हैं।

यह देखना आसान है कि अधिक से अधिक साइटें AJAX और आंशिक पृष्ठ अपडेट और अविश्वसनीय मात्रा में उपयोग करती हैं। विशेष रूप से, "भरवां" AJAX लिंक पृष्ठ पर आंतरिक नेविगेशन के लिए उपयोग किया जा सकता है, कुछ टैब स्विच कर रहा है। यह अच्छा है क्योंकि

ए) कम डेटा को सर्वर से डिस्टिल्ड करने की आवश्यकता होती है - केवल पेज का वांछित टुकड़ा और

बी) वेब पेज अक्सर विशाल सीएसएस और जावास्क्रिप्ट फ़ाइलों को लोड करते हैं, जिन्हें AJAX अपडेट के दौरान पुनः लोड नहीं किया जा सकता है।

इसलिए, स्क्रिप्ट अनुप्रयोगों का निर्माण बहुत आम है: एक बड़ा "स्टार्ट" पेज जो सभी जावास्क्रिप्ट कोड और CSS लोड कर रहा है और AJAX द्वारा लोड किए गए छोटे "आंतरिक" फ़ंक्शन ब्लॉक हैं। इसके साथ कई समस्याएं हैं:

AJAX क्रियाओं के परिणामस्वरूप, पृष्ठ की आंतरिक स्थिति ब्राउज़र के एड्रेस बार में परिलक्षित नहीं होती है।
परिणामस्वरूप, आंतरिक पृष्ठों को बुकमार्क नहीं किया जा सकता है; आप "किसी मित्र को लिंक नहीं भेज सकते हैं"।
ब्राउज़र में बैक / फॉरवर्ड नेविगेशन काम नहीं करता है, क्योंकि AJAX लिंक ब्राउज़र इतिहास में नहीं आते हैं।

हालांकि, बड़ी साइटों को किसी तरह का "हैकर" समाधान मिल गया है, जिसे अब हम ग्रेल्स और jQuery पर अपने स्वयं के एनालॉग के बारे में विचार करेंगे और लिखेंगे।

एंकर नेविगेशन

तथ्य यह है कि वास्तव में, आप पृष्ठ को फिर से लोड किए बिना ब्राउज़र के एड्रेस बार को बदल सकते हैं, यदि आप केवल एंकर बदलते हैं, अर्थात। बार के बाद एड्रेस बार का अंतिम भाग #

। ब्राउज़र इस संक्रमण को पृष्ठ के अंदर मानता है, और उस स्थिति को शांत करता है जब पृष्ठ पर वांछित एंकर नहीं होता है, बस पते और इतिहास को अपडेट करता है। यह वही है जो हमें चाहिए। यदि आप लंगर के अंदर पृष्ठ की स्थिति को सहेजते हैं, तो आप इसे बुकमार्क के माध्यम से वापस कर सकते हैं और आप बैक / फॉरवर्ड ट्रांज़िशन (!) का उपयोग कर सकते हैं। इस स्थिति में, पृष्ठ का आधार URL नहीं बदलता है और पृष्ठ पुनः लोड नहीं होता है।

इस तरह के समाधान के कार्यान्वयन के उदाहरणों के लिए दूर जाना आवश्यक नहीं है। इस योजना का उपयोग फेसबुक, जीमेल, गूगल पिकासा वेब एल्बम में किया जाता है, इस की एक महत्वपूर्ण राशि odnoklassniki.ru पर देखी जा सकती है। Google वेब टूलकिट लाइब्रेरी पूरी तरह से एंकर नेविगेशन पर आधारित है।

कहो, जीमेल में आपको पत्र का सीधा लिंक मिल सकता है, और लिंक बुकमार्क हो जाएगा। लिंक कुछ इस तरह दिखाई देगा:

mail.google.com/mail/?shva=1 #inbox/12c5f14c01a5473c

कोई 12c5f14c01a5473c

नहीं है कि 12c5f14c01a5473c

किसी तरह की आंतरिक आईडी है।

एक आवेदन पत्र लिखना

आइए इस दृष्टिकोण के कार्यान्वयन के बारे में सोचते हैं। पता बार बस बदलता है:

 document.location.hash = '#myAnchor';

(या सीधे लिंक के माध्यम से

 <a href="#myAnchor">My Link</a>

)।

आइए एक Grails एप्लिकेशन को पेचीदा नाम my-app के साथ लिखना शुरू करें , जिसमें नेविगेशन पूरी तरह से AJAX पर आधारित हो। हमारे आवेदन में तीन टैब होंगे:

anchor1

बाह्य रूप से, यह एक नियमित पृष्ठ की तरह दिखता है, लेकिन हम यह सुनिश्चित करना चाहते हैं कि पृष्ठ के केवल अंदर को पूर्ण पुनः लोड किए बिना अपडेट किया जाए।

सबसे पहले, निम्न फ़ॉर्म का एक साइटमैप लेआउट बनाएं:

grails-app/views/layouts/main.gsp

 <html> <head> <title><g:layoutTitle default="Grails" /></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" /> <g:layoutHead /> <g:javascript library="jquery"/> <g:javascript library="application" /> </head> <body> ... %{--   --}% <div class="navbar"> <div class="navitem"> <a href="#do/receipts" class="navlink"></a> <div class="spinner" /> </div> <div class="navitem"> <a href="#do/buy" class="navlink"> </a> <div class="spinner" /> </div> <div class="navitem"> <a href="#do/feedback" class="navlink"></a> <div class="spinner" /> </div> </div> %{--   --}% <div id="pageContent"> <g:layoutBody /> </div> ... </body> </html>

यहां अब तक कोई आश्चर्य नहीं हुआ। जैसा कि आप देख सकते हैं, लिंक नियमित एंकर लिंक से अलग नहीं हैं। वे कैसे काम करते हैं? ऐसा करने के लिए, हम jQuery में ऐसा कोड लिखते हैं:

web-app/js/application.js

 //      var currentState = ''; function buildURL(anchor) { return document.location.toString().substr(0, document.location.toString().indexOf('#')) + anchor.substr(1); } function clickNavLink() { //  ? var href = $(this).attr('href'); //       if (href == currentState) { return false; } if (document.location.hash != href) { document.location.hash = href; } //   var link = this; //    $(this).parent().find('.busy').show(); $(this).hide(); var targetURL = buildURL(href); currentState = href; //   ,     $.ajax({ context:$('#pageContent'), url:targetURL, dataType:'html', method:'GET', complete: function() { //   . $(link).show(); updateNavLinks(); }, success: function(data) { //  ""  . $('#pageContent').html(data); } }); return true; } //   ,   / function updateNavLinks() { $('a.navlink').each(function(i) { var href = $(this).attr('href'); $(this).parent().find('.busy').hide(); if (href == currentState) { $(this).addClass('disabled'); } else { $(this).removeClass('disabled'); } }); } // .     . jQuery(document).ready(function() { $('a.navlink').each(function() { $(this).click(clickNavLink); }); });

यहां सब कुछ काफी सरल है: हम जावास्क्रिप्ट चर currentState में पृष्ठ की वर्तमान स्थिति को संग्रहीत करते हैं। जब हम लिंक पर क्लिक करते हैं, तो हम AJAX के माध्यम से आंतरिक पृष्ठ को लोड करते हैं, AJAX कॉल के परिणाम को div # pageContent में सेव करते हैं । इस स्थिति में, लोड किए गए पृष्ठ का URL पृष्ठ के आधार पते पर लंगर पथ को जोड़कर बनता है, अर्थात।

 /my-app/#do/receipts => /my-app/do/receipts

यह सरल नियम तुरंत हमें यह समझने में मदद करता है कि लिंक क्या करता है। लिंक को "वर्तमान" के रूप में पहचानने के लिए, हम इसे disabled

वर्ग को असाइन करते हैं। CSS में (जो मैं नहीं दूंगा) इस वर्ग को एक अलग रंग में प्रदर्शित किया जाएगा ताकि यह देखा जा सके कि कौन सा लिंक चालू है (दौरा किया गया)।

सर्वर साइड

अब सर्वर स्टफिंग बनाना अच्छा होगा। मैंने तीनों लिंक को संभालने के लिए एक सरल नियंत्रक लिखा:

grails-app/controllers/DoSomethingController.groovy

 class DoSomethingController { def receipts = { [receipts:['  ', '']] } def buy = { [places:['  ', ' №1']] } def feedback = { [feedback:['',' ',' ,  !']] } }

और उसके लिए तीन सरल पृष्ठ बनाए। मैं उनमें से केवल एक ही दूंगा:

grails-app/views/doSomething/receipts.gsp

 <%--   --%> <%@ page contentType="text/html;charset=UTF-8" %> <html> <head> <meta name="layout" content="main" /> </head> <body> <h1>    </h1> <ul> <g:each in="${receipts}" var="receipt"> <li>${receipt.encodeAsHTML()}</li> </g:each> </ul> </body> </html>

अब हमारे / do / * लिंक पर कंट्रोलर हैंग करें:

grails-app/conf/UrlMappings.groovy

 class UrlMappings { static mappings = { "/do/$action?/$id?" { controller = 'doSomething' } } }

हालांकि, यह पर्याप्त नहीं है। समस्याएं हैं: हमारे ग्राहक और सर्वर भागों को अंतिम रूप दिया जाना चाहिए, जिसके बारे में मैं अगले भाग में लिखूंगा।

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

AJAX और सभी, सभी, सभी

एंकर नेविगेशन

एक आवेदन पत्र लिखना

सर्वर साइड

More articles: