你试过HTML5历史API吗?
http://html5doctor.com/history-api/
至于AJAX,我只使用jQuery
.load()
方法,拉入url,然后选择要引入的id。
假设您的主页具有如下HTML:
<body>
<header><h1>Site Title</h1></header>
<a class="trigger" href="#">Load Ajax</a>
<section id="ajaxBin">
<p>Content of the section</p>
</section>
</body>
然后在将使用AJAX加载的页面上,有以下HTML:在此处输入代码
<body>
<header><h1>Site Title</h1></header>
<aside id="sidebar">
<h2>Sidebar Info</h2>
<p>This is content that should not load</p>
</aside>
<section id="container">
<p>All of the content you want to load with AJAX</p>
</section>
</body>
因此,如果您的所有内容都在希望使用ajax加载的页面上的“#containter”元素中,则可以执行以下操作:
var hrefVariable = $(this).attr(\'href\')+\'#container\';
jQuery(\'body\').on(\'click\', \'a.trigger\', function(e){
// prevent link from doing it\'s thang
e.preventDefault();
// load specific content from an element within a new url into current pages element (#ajaxBin)
jQuery(\'#ajaxBin\').load(hrefVariable, callbackFunction);
});
这可以避免您编写额外的模板,因为您只需将HTML整理为能够提取所需内容即可。
这是a good tutorial 用那种方法。