PushState+Ajaxによりリフレッシュレスでのページ切り替えを実現

今回は、pushState+Ajax でページ切り替えをリフレッシュせずに実現する注意事項を紹介します。実際のケースを見てみましょう。

はじめに

このようなニーズは非常に一般的です。ページ番号をクリックしてページを部分的に更新し (全体を更新するのではなく)、履歴管理を生成します。部分的な更新は簡単に実装できますが、これによって履歴管理が行われることはありません。幸いなことに、HTML5 にはこの問題を解決するための便利な API がいくつか用意されています。以下を参照してください。

Text

1. API

1.pushState

pushState() には、状態オブジェクト、タイトル (現在は無視されています)、およびオプションの URL アドレスの 3 つのパラメーターがあります。
state: ジャンプ先の URL に対応する状態情報。
title: 空の string (後で役立つ可能性があります)。
url: ジャンプ先の URL アドレス。ドメインを越えることはできません。

機能: 現在のURLとhistory.stateを履歴に追加し、現在のものを新しい状態とURLに置き換えます。ページが更新されることはありません。

2. replaceState

history.replaceState() オペレーションは、replaceState() メソッドが新しいエントリを作成する代わりに現在の履歴エントリを変更する点を除いて、history.pushState() と似ています。

3. window.onpopstate

history.go とhistory.back (ユーザーがブラウザ履歴の進むボタンと戻るボタンを押すことを含む) がトリガーされ、ページが更新されない場合 (履歴は PushState を使用して変更されるため)、 Popstateイベントがトリガーされると、ブラウザはURLと対応する状態オブジェクトを履歴から取り出し、現在のURLとhistory.stateを置き換えます。 History.state は、event.state からも取得できます。

2.

シーンの実装は非常に簡単です。ボタンの下にある p をクリックすると、さまざまな 写真 とタイトルが表示され、Ajax を使用して更新し、履歴管理を生成します。

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

コアコード

  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); 
  })()

ウィンドウのpopstageイベントをリッスンし、イベントが発生したときに現在の履歴に対応するページ番号を取得しますが発生し、ajax を実行します

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

信じられないかもしれませんが、この記事の事例を読んだ後は、この方法をマスターしたことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

AJAX リクエスト配列の実装方法

Ajax でキャッシュをクリアする方法

以上がPushState+Ajaxによりリフレッシュレスでのページ切り替えを実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。