मैं पूरी तरह से AJAX नेविगेशन के साथ एक वेबसाइट विकसित करना चाहता हूं, लेकिन इसका मतलब है कि उपयोगकर्ता साझा नहीं कर सकते हैं, बुकमार्क कर सकते हैं या सीधे कुछ सामग्री पर जा सकते हैं।एक AJAX आधारित वेबसाइट में यूआरएल नेविगेशन?
मैंने कुछ वेबसाइटें देखी हैं (Gmail, Thesixtyone, Youtube) विभिन्न पेज कॉन्फ़िगरेशन के लिए कस्टम यूआरएल बनाने के लिए हैश टैग का उपयोग कर रहे हैं। इस तकनीक को क्या कहा जाता है, और मैं इसे कैसे कार्यान्वित कर सकता हूं?
JQuery पते में लून। http://www.asual.com/jquery/address/
यह वही करता है जो आप बात कर रहे हैं। हालांकि, चूंकि आपने पूछा कि कस्टम यूआरएल में # मतलब क्या है, मुझे लगता है कि आप इस पर काफी नए हैं। JQuery पता पहले डर लग रहा होगा, लेकिन यह वास्तव में काफी आसान है। आपको अपने सभी AJAX हैंडलिंग के लिए JQuery का उपयोग करना चाहिए।
# एक एंकर टैग है। यदि आप यह <a name="list">This is an anchor tag</a> करते हैं तो यूआरएल में #list जोड़ें, पृष्ठ उस टैग पर कूद जाएगा जहां नाम = सूची होगी।
नाम की तलाश में था प्लगइन बहुत आसान बताया गया। – diggersworld
मैंने एसईओ के साथ पूरी तरह से AJAX संचालित अनुप्रयोग के लिए हैश बैंग दृष्टिकोण का उपयोग किया है। मेरे अनुभव से मैं कहूंगा कि यह वेब ब्राउज़र और स्मार्ट फोन ब्राउज़र दोनों के लिए बहुत विश्वसनीय दृष्टिकोण है।
यहां मेरा दृष्टिकोण है। कोड सादगी के लिए मैं Jquery/Zepto कोड
का उपयोग करूंगा जब आपको एक अलग AJAX पृष्ठ लोड करने की आवश्यकता होती है तो बस जावास्क्रिप्ट का उपयोग करके URL हैश बदलें।
window.location.hash = '#!page1';
फिर एक हैश परिवर्तन घटना जावास्क्रिप्ट
$(window).on('hashchange',loadPage);
से सक्रिय कर देगा loadPage समारोह
var loadPage = function(e){
pageId = window.location.hash;
_gaq.push(['_trackPageview', '/'+pageId]); //For google analytics virtual page push
if(pageId == '#!page1'){
$.get('ajax/page1.php', function(response) {
$('#main').html(response);
});
}else if(pageId == '#!page2'){
$.get('ajax/page2.php', function(response) {
$('#main').html(response);
});
}
}
साथ कि घटना संभाल इस तरह से आप URL लिख कर और से एक पेज लोड कर सकते हैं लिंक का उपयोग कर भी।
अब एसईओ भाग। Google और अन्य प्रमुख खोज इंजन ने AJAX आधारित वेबसाइट को क्रॉल करने का एक तरीका विकसित किया है। यदि तुम प्रयोग करते हो #! आपके यूआरएल में Google # को प्रतिस्थापित करेगा! '_escaped_fragment_' के साथ भाग और सामग्री के लिए आपको पूछेगा। उदाहरण के लिए
www.yoursite.com/#!page1 www.yoursite.com/?_escaped_fragment_=page1 को
तुम सब करने की ज़रूरत पकड़ कि किसी GET पैरामीटर के रूप में _escaped_fragment_ है परिवर्तित किया जाएगा। कोड आप php का उपयोग करते हैं जैसे
if (isset($_GET['_escaped_fragment_'])) {
$fragment = $_GET['_escaped_fragment_'];
if($fragment == 'page1')
echo include 'ajax/page1.php'; // or use readfile method
else if($fragment == 'page2')
echo include 'ajax/page2.php'; // or use readfile method
}
तुम भी एक अलग टिप्पणी पर _escaped_fragment_
पकड़ने द्वारा व्यक्तिगत रूप से html पृष्ठ शीर्षक और प्रत्येक पृष्ठ के लिए वर्णन सेट कर सकते हैं हो सकता है, आप का उपयोग कर सामाजिक मीडिया में यूआरएल साझा कर सकते हैं #! भी। इसे _escaped_fragment_
की सहायता से एक नियमित लिंक के रूप में पार्स किया जाएगा, मुझे उम्मीद है कि दृष्टिकोण आपको सभी मुद्दों को कवर करने में मदद करेगा।
यदि आपके पास एक div सामग्री है जहां आप AJAX अद्यतन करते हैं, तो यहां jquery पता लाइब्रेरी http://www.asual.com/jquery/address/ का उपयोग करके एक उदाहरण दिया गया है।
<body>
<div id="content">
Your ajax content...
</div>
</body>
jQuery पते के पुस्तकालय और फिर
$(document).ready(function() {
$('a').address();
$.address.externalChange(function (e) {
if (e.value != '/') {
$('#content').load(e.value);
}
});
});
शामिल करें यदि इतिहास मार्गदर्शक
$('a[href!="#"]').address();
यह किसी और मामले किसी में अजाक्स दीप लिंकिंग कहा जाता है में से कुछ href से निकालना चाहते हैं सोच रहा है – Atomix
धन्यवाद @ एटोमिक्स, मैं – Jacques