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とHistoryAPIを使用する場合、変更された特定のセクションのみを取得するにはどうすればよいですか？それとも、htmlコードが置き換えられているのですか（ただし、上記の例ではそうではありません）？

実際のjavascriptgithubはどこで使用されますか？そして、私はそれが適切に機能しないので、与えられた例が使用されているものではないというのは正しいですか？

4

2 に答える 2

3

サーバー側のコードはX-Requested-Withヘッダーをチェックし、それが正しいことを確認しXMLHttpRequest（jQueryはデフォルトでこのヘッダーを設定します）、XHRで要求された場合は内部ビューのみを送信します。

Firebugの例

FireBugの例

ご覧のとおり、返される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>

次に、式を使用して適切な要求を行う場合。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 に答える