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 などの新しいことについて説明します
テキストが退屈すぎます。まずアイコンを見て、クリックして感じてみてください
この栗の目的は次のとおりです: 初期値は 0 で、値は非同期リクエストを通じて自動的に増加します。前方または後方に進んで更新できます。また、新しい URL を開いた後に対応するデータを取得することもできます
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['val']; echo $val + 1; ?>
ここでは、さまざまな Ajax 結果ページが ?val=num でマークされています
ヒント:
pushStateを使用した後、前後に進むときにpopstateイベントがトリガーされ、対応するjsonオブジェクトが取得されます
jsonオブジェクトのデータはカスタマイズできます
関連するタグを選択してリクエストを送信するか、タグページに対応する結果を直接保存します
戻る操作により、アドレスバーのURLが取得されます更新され、非同期データも更新されます
ページを更新するか、新しいページを開くにはページでは、URL 内のタグに従ってデータをリクエストする必要があります
覚えておく必要があるのは、ブラウザは URL のこの部分に対応するタグを自動的に読み込まないということです。この非同期コンテンツ ページを取得する必要があります
。上記は私が皆さんのためにまとめたものであり、将来皆さんに役立つことを願っています。
関連記事:
AJAXリクエストキューの実装ajaxを使用してフォームを非同期送信するいくつかの方法のまとめ
以上がPushState、replaceState、onpopstateはAjaxページの前方および後方リフレッシュを実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です!検索をyに制限することができます

この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。 このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。 キー価値ペア表記を使用して、あらゆる種類を保存できます

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

コードプレゼンテーションを強化する:開発者向けの10個の構文蛍光物 ウェブサイトやブログでコードスニペットを共有することは、開発者にとって一般的な慣行です。 適切な構文ハイライターを選択すると、読みやすさと視覚的な魅力を大幅に改善できます。 t

楽なWebページレイアウトのためにjQueryを活用する:8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

この記事では、JavaScriptとJQuery Model-View-Controller(MVC)フレームワークに関する10を超えるチュートリアルの厳選された選択を紹介します。これは、新年にWeb開発スキルを向上させるのに最適です。 これらのチュートリアルは、Foundatioのさまざまなトピックをカバーしています

コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call()、apply()、bind()などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした
