ブラウザーの Ajax リクエストと前方および後方への移動が可能になる問題を解決する_AJAX 関連

別の Web ページを閲覧するとき、ブラウザの進むキーと戻るキーを使用して、前後にアクセスしたページに移動できます。この記事では、主に (1) ブラウザに ajax リクエストを記憶させて、前後に進むことができるようにする方法を紹介します。戻るキーを押すと、前後にアクセスしたページに移動します。これらすべてに共通しているのは、ブラウザのアドレス バーのアドレスが変更されていることです。ブラウザ自体は、ユーザーが訪問したページの履歴を記録するスタックを維持します。このスタックには、ユーザーがさまざまなページにアクセスした順序が記録されます。

しかし、開発では、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 リクエストを記録するブラウザーの機能を追加しました。

以上がブラウザーの Ajax リクエストと前方および後方への移動が可能になる問題を解決する_AJAX 関連の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。