AJAXアプリのアドレスバーURLを変更して現在の状態に一致させる

私はAJAXアプリを作成していますが、ユーザーがアプリ内を移動するときに、ページのリロードがないにもかかわらず、アドレスバーのURLを更新してください。基本的には、いつでもブックマークして、現在の状態に戻せるようにしたいと思っています。

AJAXアプリでRESTfulnessを維持するためにどのように対処していますか？

これを行う方法はlocation.hash、AJAXの更新により、個別のURLが必要な状態変化が発生する場合に操作することです。たとえば、ページのURLが次の場合：

http://example.com/

クライアント側の関数がこのコードを実行した場合：

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

次に、ブラウザに表示されるURLは次のように更新されます。

http://example.com/#foo

これにより、ユーザーはページの "foo"状態をブックマークし、ブラウザーの履歴を使用して状態間を移動できます。

このメカニズムを導入したら、JavaScriptを使用してクライアント側でURLのハッシュ部分を解析し、適切な初期状態を作成して表示する必要があります。フラグメント識別子（＃の後の部分）は、サーバ。

Ben Almanのhashchangeプラグインは、jQueryを使用している場合、後者を簡単にします。

book.cakephp.orgのようなサイトを見てください。このサイトはハッシュを使用せずにURLを変更し、AJAXを使用します。正確にどのように機能するかはわかりませんが、理解しようとしています。誰かが知っている場合は、私に知らせてください。

また、特定のプロジェクト内をナビゲートしているときのgithub.com。

Ajaxを使用している場合、ライターがビジターをリロードまたはリダイレクトすることはほとんどありません。しかし、なぜHTML5のpushState/を使用しないのreplaceStateですか？

アドレスバーは好きなだけ変更できます。AJAXを使用して、自然に見えるURLを取得します。

私の最新プロジェクトのコードをチェックしてください：http : //iesus.se/

これはケビンが言ったことに似ています。クライアントの状態をjavascriptオブジェクトとして保持できます。状態を保存する場合は、オブジェクトをシリアル化します（JSONおよびbase64エンコーディングを使用）。次に、hrefのフラグメントをこの文字列に設定できます。

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

最初の方法では、新しい状態を新しい場所として扱います（そのため、[戻る]ボタンでそれらを以前の場所に移動します）。後者にはありません。

SWFAddressはFlashおよびJavascriptプロジェクトで機能し、ブックマーク可能なURLを（上記のハッシュ方式を使用して）作成できるほか、戻るボタンのサポートも提供します。

http://www.asual.com/swfaddress/

window.location.hashメソッドは、物事を行うための推奨される方法です。その方法の説明については、 Ajax Patterns-Unique URLsを参照してください。

YUIは、このパターンをモジュールとして実装しています。これには、ハッシュを使用してアドレスを書き直すとともに、戻るボタンを機能させるためのIE固有の回避策が含まれています。YUIブラウザー履歴マネージャー。

他のフレームワークにも同様の実装があります。重要な点は、履歴をアドレスの書き換えと連動させたい場合、ブラウザごとにアドレスの処理方法が異なるということです。（これは最初のリンク記事で詳しく説明されています。）

IEはiframeベースのハックを必要とします。Firefoxは同じ方法を使用して二重の履歴を生成します。

OPまたは他のユーザーが引き続きブラウザーの履歴を変更して状態を有効にする方法を探している場合は、IESUSによって提案されているように、pushStateとreplaceStateを使用するのが、今では「正しい」方法です。location.hashに対する主な利点は、ハッシュだけでなく実際のURLを作成することです。ハッシュを使用するブラウザの履歴が保存され、JavaScriptを無効にして再度アクセスした場合、ハッシュはサーバーに送信されないため、アプリは機能しません。ただし、pushStateが使用されている場合、ルート全体がサーバーに送信されます。サーバーは、ルートに適切に応答するように構築できます。サーバー側とクライアント側の両方で同じ口ひげテンプレートが使用されている例を見ました。クライアントでJavaScriptが有効になっている場合、サーバーへのラウンドトリップを回避することで、迅速な応答が得られます。しかし、アプリはJavaScriptがなくても完全に正常に動作します。したがって、JavaScriptがない場合、アプリは正常に機能しなくなります。

また、history.jsのような名前のフレームワークが世の中にあると思います。HTML5をサポートするブラウザーの場合、pushStateを使用しますが、ブラウザーがそれをサポートしない場合、ハッシュの使用に自動的にフォールバックします。

ユーザーがページに「入っている」かどうかを確認します。URLバーをクリックすると、JavaScriptによってページ外であると表示されます。URLバーを変更して、その中に「＃」記号を付けて「Enter」を押すと、マウスカーソルでページを手動でクリックせずに、ページに再び移動します。その後、JavaScriptのkeyboadイベントコマンド（document.onkeypress）リダイレクト用のJavaScriptが入力されてアクティブになっているかどうかを確認できます。ユーザーがwindow.onfocusでページにいるかどうかを確認し、window.onblurでユーザーが出ていないかどうかを確認できます。

ええ、それは可能です。

;）