PushState + Ajaxのシンプルな1ページのアプリケーションSPAを達成

記事のソース

単一ページのアプリケーション（シングルページアプリケーション）SPAと呼ば、SPAを使用してのアプリケーションの利点は、優れたユーザーエクスペリエンスを構築してきました、高速で、これ相対を減らし、リロードにページ全体の内容を変更し、ジャンプし、不必要な繰り返しのレンダリングを避けるために必要はありません。サーバーのストレス、WEB、モバイル端末でのSPAが広く用いられています。

私たちは、ページ全体を更新せず、部分的なページロードがハッシュ変換アドレスバーによって達成されることがあり、前回の記事で言及したシンプルなフロントエンドのルートをルーティングJavascriptのフロントエンドを実現します。

私はあなたを与える今日はおよそアドレスバーには、SPAの単純なページを達成するために、部分ページ・リフレッシュ効果、統合フロントとバックエンド技術を変換しながら、ページ全体をリフレッシュしませんPushState HTML5 + AJAX実装を使用することです。我々はいくつかの知識ポイントを理解するために開始します。

HTML5の歴史API

現在のURL履歴に追加し、新しいURLに現在のURLを変更しますpushState方法、の増加でHTML5の歴史。もちろん、この方法はURLアドレスバーの表示を変更しますが、すべての要求を発行しませんでした。私たちは、AJAX単一ページのアプリケーションSPAと一緒にこの方法を使用することができますので、Pjax呼ばPushState + Ajaxのは、あります。

pushstate使用：

history.pushState（状態、タイトル、URL）

状態： あなたが入れたいすべてのデータを置くことができ、それは情報ページへの補足として、新しいURLに接続します。

タイトル： 名前が示すように、document.titleです。

URL： 新しいURL、である、あなたはアドレスバーのURLに表示します。

history.replaceState（状態、タイトル、URL）

replaceState方法やpushStateはほとんど同じ、唯一の違いは、現在のURLのpushStateは歴史的な記録に追加して、あなたのURLを編集し、replaceStateだけでURLを変更し、歴史的な記録を追加しないだろうということです。

window.onpopstate

一般的には、URLが変更するたびに、popstateイベントがトリガされます。コールpushStateは、URLを変更する場合、我々は前後進イベントブラウザとしてそれを使用することができますので、しかし、イベントは、トリガされません。イベントは、1つのパラメータの方法上記第1のパラメータ状態pushStateを有しています。

何をPjax

Pjaxを行うことができる優れたソリューションです。

スムーズな移行は、ページを切り替える読み込んでアニメーションを増やすことができます。
ページ間でデータを渡すことができ、URLを依存していません。
選択的な音楽サイトとして、保持することができ、あなたはページを切り替えたときに、曲の再生を停止することはありません。
すべてのタグは、単にラベルをジャンプするために使用することができます。
JSの回避は、トラフィックの保存、要求の量を減らし、ページの応答時間、最大速度を公共の繰り返し。
HTML5のブラウザをサポートし、検索エンジンのクローラていないにも影響されないSEOについて、あなたは本当のページにジャンプすることができます。
前方ブラウザバックボタンをサポートしています。

原則

1.インターセプトデフォルトのタグジャンプ動作。

2.アヤックスは、新しいページを要求します。

置き換え3. HTMLは、ページに戻ります。

HTML5の歴史APIやURLのURLハッシュの4.が変更されました。

コードの実装

HTML

私たちは、メニュー上のリンクを介して、メニュー#navを設定するdiv＃結果の内容に対応するリンクされたページをロードします。

<UL ID = "NAV">   
    <LI> <a href="home.html">首页</a>に</ LI>   
    <LI> <a href="product.html">产品</a>の</ LI>   
    <LI> <a href="server.php"title="服务">服务</a>の</ LI>   
</ UL> 
<DIV ID = "結果"> </ div>

pjax.js

キャッシュ{}、定義セットキャッシュとキャッシュ取得方法：第一に、キャッシュオブジェクト・キャッシュを定義するケースpjax.jsサポートHTML5ブラウザで決定されます。イベント{}、結合popstateとなhashchangeを、コールpajaxオブジェクト要求ページのコンテンツをトリガするイベントをクリックして、イベントをクリックします。次にイベントイベントオブジェクトを定義します。あなたが原因だけコアpjax {}オブジェクトコード飛び出しスペースの理由に、この紙をソースコードビューをダウンロードすることができたイベントとイベントオブジェクトというキャッシュキャッシュオブジェクトコード。

pjax = {VAR 
    //前後には、現在の操作が進退によってトリガーされるかどうかを示す
    FNB：falseに、
    //新しいページのコンテンツを表示
    表示：機能（タイトル、HTML）{ 
        document.title =タイトル; 
        document.querySelector（「＃ 「結果）innerHTMLはHTML ;. = 
    }を、
 
    //は、特定のページにスキップ
    ジャンプ：機能（URL、データ、コールバック）{ 
         
        //それは前後によってトリガされた場合、キャッシュからデータを取得しようとする
        場合（pjax.fnb ）{ 
            VAR値= cache.get（URL）; 
            ！IF（値== NULL）{ 
                pjax.show（value.title、value.html）; 
                リターン; 
            } 
        }
 
  
        document.querySelector（ '＃結果'）= innerHTMLプロパティ。 「読み込み中...」。
        // AJAX请求发送 
        VAR XHR =新しいXMLHttpRequestを（） ;
 
        xhr.open（ "GET"、urlには、真の）; 
        xhr.setRequestHeader（ "X-PJAX"、 "真"）; 
        xhr.setRequestHeader（ "X-PJAX-TITLE"、データ）。
        xhr.setRequestHeader（ "X-要求-と"、 "XMLHttpRequestの"）; 
        xhr.onreadystatechange =関数（）{ 
            IF（xhr.readyState === 4）{ 
                IF（xhr.status> = 200 && xhr.status <300 || xhr.status === 304）{// 304是缓存
                    VAR HTML = xhr.responseText、
                        タイトル= xhr.getResponseHeader（ "X-PJAX-TITLE"）。
                    IF（タイトル== NULL）{ 
                        タイトル= document.title。
                        タイトル= decodeURI（タイトル）。 
                    //console.log(title）; 
                     
                    //新しいページの表示
                    pjax.showを（タイトル、HTML）; 
 
                    //代わりに、前方のバックボタンがトリガー
                    IF（pjax.fnbを）{！
                        // URLを変更します、URLアドレスバーに変換されます
                        （サポート=== 'HTML5'）{IFを
                            history.pushState（NULL、NULL、URL）; 
                        }他{ 
                            VARパス= url.replaceを（location.protocol + "//" + location.host 、 ""）; 
                            location.hash =パス; 
                        } 
                        //キャッシュに追加 
                        cache.set（URL、{ 
                            タイトル：タイトル、
                            HTML：HTML 
                        }）; 
                    } 
 
                } {他
                    にconsole.log（ 'リクエストが失敗した！'）; 
                } 
                pjax.fnb = trueに; 
            } 
        }; 
        xhr.send（）; 
    }、
 
    INIT：機能（）{ 
        event.bindEvent（） ; 
    } 
}。

コア部分がpjax AJAX非同期要求、呼HTML5 history.pushState（）メソッドは、キャッシュページ情報は、処理結果が、非同期要求から返されていることがわかります。

ラストコール：

pjax.init（）;