ホームページ > 記事 > ウェブフロントエンド > ブラウザが Ajax リクエストを記憶し、前後に移動できるという問題を解決する
別の Web ページを閲覧するとき、ブラウザの進むキーと戻るキーを使用して、前後にアクセスしたページに移動できます。この記事では、ブラウザに 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 がサーバーに渡され、サーバーはデータ 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 リクエストを記録するブラウザの機能をシミュレートしていることがわかります。
上記は私があなたのためにまとめたものです。
関連記事:
jQueryでWebサービスを呼び出すajaxを介して配列パラメータを渡す問題(写真テキストチュートリアル)
以上がブラウザが Ajax リクエストを記憶し、前後に移動できるという問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。