ajax とhistory.pushStateを使用して、refreshing_AJAX関連を行わずにページURLを変更する例

この記事では、主に ajax とhistory.pushStateを使用してページのURLを更新せずに変更する例を紹介します。必要な友人はそれを参照してください

パフォーマンス

このブログを訪問するときにChromeやFirefoxなどのブラウザを使用している場合。 , github.com, plus.google.com などの Web サイトを見ていると、注意して見ると、ページ間のクリックが ajax を介して非同期に要求され、同時にページの URL が変更されていることがわかります。また、ブラウザの前後方向を非常によくサポートできます。

そのような強力な機能があるものは何ですか？

HTML5 は、更新せずにページ URL を変更するために使用される新しい API、history.pushState およびhistory.replaceState を参照します。
従来の AJAX との違い

従来の Ajax には次の問題があります:

1. ページのコンテンツは更新せずに変更できますが、ページの URL は変更できません

2. アクセシビリティを向上させるためにコンテンツが変更されます。 URL は通常変更されます

3. ハッシュメソッドはブラウザの前方および後方の問題をうまく処理できません。

4. さらに、ブラウザは onhashchange インターフェースを導入しており、ハッシュが変更されたかどうかを定期的に確認することしかできません。

6. Google は #!xxx (つまり、ハッシュの最初の文字が!) の使用に同意しており、検索エンジンはそれをサポートしています。

従来の Ajax によって引き起こされる問題を解決するために、HTML5 には新しい API が導入されました。つまり、history.pushState、history.replaceState です。

pushState を通じてブラウザ履歴を操作し、現在のページの URL を変更できます。 replaceState インターフェイス。

pushState は指定された URL をブラウザ履歴に追加すること、replaceState は現在の URL を指定された URL に置き換えることです。

使い方

<strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">var state = { 
title: title, 
url: options.url, 
otherkey: othervalue 
}; 
window.history.pushState(state, document.title, url);</strong>

タイトルと URL に加えて、状態オブジェクトに他のデータを追加することもできます。たとえば、Ajax を送信するための設定を保存したい場合もあります。

replaceStateとpushStateは似ているので、ここでは紹介しません。

ブラウザの進む・戻る操作への応答方法

onpopstateイベントはwindowオブジェクト上で提供され、上で渡されたstateオブジェクトがイベントのサブオブジェクトとなり、保存されているタイトルとURLを取得することができます。

window.addEventListener('popstate', function(e){ 
if (history.state){ 
var state = e.state; 
//do something(state.url, state.title); 
} 
}, false);

このようにして、ajax と PushState を組み合わせて、リフレッシュ不要の完璧なブラウジングを実現できます。

いくつかの制限事項

1. 渡される URL は同じドメイン内にある必要があり、ドメインを越えることはできません

2. 状態オブジェクトは多くのカスタム属性を保存できますが、DOM オブジェクトなどのシリアル化できないオブジェクトは保存できません。

バックエンドでの一部処理に対応

このモードでは、ajaxを利用して更新せずに閲覧するだけでなく、変更されたURLを直接リクエストした後も通常の閲覧ができるようにする必要があるため、バックエンドでの処理が必要となります。これら。

1. setRequestHeader(‘PJAX’, ‘true’) など、pushState を使用して特別なヘッダーを ajax に送信します。

2. バックエンドが PJAX=true でヘッダーを取得すると、ページの共通部分は出力されません。例えば、PHPでは以下のような判断が可能です

function is_pjax(){ 
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true'; 
}

インターフェースにはpushState、replaceState、onpopstateしかありませんが、利用する際には多くの処理が必要になります。

このために jquery ベースのプラグインが作成されました。次の記事では、更新せずに URL の閲覧を変更する pjax (ajax+pushState) の使用方法を詳しく紹介します。

上記は私があなたのためにまとめたものです。

関連記事:

Ajaxの技術原則3点まとめ_AJAX関連

AJAXパッケージクラス利用ガイド

AJAX初心者向けチュートリアル:初めてのAJAX入門

以上がajax とhistory.pushStateを使用して、refreshing_AJAX関連を行わずにページURLを変更する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。