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

Question

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

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

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

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

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

Answer 1

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

使用jQuery.load(),您可以div从另一个网页中选择并重新加载内容.例如:

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

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

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

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

@ user1300321:源代码是源代码,你不是通过使用javascript来改变它.你似乎想要一个页面导航所做的一切,但没有使用它...为什么??? (2认同)

Answer 2

有，它叫做PushState。

这是一种较新的技术，大多数最新的浏览器（不包括Internet Explorer：P）都支持。基本上，它通过javascript更改了地址。

我似乎什么都没有，但是真的很整洁！通常，您可以通过www.example.com#/contact例如哈希来完成此操作。

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

依赖于此，我将一个事件绑定到执行pushstate和一些ajax的相关链接，而不是加载新站点，或者让该<a href="">行为正常进行。
这使得所有浏览器都相当满意。

基本上，我的脚本通过刷新创建与pushstate和ajax相同的结果。

编辑：
在您的示例只是一个旁注。它非常聪明：)
它通过ajax加载新页面并获取HTML，但是如果再次浏览该页面，它将重新显示获取的结果，因此不会进行不必要的ajax调用。