ホームページ ウェブフロントエンド jsチュートリアル PushState、replaceState、onpopstateはAjaxページの前方および後方リフレッシュを実現します

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

May 23, 2018 am 11:15 AM

この記事では、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)
ログイン後にコピー
状態は json オブジェクトであり、いくつかのデータを保存するようにカスタマイズできます。 タイトルは、この 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 = $(&#39;#ajax-test-val&#39;),
// 获取当前页面的标记
m = window.location.search.match(/\?val=(\d+)/);
// 新进入页面,通过url中的标记初始化数据
if (m) {
increaseVal(m[1] - 1);
}
// 请求
function increaseVal(val) {
$.post(&#39;ajax-test.php&#39;, {
val: val
}, function(newVal) {
$val.text(newVal);
// 存储相关值至对象中
var state = {
val: newVal,
title: &#39;title-&#39; + newVal,
url: &#39;?val=&#39; + newVal
}
// 将相关值压入history栈中
window.history.pushState && window.history.pushState(state, state.title, state.url);
});
}
$(&#39;#ajax-test-btn&#39;).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を使用してフォームを非同期送信するいくつかの方法のまとめ

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

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

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

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

例JSONファイルの例 例JSONファイルの例 Mar 03, 2025 am 12:35 AM

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

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

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

10 jQuery構文蛍光物 10 jQuery構文蛍光物 Mar 02, 2025 am 12:32 AM

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

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

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

10 JavaScript&JQuery MVCチュートリアル 10 JavaScript&JQuery MVCチュートリアル Mar 02, 2025 am 01:16 AM

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

&#x27; this&#x27; JavaScriptで? &#x27; this&#x27; JavaScriptで? Mar 04, 2025 am 01:15 AM

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

See all articles