ブラウザに Ajax リクエストを記憶させ、ブラウザを前後に制御する方法

今回は、ブラウザにajaxリクエストを記憶させて、ブラウザの進むステップと戻るステップを制御する方法を説明します 以下は実際のケースを見てみましょう。

別の Web ページを閲覧するとき、ブラウザの進むキーと戻るキーを使用して、前後にアクセスしたページに移動できます。これらすべてに共通しているのは、ブラウザのアドレス バーのアドレスが変更されていることです。ブラウザ自体は、ユーザーが訪問したページの履歴を記録するスタックを維持します。このスタックには、ユーザーがさまざまなページにアクセスした順序が記録されます。

しかし、開発では、Web ページのユーザーエクスペリエンスを向上させるために、Ajax テクノロジーをよく使用します。ただし、Ajax 自体はブラウザのアドレス バーの URL を変更しません。現時点では、ブラウザは Ajax リクエストを記録しません。この場合、ページによってトリガーされた 5 つの ajax リクエストの後でユーザーが戻るボタンをクリックすると、ブラウザーは前の ajax リクエストを再度リクエストせず、前のページに戻ります。

この問題を解決する最初の方法は、場所のハッシュ値を使用することです。 URL のハッシュ値が変更された場合、ページはジャンプしませんが、ブラウザーはハッシュ化された URL を履歴レコードに記録します。この機能を使用すると、履歴機能を使用して ajax リクエストを人工的にシミュレートできます。以下はこの方法のデモです。

ul{
 margin:0;
 padding:0;
}
li{
 list-style: none;
 display: block;
 float: left;
 border: 1px solid #000;
 padding: 10px;
 margin-right: 20px;
 cursor: pointer;
}
li.active{
 background-color: #000000;
 color: #fff;
}
<ul>
 <li data-id="1">1</li>
 <li data-id="2">2</li>
</ul>

まず 2 つのボタンを作成します。ボタンがクリックされると、リクエストがサーバーに送信され、サーバーはデータ ID に対応する結果を返します。

同時に、ボタンの状態を変更し、場所のハッシュ値を data-id 値に変更します。最後に、場所のハッシュ値の変化を監視し、上記の手順を繰り返します。

function sendAjax(hash){
 console.log("recived data:" + hash);
}
function btnStatus(hash){
 $("li").removeClass('active');
 $("li[data-id="+hash+"]").addClass('active');
}
function onHashChange(){
 var curHash = window.location.hash.replace("#","");
 if(curHash){
  btnStatus(curHash);
  sendAjax(curHash);
 }
}
window.onhashchange = onHashChange;
$("li").click(function(){
 var id = $(this).attr('data-id');
 window.location.hash = id;
});

「1-2-1」の順にボタンをクリックすると、コンソールの出力は以下のようになります

recived data:1
recived data:2
recived data:2

このとき、戻るボタンを3回連続で押すと、コンソールは次のとおりです

recived data:1
recived data:2
recived data:1

このようにしてシミュレーションが実装されていることがわかります。 Ajax リクエストを記録するブラウザーの機能を追加しました。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Ajax + PHP を使用してショッピング カートを作成するための詳細なチュートリアル

AJAX ページング効果を実装する方法

以上がブラウザに Ajax リクエストを記憶させ、ブラウザを前後に制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。