1. ホーム
  2. ajax

[解決済み] AJAXアプリのアドレスバーのURLを現状に合わせて変更する

2022-04-24 10:09:45

質問

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を使用している場合、後者を簡単に行うことができます。