ajax と html5 は更新せずにページ 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 インターフェイスを導入しており、これをサポートしていないブラウザは定期的にハッシュを判断することしかできません。変更されるでしょうか

5. しかし、この方法は検索エンジンにとって非常に不親切です

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

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

pushState およびreplaceState インターフェイス。

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

使い方

var state = {
    title: title,
    url: options.url,
    otherkey: othervalue
};
window.history.pushState(state, document.title, url);

状態オブジェクトのタイトルと 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 に基づくプラグインが作成され、ajax+history.pushState が pjax にカプセル化されています。現在、jquery、qwrap の 3 つのバージョンがあります。 、kissy がサポートされています

さらに、HTML4 と HTML5 の両方の効果を考慮したい場合は、history.js を参照してください。 https://github.com/browserstate/history.js 。

参考資料:

1. HTML5 History API の紹介

2. ブラウザ履歴とナビゲーション