PushState、replaceState、onpopstateはAjaxページの前方および後方リフレッシュを実現します

この記事では、Ajax ページの前方および後方更新を実現するために、pushState、replaceState、および onpopstate を主に紹介します。これは非常に優れており、必要な場合は参照できます。ページを効率的に更新できます。

しかし、次の問題もあります: ページを更新すると、ページは初期状態になります

ブラウザの進む、戻る機能は無効です

検索エンジンのクローラーに優しくありません

1 、

以前は、ブラウザのハッシュ アンカー ポイントを使用して問題を解決しました

異なるハッシュはページの異なる部分をマークするため、誤ったページ更新データの問題を修正できます

次に、 onhashchange イベント、手動で前方と後方の操作を実行し、ブラウザーをサポート

2、

その後、ハッシュバン技術が登場しました。つまり、上記の問題を解決するために URL の後に #!/myPath マークを追加します

ページを定義しますパス パーツを介して、単一ページ アプリケーションでよく見られます (既に Angular でカプセル化されています)。しかし、このパスのクロールを実際にサポートしているのは Google だけのようです

3、

HTML5 の新機能は、pushState と replaceState という 2 つの新しい履歴メソッドと、onpopstate ウィンドウ イベントを通じて、上記の 3 つの問題を解決するのに役立ちました。 , これは HTML5 の新機能であるため、古いブラウザでは十分にサポートされていません。互換性のために hashbang メソッドを使用することをお勧めします

この記事では主に PushState などの新しいことについて説明します

テキストが退屈すぎます。まずアイコンを見て、クリックして感じてみてください

history.pushState(state, title, url)
history.replaceState(state, title, url)

url は特定のページのタグ URL (操作が変更されるだけです。アドレスバーの URL はすぐには読み込まれません。単に ?w=a、ajaxPage.html/w=a、&w をマークするだけで済みます) =a. これは単なるマークです。値を取得するときに比較するだけです)

replaceState との違いは、前者は現在の値を直接置き換えるのに対し、後者は値をスタックにプッシュすることです

イベントがトリガーされると、上記のメソッドの最初の json オブジェクトは、history.state

実装部分を通じて取得できます

HTML

<p class="push-state-test">
<input type="button" id="ajax-test-btn" value="Ajax获取">
<p>value: <span id="ajax-test-val">0</span></p>
</p>

JS

var $val = $('#ajax-test-val'),
// 获取当前页面的标记
m = window.location.search.match(/\?val=(\d+)/);
// 新进入页面，通过url中的标记初始化数据
if (m) {
increaseVal(m[1] - 1);
}
// 请求
function increaseVal(val) {
$.post('ajax-test.php', {
val: val
}, function(newVal) {
$val.text(newVal);
// 存储相关值至对象中
var state = {
val: newVal,
title: 'title-' + newVal,
url: '?val=' + newVal
}
// 将相关值压入history栈中
window.history.pushState && window.history.pushState(state, state.title, state.url);
});
}
$('#ajax-test-btn').click(function() {
increaseVal(parseInt($val.text(), 10));
});
// 浏览器的前进后退，触发popstate事件
window.onpopstate = function() {
var state = window.history.state;
console.log(state)
// 直接将值取出，或再次发个ajax请求
$val.text(state.val);
window.history.replaceState && window.history.replaceState(state, state.title, state.url);
};

PHP

<?php
$val = $_REQUEST[&#39;val&#39;];
echo $val + 1;
?>

ここでは、さまざまな Ajax 結果ページが ?val=num でマークされています

ヒント:

pushStateを使用した後、前後に進むときにpopstateイベントがトリガーされ、対応するjsonオブジェクトが取得されます

jsonオブジェクトのデータはカスタマイズできます

関連するタグを選択してリクエストを送信するか、タグページに対応する結果を直接保存します

戻る操作により、アドレスバーのURLが取得されます更新され、非同期データも更新されます

ページを更新するか、新しいページを開くにはページでは、URL 内のタグに従ってデータをリクエストする必要があります

覚えておく必要があるのは、ブラウザは URL のこの部分に対応するタグを自動的に読み込まないということです。この非同期コンテンツ ページを取得する必要があります

。上記は私が皆さんのためにまとめたものであり、将来皆さんに役立つことを願っています。

関連記事:

ajaxを使用してフォームを非同期送信するいくつかの方法のまとめ

AJAXリクエストの配列の問題を解決する方法

以上がPushState、replaceState、onpopstateはAjaxページの前方および後方リフレッシュを実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。