एक अजाक्स नेविगेशन प्रणाली बनाने का अनुभव

मुझे हमेशा आश्चर्य होता है कि जब साइटों को विकसित किया जाता है, तो अजाक्स को शायद ही कभी नेविगेशन सिस्टम में उपयोग किया जाता है? आखिरकार, मेरी राय में फायदे स्पष्ट हैं! अजाक्स साइट किसी भी सामान्य साइट की तुलना में कई गुना तेजी से काम करती है, और यहां तक ​​कि अगर आप ब्राउज़र कैश को ध्यान में रखते हैं, तो यह ध्यान देने योग्य है।

मैंने गहराई से खुदाई करने का फैसला किया, और यह पता लगाने की कोशिश की कि मुझे क्या नुकसान हुआ और पूरी जटिलता क्या है। जब मैंने इस मुद्दे का अधिक विस्तार से अध्ययन किया, तब भी मुझे कुछ कठिनाइयों का सामना करना पड़ा, लेकिन यह कहने के लिए नहीं कि वे महत्वपूर्ण थे। सब कुछ तय किया गया है और बहुत सरल है, और अब मैं आपके साथ एक पूर्ण Ajax नेविगेशन बनाने में अपने अनुभव को साझा करना चाहता हूं।

हम कहां से शुरू करते हैं? सिद्धांत

परिणामस्वरूप हम क्या प्राप्त करना चाहते हैं? हम एक पूर्ण साइट प्राप्त करना चाहते हैं जो खोज इंजन को सामान्य नेविगेशन प्रणाली के साथ, और सबसे महत्वपूर्ण रूप से तेज़ कर सकते हैं।

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

एक उदाहरण के रूप में, आप उस साइट पर एक नज़र डाल सकते हैं जिसके लिए मैंने इस प्रणाली को लागू किया था: wicegoal.com । (साइट अभी भी विकास में है, इसलिए मैं सिर्फ नेविगेशन लिंक और बहुत ऊपर के देशों पर एक नज़र डालने की सलाह देता हूं)।

मैंने जावास्क्रिप्ट लाइब्रेरी के रूप में jQuery चुना। पहला मुद्दा जिसे हल करने की आवश्यकता थी, वह था लिंक, और ब्राउज़र नेविगेशन। आपको ब्राउज़र बटन के क्लिकों को आगे-पीछे करने की आवश्यकता है, और निश्चित रूप से, सुनिश्चित करें कि उपयोगकर्ता साइट को बुकमार्क में जोड़ सकता है। दो विकल्प हैं, और प्रत्येक की अपनी कमियां हैं:

• हैश लिंक। वे अच्छे हैं कि वे सभी ब्राउज़रों के साथ संगत हैं, लेकिन उनके पास एक बड़ा ऋण है - आप पीएचपी में उनके साथ काम नहीं कर सकते हैं, और इससे कई समस्याएं आती हैं, जैसे पृष्ठ को लोड करने के बाद इसे निर्धारित करने में असमर्थता। वास्तव में, आप इस समस्या को हल करने के लिए कई विकृत तरीकों के साथ आ सकते हैं, उदाहरण के लिए: जब उपयोगकर्ता लिंक / # पेज = / news / पर क्लिक करता है, तो हम इसे केवल पृष्ठ / समाचार / पर रीडायरेक्ट करते हैं, लेकिन विकल्प स्पष्ट रूप से सबसे अच्छा नहीं है, लेकिन फिर भी, आप होने के लिए जगह लेता है।
• एचटीएमएल 5 इतिहास एपीआई। यह विकल्प ज्यादा बेहतर है। इसे शुरू करने का कोई मतलब नहीं है, यह मेरे लिए पहले ही हो चुका है , केवल इस विकल्प में एक बड़ा बटन है: IE का कोई भी संस्करण इसका समर्थन नहीं करता है।

बेशक, आप एक रास्ता खोज सकते हैं, उदाहरण के लिए, ऐसा करें: आधुनिक ब्राउज़रों के लिए, इतिहास एपीआई का चयन करें, और आईई - हैश लिंक के लिए। साथ ही, अजाक्स के बिना, साइट का एक संस्करण होना चाहिए, जिसके साथ खोज इंजन काम कर सकते हैं।

मैंने खुद को केवल इतिहास एपीआई और संस्करण के बिना सीमित करने का फैसला किया, ताकि खुद के लिए अनावश्यक समस्याएं पैदा न करें।

एक नेविगेशन इंजन का विकास

मैंने जो पहली चीज़ की, वह एक नेविगेटर.जेएस फ़ाइल बना रही थी जिसे लिंक प्रसंस्करण को संभालना चाहिए, और वहां घटना को रखना चाहिए:

if (history.pushState) { $('.navigation-menu').live("click", function(){ setPage($(this).attr('href')); return false; }) } 

यहां, शुरुआत के लिए, हम जांचते हैं कि क्या इतिहास एपीआई ब्राउज़र द्वारा समर्थित है, यदि ऐसा है, तो हम सभी लिंक के लिए हैंडलर को लटकाते हैं, नेविगेशन-मेनू क्लास के साथ हैंडलर सेटपेज फ़ंक्शन को कॉल करेगा:

 function setPage(page) { $.post(page, { ajaxLoad: true }, function(data){ $('#content-inner').html(data); NavigationCache[page] = data; history.pushState({page: page, type: "page"}, document.title, page); }) } 

