ajax - 現在の状態に一致するように AJAX アプリのアドレスバーの URL を変更する

Question

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

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

score 117 · Accepted Answer

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 を使用している場合、後者を簡単にします。

score 18 · Accepted Answer

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

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

score 17 · Accepted Answer

Ajax を使用しているときに、ライターが訪問者をリロードしたりリダイレクトしたりすることはほとんどありません。しかし、なぜ HTML5 のpushState/を使用しないのreplaceStateでしょうか?

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

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

score 11 · Accepted Answer

これは、ケビンが言ったことと似ています。クライアントの状態を 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

最初の方法は、新しい状態を新しい場所として扱います (したがって、戻るボタンで前の場所に移動します)。後者はそうではありません。

score 3 · Accepted Answer

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

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

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

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

score 3 · Accepted Answer

SWFAddress は Flash および Javascript プロジェクトで機能し、ブックマーク可能な URL を作成し (上記のハッシュメソッドを使用)、戻るボタンのサポートを提供します。

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

ユーザーがページ内にいるかどうかを確認します。URL バーをクリックすると、JavaScript はページ外にいると判断します。URL バーを変更し、その中に記号「#」を付けて「ENTER」を押すと、マウスカーソルでページを手動でクリックせずに再度ページに移動すると、JavaScript からのキーボードイベントコマンド (document.onkeypress) がリダイレクト用の JavaScript を入力して有効にしているかどうかを確認できます。ユーザーがwindow.onfocusでページにいるかどうかを確認し、window.onblurで外にいるかどうかを確認できます。

ええ、それは可能です。

;)

ajax - 現在の状態に一致するように AJAX アプリのアドレス バーの URL を変更する

8 に答える 8

Related

Reference

ajax - 現在の状態に一致するように AJAX アプリのアドレスバーの URL を変更する