ブラウザを解決してajax要求を覚えて、前進と後退の問題ができます。

私たちは違うページを見ています。ブラウザの前進、後退ボタンを通じて前と後ろのページに来ます。これには共通点があります。ブラウザのアドレスバーの住所が変わったということです。ブラウザ自体はユーザーのページ履歴を記録するスタックを維持しており、スタックにはユーザーが異なるページにアクセスする順序が記録されている。
しかし、開発の中で、私達はよくajax技術を使ってウェブページのユーザー体験を高めます。しかし、ajax自身はブラウザのアドレスバーのurlを変えません。同じウェブページの内部で操作します。この時、ブラウザはajax要求の記録を記録しません。この場合、ユーザは、一つのページでトリガされた5回のajax要求後に、後退ボタンをクリックしたが、ブラウザは再び前のajax要求を要求することなく、前のページに戻った。
この問題を解決する最初の方法はlocationのhash値を利用することです。urlのhash値が変わると、ページはジャンプしませんが、ブラウザはこのhash付き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>

まず二つのボタンを作成し、ボタンをクリックするとサーバに要求を送信し、data-indをパラメータでサーバに持ち込み、サーバはdata-indに対応する結果を返します。
これと同時に、ボタンの状態を変え、locationのhash値をdata-indの値に変更します。最後にlocationのhash値の変化を傍受し、上記のステップを繰り返します。

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の要求を覚えさせて、そして前进と后退の方法（一）を覚えさせて、みんなに助けがあることを望んで、もしみんなはいかなる疑问があるならば、メッセージを下さい。小编は直ちにみんなのに返答します。ここでも私たちのサイトを応援してくれてありがとうございます。