AJAX साइटों में हैश नेविगेशन

यदि आप अभी या बाद में अजाक्स साइट का निर्माण कर रहे हैं, तो आप "ब्राउज़र में आगे और पीछे बटन काम नहीं कर रहे हैं" की समस्या का सामना करेंगे। क्योंकि अजाक्स अतुल्यकालिक है, यह अन्य पृष्ठों पर नहीं जाता है, लेकिन बस सामग्री के कुछ हिस्से को वर्तमान में बदल देता है।

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

यदि पहली समस्या उपयोगकर्ताओं के लिए एक समस्या है, तो दूसरी डेवलपर्स के लिए है। नीचे मैं यह वर्णन करने की कोशिश करूंगा कि कैसे दोनों कार्यों को बहुत ही सुरुचिपूर्ण तरीके से हल किया गया है। एक समान तकनीक का उपयोग करके, फेसबुक और ट्विटर के लिंक बनाए गए हैं।

बेशक, डेवलपर चाहता है कि वह अजाक्स के बारे में न सोचे, लेकिन उसकी परियोजना पूर्ण-अजाक्स बन गई है :-) इसलिए, यदि डेवलपर एक लिंक लिखता है:

 <a href="/contacts/">Contacts</a> 

तो यह स्वतः ही अजाक्स द्वारा प्रतिस्थापित किया जाना चाहिए। लेकिन ajax / not_ajax को नियंत्रित करने के लिए - कोड में सभी लिंक के लिए एक विशेष वर्ग जोड़ना बेहतर है, उदाहरण के लिए:

 <a href="/contacts/" class="EngineAJAX">Contacts</a> 

DOM मॉडल (डोम: लोडेड इवेंट) को लोड करने के बाद, आपको सभी लिंक ढूंढने होंगे - उनमें से EngineAJAX क्लास को हटा दें और उन्हें "#!" परिणामस्वरूप, लिंक फॉर्म का है:

 <a href="#!/contacts/">Contacts</a> 

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

पहेली का आधा हल किया जाता है: जब आप लिंक पर क्लिक करते हैं, तो एंकर को संक्रमण किया जाता है, क्लिक पकड़ा जाता है, AJAX निष्पादित होता है। ब्राउज़र में काम करने के लिए आगे और पीछे बटन के लिए, आपको क्रमिक चक्र में जांचने की आवश्यकता है कि क्या document.location.hash बदल गया है, और यदि यह बदल गया है, तो ajax अनुरोध करें। उपयोगकर्ता के लिए समस्या # 1 हल हो गई है।

अब समस्या # 2 के बारे में, या उसी ajax'e के बारे में, जिसे सर्वर से "शुद्ध पृष्ठ सामग्री" मिलनी चाहिए। यह सब उस इंजन या सीएमएस पर निर्भर करता है जिसका आप उपयोग कर रहे हैं। किसी भी तरह से इंजन में जो आपके लिए सुखद है, आपको इस संभावना को जोड़ने की आवश्यकता है: यदि एक निश्चित पैरामीटर पारित किया जाता है (उदाहरण के लिए, जीईटी पैरामीटर नोटमैप = 1), तो इंजन पृष्ठ की सामग्री को "बिना टेम्पलेट के" वापस कर देना चाहिए। अर्थात्, उपरोक्त उदाहरण के लिए, ajax अनुरोध सिर्फ URL को हिट करता है:

/contacts/?notemplate=1

और इसलिए, # 1 और # 2 की समस्याएं लगभग हल हो गई हैं। लगभग क्योंकि समस्या # 3 दिखाई दी: किसी भी अजाक्स को निष्पादित करने के बाद, संपूर्ण दस्तावेज़ का HTML कोड बदलता है, और EngineAJAX वर्ग के साथ नए लिंक इसमें दिखाई दे सकते हैं, जिन्हें "एंकर" में रूपांतरण की आवश्यकता होती है। यह समस्या इस तथ्य से बढ़ जाती है कि डोम: परिवर्तित जैसी घटनाएं मौजूद नहीं हैं। एकमात्र "माथे" विकल्प जिसके साथ मैं आया था, प्रति सेकंड 10 बार जांच करना था कि क्या शरीर टैग (+1 सदा लूप) की सामग्री बदल गई है - और अगर यह बदल गया था, तो सभी लिंक के माध्यम से जाएं और उन्हें बदलने की कोशिश करें (यही कारण है कि हमने कक्षा को हटा दिया है) प्रसंस्कृत लिंक से EngineAJAX - उन्हें फिर से पालन करने के लिए नहीं)।

पुनश्च: jQuery में एक onHashChanged इवेंट है और, ऐसा लगता है, onDomChanged, लेकिन मुझे लगता है कि jQuery में, इस तरह के इवेंट्स को पकड़ना अभी भी क्रमिक चक्रों तक आ जाएगा।