ajax を使用して、更新せずにページのコンテンツとアドレス バーの URL を変更する

この記事では主に、ajax と window.history.pushState を使用して、更新せずにページのコンテンツとアドレスバーの URL を変更する方法を詳しく紹介します。必要な友達はそれを参照してください

現在人気の Google Plus にアクセスするとき、慎重なユーザーは可能性があります。ページ間のクリックが ajax を介して非同期的にリクエストされ、同時にページの URL が変更されることがわかります。また、ブラウザーの進む方向と戻る方向を非常によくサポートできます。何がそんなに強力な機能を持っているのか、人々は不思議に思わずにはいられません。

HTML5 は、history.pushState とhistory.replaceState という新しい API を参照し、このインターフェイスを通じてページ URL を更新せずに変更できます。

従来の AJAX との違い

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

Ajax は更新せずにページのコンテンツを変更できますが、ページの URL を変更することはできません

第 2 に、アクセシビリティを向上させるために、コンテンツが変更されます。 URL のハッシュ。ただし、ハッシュメソッドはブラウザの前方および後方の問題をうまく処理できません

一部のブラウザでは onhashchange インターフェイスが導入されており、それをサポートしていないブラウザではハッシュが定期的に変更されたかどうかを判断することしかできません

また、ajax の使用スパイダーによってクロールされる領域は、多くの場合空です

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

PushState および replaceState インターフェイスはブラウザ履歴を操作し、現在のページの URL を変更します。

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. ドメインを越えることはできません。これは避けられません。私がかつてインターネットで見た古典的な格言を引用すると、「JavaScript がドメインを越えることができるなら、それは信じられないほど素晴らしいことになります!」 2. 状態オブジェクトは多くのカスタム属性を格納できますが、値をオブジェクトにすることはできません。

バックエンドでの一部の処理に相当します

このモードでは、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しかありませんが、それでも使用する際には多くの処理が必要になります。

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

関連記事:

Google Chromeブラウザでのajax障害を解決する方法

ajaxに基づいて、クリックして更新せずにさらに読み込んでこのページを読み込みます

Ajaxのクロスドメイン問題に対する2つの解決策

以上がajax を使用して、更新せずにページのコンテンツとアドレス バーの URL を変更するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。