如何使用 javascript 历史 API答案

【问题标题】：How to use javascript history API如何使用 javascript 历史 API
【发布时间】：2011-05-20 23:51:45
【问题描述】：

在 github 的关于他们如何创建新的树形滑块的博客文章中，他们将其作为使用的代码：

$('#slider a').click(function() {
  history.pushState({ path: this.path }, '', this.href)
  $.get(this.href, function(data) {
    $('#slider').slideTo(data)      
  })
  return false  
})

但是我不明白这是如何工作的？他们 AJAX 请求整个新页面，所以从 <html> 到 </html> 包括在内，然后貌似（使用一种名为 'slideTo' 的方法？？）将这些数据放入滑块元素中？当然，您最终会得到一个页面内的页面（可能存在 CSS 故障）。

在使用 AJAX 和 History API 时，如何只获得已更改的特定部分？还是html代码被替换了（但上例中不是这样）？

github 实际使用的 javascript 在哪里？我是否正确，给出的示例不能是使用的，因为它不能正常工作？

【问题讨论】：

标签： jquery ajax html history pushstate

【解决方案1】：

服务器端代码可以检查X-Requested-With 标头，并确保它是XMLHttpRequest（jQuery 默认设置此标头），如果使用 XHR 请求，则仅发送内部视图。

萤火虫示例

如您所见，返回的 HTML 与没有使用 XHR 的请求时返回的 HTML 非常不同。

示例 PHP 代码

借助自解释功能。

$xhr = (isset($_SERVER['X-Requested-With')
    AND $_SERVER['X-Requested-With'] === 'XMLHttpRequest');

$view = View::factory('inner/something');

if ( ! $xhr) {
    $view = View::factory('template')
        ->set('innerView', $view);
}

echo $view;

【讨论】：

【解决方案2】：

首先，我假设您知道pushState() 和onpopstate 两者的工作原理。

您可以使用它来请求整个页面，提取其中的一部分并替换当前显示页面的适当部分。这样您就可以通过 URL 更改进行平滑过渡，但无需重新加载页面。

如何加载部分页面？假设每个页面都有这样的 HTML 结构：

<div id="contentContainer">
    <div id="content">
    ...
    </div>
</div>

如果您随后使用 eq. jQuery.load()，那么它可能看起来像这样：

$('#contentContainer').load('index.php #content', function(){
    // some fancy animation here
});

它有什么作用？它将index.php 页面的一部分（实际上是id="content" 的一部分）加载到当前加载的页面中（实际上是id="contentContainer" 的一部分），实际上只更改了#contentContainer 部分，因为它将在重新加载页面时加载。

如果您另外更改网址为pushState，您将达到页面重新加载的效果。使用onpopstate 事件，您可以允许在动态生成的页面之间来回切换。

够清楚了吗？

使用该功能，您还可以实现类似 Flash 的行为（平滑过渡）。

【讨论】：