如何在不实际刷新页面的情况下更新页面HTML和URL

Question

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

是否有已存在的javascript库来处理这个问题，或者是否有一本好的书籍涵盖了这种东西。

这是一个使用该效果的示例网站。

http://onedesigncompany.com/

注意，在更改部分时真实的html以及url也被更新，并且保持平稳的过渡而没有可见的页面刷新。该网站也可以在没有javascript的情况下正常工作。

另外，如果有人看到使用这种方法的任何缺点，请告诉我。

- puddletown

---

可能是修改URL而不重新加载页面的重复问题。还可以在此页面右侧的“相关”列表中查看众多重复问题。 - JJJ

我特别关注页面上的HTML如何更新。似乎不仅仅是修改URL栏。 - puddletown

那只是基本的 JavaScript。 - JJJ

你发布的例子似乎确实在刷新页面。我猜他们正在使用JQuery Mobile或类似的东西（看一下页面转换） - musefan

Answer 1

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

http://api.jquery.com/load/

使用jQuery.load()方法，你可以选择一个

标签，并从另一个网页重新加载内容到它里面。例如：

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

您还可以指定来自另一个页面上特定元素的内容：

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

然而，如果您需要从另一页重新加载所有内容，并将URL更改为不同的页面，则我建议直接链接到该页面。这样做没有通过jQuery获得性能优势。

- Curtis

---

没错，这是我的第一个想法，但实际的HTML并没有更新，而只是用脚本替换了。如果您查看源代码并浏览网站，您可以观察到HTML的变化。 - puddletown

@user1300321：源代码就是源代码，使用JavaScript并不能改变它。你似乎想要页面导航所做的一切，但却不想使用它...为什么？？？ - musefan

Answer 2

有一个叫做PushState的技术可以实现这一点。

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

它可能看起来并不重要，但确实非常好用！通常，您会通过哈希www.example.com#/contact来实现这一点，例如。

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

根据这个结果，我要么将事件绑定到相关链接，以便进行pushstate和一些ajax，而不是加载新站点，要么让<a href="">正常工作。
这使得所有浏览器都很高兴。

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

编辑：
只是关于您的那个例子的一个侧面说明。它做得非常聪明 :)
它通过ajax加载新页面并获取其HTML，但如果您再次浏览该页面，则重新显示获取的结果，因此不会进行不必要的ajax调用。

- Robin Castlin

---

谢谢！我想这就是了！在我标记答案之前，我会再研究一下的。 - puddletown

关于你的编辑：是啊！我对那个网站印象非常深刻。从第一眼看起来，它似乎完美地实现了渐进增强，并且js优化得非常好。非常聪明的东西。 - puddletown