Question

在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代码（但在上例中并非如此）？

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

Answer 1

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

Firebug示例

FireBug Example

正如您所看到的，返回的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"部分加载），实际上仅更改#contentContainer部分，因为它将被加载重新加载页面。

如果您另外使用pushState更改网址，则会在重新加载网页时实现效果。使用onpopstate事件，您可以允许在动态生成的页面中来回传递。

是否足够清楚？

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

如何使用javascript历史API

2 个答案:

Firebug示例

PHP代码示例