1

在关于他们如何创建新树滑块的 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 使用在哪里？我是对的，给出的例子不能是使用的，因为它不能正常工作吗？

4

2 回答 2

3

服务器端代码可以检查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;
于 2011-05-20T23:54:31.790 回答
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部分，因为它将在重新加载页面时加载。

如果您使用 额外更改 URL pushState，您将获得重新加载页面的效果。使用onpopstate事件，您可以允许在动态生成的页面中来回切换。

够清楚吗？

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

于 2011-05-21T00:33:39.477 回答