如何使用 JavaScript 历史记录 API

Question

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

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

但是我不明白这是如何工作的？他们 AJAX 请求整个新页面，因此从 到 包含，然后貌似（使用名为“slideTo”的方法？？）将此数据放入滑块元素中？当然，你最终会得到一个页面中的页面（可能有 CSS 故障）。

使用 AJAX 和 History API 时，如何仅获取已更改的特定部分？或者是html代码被替换了（但上面的例子不是这样的）？

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

Answer 1

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

Firebug 示例

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

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;

Answer 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"< 部分） /code>），有效地仅更改 #contentContainer 部分，因为它将通过重新加载页面来加载。

如果您另外使用 pushState 更改 URL，则会在页面重新加载时达到效果。使用 onpopstate 事件，您可以允许来回浏览动态生成的页面。

够清楚了吗？

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