ajaxを使用して、ページの内容とアドレスバーのURLを更新しないことを実現します.

2320 ワード

現在人気のあるgoogle plusにアクセスすると、注意深いユーザーはページ間のクリックがajax非同期で要求されていることに気づくかもしれませんが、ページのURLが変わりました.ブラウザの前進と後退をうまくサポートできます.何がこのような強力な機能を持っているのかと聞きたくなる.
HTML 5に新しいAPIが引用されています.historyです.どうやって?replaceStateは、このインタフェースでページURLを更新せずに変更することができます.
伝統的なAJAXとの違い
従来のajaxでは、次のような問題があります.
ajaxはページ内容を更新せずに変更できますが、ページURLは変更できません
次にアクセス性を向上させるために,コンテンツが変更された後,URLのhashを変更する.しかしhashの方式はブラウザの前進、後退などの問題をうまく処理できない.
onhashchangeのインタフェースを導入したブラウザもあり、サポートされていないブラウザはhashが変更されたかどうかをタイミング的に判断するしかありません.
また、ajaxの使用は検索エンジンに友好的ではなく、クモが這うエリアが空いていることが多い.
従来のajaxがもたらす問題を解決するために、HTML 5には新しい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);

stateオブジェクトはtitleとurlのほかに、ajaxを送信する構成を保存したいなど、他のデータを追加することもできます.
replaceStateはpushStateと似ており、多くの説明は必要ありません.
ブラウザの前進、後退操作に応答する方法
Windowsオブジェクトにはonpopstateイベントが提供されており、上に渡されたstateオブジェクトがeventのサブオブジェクトとなり、格納されたtitleと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、stateオブジェクトは多くのカスタム属性を格納できますが、値はオブジェクトではありません.
バックエンドに対応するいくつかの処理
このモードでは、ajaxを現在使用してリフレッシュブラウズを行わないほか、変更を直接要求したURLを正常にブラウズできることを保証するため、バックエンドはこれらの処理を行わなければならない.
1、pushStateを結合したajaxに対して、setRequestHeader(‘PJAX’,‘true’)のような特殊なヘッダを送信することができる.
2、後端にPJAX=trueのあるヘッダを取得した場合、ページに共通する部分は出力されません.例えば、PHPは以下の判断により
 
  
function is_pjax(){
 return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}

インタフェースにはpushState、replaceState、onpopstateしかありませんが、使うときはいろいろな処理をしなければなりません.
以上が本文のすべての内容で、みんなが好きになることを望みます.