Ajax को VKontakte के रूप में उपयोग करते हुए एक पृष्ठ लोड करें

बहुत पहले नहीं, मुझे आश्चर्य हुआ कि कैसे VKontakte की तरह ajax स्क्रिप्ट का उपयोग करके पेज लोड किया जा सकता है, और उसी समय सर्च इंजन द्वारा अनुक्रमित किया जाए।

मैंने यह स्क्रिप्ट JS jQuery फ्रेमवर्क ( साइट पर जाएँ ) और HashChange प्लगइन ( प्लगइन पेज पर जाएँ ) के आधार पर बनाई थी।

मैंने जो सबसे पहला काम किया था, वह पृष्ठ पर स्क्रिप्ट में प्लग था और एक फ़ंक्शन लिख रहा था जो पेज हैश में परिवर्तन को ट्रैक करेगा:

कनेक्ट स्क्रिप्ट:

<script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/hashchange.js"></script> 

समारोह:

  $jQuery = jQuery.noConflict(); $jQuery(window).hashchange(function(){ var link = window.location.hash.replace("#", ""); get_page_by_hash(link); }); 

यह फ़ंक्शन get_page_by_hash फ़ंक्शन को कॉल करता है जब पृष्ठ का हैश बदलता है, तो पहला तर्क पृष्ठ का लिंक होगा।

दूसरा चरण मैंने get_page_by_hash फ़ंक्शन को स्वयं बनाया:

  function get_page_by_hash(link){ if(typeof(link) != "undefined"){ if(link != ""){ $jQuery.ajax({ type: "POST", cache: false, async: false, url: link, success: function(data){ if(data != ""){ $jQuery("body").html(data); } } }); } } } 

इस फ़ंक्शन में, आपके शरीर में HTML को HTML के साथ बदल दिया जाता है जो अनुरोध के जवाब में आया था।
1. डेटा ट्रांसफर की विधि - यह निर्धारित करने के लिए POST की जरूरत है कि क्या वे सिर्फ पेज पर गए हैं या यह ajax के माध्यम से एक अनुरोध है। यह टेम्पलेट को एक ऐसी स्थिति बनाने की अनुमति देगा जो स्क्रिप्ट द्वारा अनुरोध किए जाने पर डेटा को छिपाने की आवश्यकता नहीं होगी:

 if($_SERVER["REQUEST_METHOD"] == "GET"){ } 

इसके अलावा, इस पद्धति का उपयोग करके, आप HTML को टैग में नहीं, बल्कि किसी भी तत्व के अंदर चुन सकते हैं, जिसे jQuery का उपयोग करके चुना जा सकता है, जबकि ऊपर बताई गई स्थिति का उपयोग करके टेम्पलेट में आवश्यक सभी चीज़ों को ट्रिम करना नहीं है।

अगला चरण उस पृष्ठ का हैश सेट करना था जिसे हम ऊपर दिए गए फ़ंक्शन का उपयोग करके ट्रैक कर रहे हैं:

 $jQuery("a").click(function(){ if($jQuery(this).attr("href").substr(0, 1) == "/"){ window.location.hash = $jQuery(this).attr("href"); } }); 

यह फ़ंक्शन आपको ब्राउज़र के एड्रेस बार में हैश जोड़ने की अनुमति देता है, यह सभी ब्राउज़रों में काम करता है।

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

1. आपको इस फ़ंक्शन का उपयोग करके एक ब्राउज़र को परिभाषित करने की आवश्यकता है:

 function getNameBrouser() { var userAgent = navigator.userAgent.toLowerCase(); //  Internet Explorer if (userAgent.indexOf("msie") != -1 && userAgent.indexOf("opera") == -1 && userAgent.indexOf("webtv") == -1) { return "msie"; } // Opera if (userAgent.indexOf("opera") != -1) { return "opera"; } // Gecko = Mozilla + Firefox + Netscape if (userAgent.indexOf("gecko") != -1) { return "gecko"; } // Safari,   MAC OS if (userAgent.indexOf("safari") != -1) { return "safari"; } // Konqueror,   UNIX- if (userAgent.indexOf("konqueror") != -1) { return "konqueror"; } return "unknown"; } 

2. अब हमें पृष्ठ के हैश अपडेट फ़ंक्शन का विस्तार करने की आवश्यकता है:

 $jQuery("a").click(function(){ if($jQuery(this).attr("href").substr(0, 1) == "/"){ if(getNameBrouser() == "gecko"){ window.history.pushState("", "", $jQuery(this).attr("href")); window.history.replaceState("", "", $jQuery(this).attr("href")); get_page_by_hash($jQuery(this).attr("href")); }else{ window.location.hash = $jQuery(this).attr("href"); } return false; } }); 

इन लिपियों का उपयोग करके, आपके पास VKontakte.ru के समान (पृष्ठ नेविगेशन में) एक साइट होगी