Loading a page using Ajax as VKontakte

Not so long ago, I wondered how it was possible to make the pages load using the ajax script, like VKontakte and at the same time were indexed by search engines.

I made this script based on the jS jQuery framework ( go to the site ) and the HashChange plugin ( go to the plug-in page ).

The first thing I did was to connect the scripts on the page and write a function that will track the change of the page hash:
')
Script connection:

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

Function:

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

This function calls the “get_page_by_hash” function when changing the page hash, the first argument of which will be the link to the page.

The second step I did was the get_page_by_hash function itself:

  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); } } }); } } } 

In this function, the html in you body is replaced with html, which came in response to the request.
1. Data transfer method - POST is needed to determine if you just went to the page or this is a request via ajax. This allows the template to make a condition that will hide the data that does not require display when requested by the script:

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

Also, using this method, you can make a html replacement not in a tag but inside any element that can be selected using jQuery, while cutting off all unnecessary in the template using the condition specified above.

The next step was setting up a page hash which we track using the function above:

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

This function allows you to add hash to the address bar of the browser, it works in all browsers.

Everyone also saw that VKontakte in Mozilla and Chrome browsers change the address without reloading the page, to achieve this you need to take a couple more steps:

1. You need to define a browser using this function:

 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. Now we need to expand the update function of the page hash:

 $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; } }); 

With the help of these scripts you will have a site similar to (by clicking on the pages) on the VKontakte site.