ページ切り替えの更新なし-pushState

前言
ページ番号をクリックしてページをローカルに更新し(全体的なリフレッシュではない)、履歴管理を生成する必要があります.ローカルリフレッシュは容易に実現でき、ajaxは私たちのニーズを満たすことができますが、これは履歴管理を生成することはありません.html 5は私たちにいくつかの使いやすいapiを提供して、この問題を解決するのに便利です.以下を参照してください.
本文
一、API
1、pushState pushState()には3つのパラメータがあります.1つのステータスオブジェクト、1つのタイトル(現在は無視されます)、1つのオプションのURLアドレスです.state:ジャンプ先のURLに対応するステータス情報.title:空の文字列(後で役に立つかもしれません).url:ジャンプするURLアドレスは、ドメインをまたぐことはできません.
役割:現在のURLとhistory.stateはhistoryに追加され、現在のstateとURLを新しいstateとURLで置き換えます.ページのリフレッシュは行われません.
2、replaceState history.义齿pushState()は、replaceState()メソッドが新しいエントリを作成するのではなく、現在の履歴エントリを変更する点で異なります.
3、window.onpopstate history.-ええback(ユーザがブラウザ履歴を押す前に戻るボタンを含む)がトリガーされ、ページのブラシがない場合(pushStateでhistoryが変更されたため)popstateイベントがトリガーされ、イベントが発生するとブラウザがhistoryからURLと対応するstateオブジェクトを取り出して現在のURLとhistoryを置き換える.state.通過するstateはhistoryを取得することもできます.state.
二、実現
シーンは簡単で、ボタンの下のdivをクリックすると異なる画像やタイトルが表示され、ajaxを使用してリフレッシュされ、履歴管理が生成されます.

<p class="page">
    <a href="javascript:;">[ <span>1span> ]a>
    <a href="javascript:;">[ <span>2span> ]a>
    <a href="javascript:;">[ <span>3span> ]a>
    <a href="javascript:;">[ <span>4span> ]a>
p>
<div>
    <img />
    <p class="title">p>
div>

コアコード

    function setUrl(page){
        var url = location.pathname + '?page=' + page;
        history.pushState({
            url : url
        },'',url);
    }
//                       

注意初読み込みの場合は履歴の置き換えが必要です

    (function(){
        //       
        var url = location.pathname + '?page=1';
        //         
        history.replaceState({
            url : url
        },'',url);  
    })()

Windowsのpopstageイベントをリスニングし、イベント発生時に現在の履歴に対応するページ番号を取得しajaxを実行します.

    window.addEventListener('popstate',function(){
        var page = getPage();
        xhr(page);
    })

大体の骨格はこうです.