यह फ़ंक्शन उस पृष्ठ पर पोस्ट अनुरोध भेजता है जिसकी हमें आवश्यकता है। यह ajaxLoad पैरामीटर पर ध्यान देने योग्य है। सर्वर स्क्रिप्ट के लिए यह पैरामीटर आवश्यक है, जो हमें पेज देगा। अगर कोई अजाक्सैलाड पैरामीटर है, तो सर्वर हमें पृष्ठ का केवल वांछित हिस्सा देगा, यदि ऐसा नहीं है, तो सर्वर पूरे पृष्ठ को हेडर, फुटर, नेविगेशन आदि के साथ देगा।
यह आवश्यक है ताकि जब हम सीधे site.com/news/ पेज पर जाएं, उदाहरण के लिए, हमें पूरा पृष्ठ मिलता है, और यदि हम इस पृष्ठ पर जाते हैं, तो मुख्य लिंक के साथ ajax लिंक के माध्यम से, हमें केवल उसका भाग प्राप्त करने की आवश्यकता है, जिसे हम और ब्लॉक में # सामग्री-इनर डालें, हमें पूरे पृष्ठ की आवश्यकता नहीं है, इससे अतिरिक्त कोड के पूरे समूह को खींचने का कोई मतलब नहीं है।

एक और बात यह भी है कि आप में रुचि रखते हैं, मैं इस लाइन के बारे में बात कर रहा हूँ:

 NavigationCache[page] = data; 

यह पंक्ति उस पृष्ठ को लिखती है जिसे हमने कैश में प्राप्त किया है। जब ब्राउज़र नेविगेशन की बात आती है, तो यह आवश्यक क्यों है कि यह अपने आप गायब हो जाता है। ज्यादा बेहतर होगा यदि आप बैक बटन पर क्लिक करते हैं, तो हमें कैश से तुरंत प्रतिक्रिया मिलती है, जब तक हम पेज को फिर से लोड नहीं करते हैं, तब तक हम इंतजार करते हैं। कैश को काम करने के लिए, फ़ाइल की शुरुआत में, आपको निम्नलिखित कोड जोड़ना होगा:

 var NavigationCache = new Array(); $(document).ready(function(){ NavigationCache[window.location.pathname] = $('#content-inner').html(); history.pushState({page: window.location.pathname, type: "page"}, document.title, window.location.pathname); }); 

जब साइट लोड होती है, तो देखे गए पृष्ठों की एक सरणी बनाई जाएगी। जैसा कि आपने देखा होगा कि वर्तमान पेज का HTML कोड शुरू में इसमें जोड़ा गया है। हर बार जब आप ajax लिंक पर क्लिक करते हैं, तो इस कोड को पेज कोड लिखा जाएगा।

अब आपको ब्राउज़र नेविगेशन पर हैंडलर को लटका देना होगा। इतिहास एपीआई onpopstate घटना इसके लिए जिम्मेदार है, यहां हम कैश का उपयोग करेंगे:

 window.onpopstate = function(event) { if (event.state.type.length > 0) { if (NavigationCache[event.state.page].length>0) { $('#content-inner').html(NavigationCache[event.state.page]); } } } 

ब्राउज़र में आगे और पीछे बटन दबाकर इस घटना को चालू किया जाएगा, इसके लिए आवश्यक है कि कैश से सामग्री को # सामग्री-आंतरिक ब्लॉक में तब डाला जाए जब उपयोगकर्ता पिछले पृष्ठ पर वापस आ जाए।

यह सब क्या हुआ?

इसलिए, हमारा कार्यक्रम नेविगेशन-मेनू वर्ग के लिंक पर क्लिक को स्वीकार करता है, पृष्ठ के केवल हिस्से को लोड करता है, इसे कैश में लिखता है। इस तथ्य के कारण कि हम पूरे पृष्ठ को फिर से लोड नहीं करते हैं, साइट सिर्फ बिजली की गति से काम करेगी, और पिछले पृष्ठ पर लौटने के लिए, आपको कुछ भी डाउनलोड नहीं करना होगा। हम केवल लिंक पर क्लिक को रोकते हैं और सही लोड करते हैं।

संपूर्ण नेविगेटर । Js फ़ाइल इस तरह दिखती है:

 var NavigationCache = new Array(); $(document).ready(function(){ NavigationCache[window.location.pathname] = $('#content-inner').html(); history.pushState({page: window.location.pathname, type: "page"}, document.title, window.location.pathname); }); function setPage(page) { $.post(page, { ajaxLoad: true }, function(data){ $('#content-inner').html(data); NavigationCache[page] = data; history.pushState({page: page, type: "page"}, document.title, page); }) } $(document).ready(function(){ if (history.pushState) { window.onpopstate = function(event) { if (event.state.type.length > 0) { if (NavigationCache[event.state.page].length>0) { $('#content-inner').html(NavigationCache[event.state.page]); } } } $('.navigation-menu').live("click", function(){ setPage($(this).attr('href')); return false; }) } }) 

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