使用AJAX进行无缝页面更改

Question

我正在尝试使我的网站页面无缝加载。如果单击下面某些链接上的页面，您将看到我在说什么。

http://www.ultranoir.com/

http://www.itsmassive.com/

当您单击链接时，它将加载信息，并且/＃！/添加到URL。如何添加此功能，以便页面以相同的方式加载？哪里有教程？

Answer 1

这称为hashchange事件。您可以在更改后的值而#!无需重新加载页面，然后可以使用AJAX加载所需的信息。如果您使用的是支持HTML5的新浏览器，则可以使用History.pushState类似的方式更改网址栏。

基本上，您可以向链接添加事件，更改URL（使用location.hash或pushState），然后可以通过AJAX加载数据。

这里是一个不错的例子location.hash，而这里的一个pushState。

对于一个好的跨浏览器解决方案，我建议使用History.js。

如果要使用History.js，则在将脚本添加到页面后，还需要添加一些JavaScript。

$('a.hash').click(function(e){  // For all links with the class "hash"
   e.preventDefault();  // Don't follow link
   History.pushState(null, '', this.href);  // Change the current URL (notice the capital "H" in "History")
   $('#content').slideUp('slow', function(){  // Animate it sliding up
       var $this = $(this);
       $this.load(this.href, function(){  // Use AJAX to load the page (or do whatever)
          $this.slideUp('slow');  // Slide back down
       });
});