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

Question

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

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

以下是使用该效果的示例网站。

http://onedesigncompany.com/

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

此外，如果有人发现使用这种方法有任何不利因素，我全都听见了。

Answer 1

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

http://api.jquery.com/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调用。