如何在没有实际页面刷新的情况下更新页面html和url

Question

我想知道是否有人可以指导我学习如何在不刷新页面的情况下更新页面html和url。

是否有任何现有的javascript库可以处理这个问题，或者有一本很好的书来涵盖这类事情。

这是使用该效果的示例站点。

http://onedesigncompany.com/

请注意，当更改部分时，实际的html会更新，并且在保持平滑过渡且没有可见页面刷新的同时更新URL。 该网站也可以正常运行，无需javascript。

此外，如果有人看到使用这种方法的任何缺点，我都是耳朵。

Answer 1

如果你需要重新加载页面的一部分，而不重新加载整个页面，我强烈建议使用jQuery.Load() ：

使用jQuery.load（），您可以选择一个div并从另一个网页重新加载内容。 例如：

$(".myDiv").load("/myOtherwebpage.html");

您还可以指定该其他页面上特定元素的内容：

$(".myDiv").load("/myOtherwebpage.html .myOtherClass");

但是，如果您需要从其他页面重新加载所有内容，并将URL更改为其他页面，那么我建议您链接到该页面。 通过jQuery执行此操作没有性能优势。

Answer 2

有，它叫做PushState 。

这是一种新技术，大多数最新浏览器（Internet Explorer除外：P）支持。 基本上它通过javascript改变地址栏。

我可能看起来没什么，但它真的很整洁！ 通常你可以通过哈希www.example.com#/contact来做到这一点。

我使用过这项技术的最新项目我使用了名为History.js的js插件，可以确定您的浏览器是否支持PushState。

根据这一点，我要么将事件绑定到相关链接，这些链接执行pushstate和ajax而不是加载新站点，或让<a href="">正常行动。
这使得所有浏览器都很开心。

基本上，我的脚本使用刷新和pushstate和ajax创建相同的结果。

编辑：
只是关于你的那个例子的旁注。 它非常巧妙:)
它通过ajax加载新页面并获取它的HTML，但如果再次浏览该页面，它会重新显示获取的结果，因此不会进行不必要的ajax调用。