はじめに
AJAXは、デスクトップアプリケーションと同じくらい対話性と応答性のよいリッチなWebアプリケーションを開発する手段として、多くの開発者に採用されてきました。AJAXでは、WebのUIを異なるセグメントに分割します。ユーザーはあるセグメントで操作を実行し、その操作が終わらないうちに他のセグメントで作業を開始することができます。
しかし、AJAXには大きな欠点があります。戻る、進む、ブックマークといった標準的なブラウザ機能が無効になるのです。AJAXアプリケーションの開発者は、ユーザーをAJAXの欠点に無理やり順応させるのではなく、アプリケーションを従来のWebインタラクションスタイルに合わせ、次の機能を提供するようにしなければなりません。
- ［戻る］／［進む］ボタンが機能するようにして、エンドユーザーが直観的なやり方で履歴ページ間を移動できるようにする。
- ユーザーがブックマークを作成できるようにする。
- ［更新］ボタンが予想どおりに機能するようにして、現在の状態が更新されるようにする（アプリケーションを再初期化したり、予想外のページや状態に再設定したりしない）。
- エンドユーザーがブラウザの標準の検索機能でページを検索できるようにする。
- 検索エンジンがAJAXアプリケーション内のページをインデックス化して、検索語までのディープリンクを作成できるようにする。
典型的なAJAXアプリケーションは最初の3つの機能を実現していません。XMLHttpRequestオブジェクトやDOM更新などのAJAXテクノロジを使用する動的なWebアプリケーションは、ブラウザの履歴を正しく更新しません。なぜなら、バックグラウンドリクエストを使ってデータを取得すると、ページURLが変更されないからです。そのため、ユーザーが［戻る］ボタンをクリックすると、おそらくWebアプリケーションから彼方にジャンプして、保存された状態が失われることになるでしょう。［更新］ボタンをクリックすると、AJAXアプリケーションが再初期化され、現在のページの初期状態に戻ります（実際、アプリケーションが再起動されることが多いでしょう）。同じ理由で、ブックマークも機能しません。ブックマークを使ってAJAXのURLに戻っても、ユーザーがブックマークを付けた時点のページ状態にならないかもしれません。
ユーザーの立場からすると、標準的なナビゲーション動作はとても重要です。ユーザーはWebアプリケーションで一定のインタラクションが当然起こるものと期待しますが、典型的なAJAXアプリケーションでは必ずしもそうならないのです。たとえば、ユーザーがブラウザのURLを使ってページにブックマークを付けた場合、そのページを作成するためにAJAXアプリケーションが作成した中間ステップ（バックグラウンドリクエスト）についての情報は失われます。また、ユーザーがブラウザの［戻る］ボタンをクリックすると、前のページが表示されますが、これは一般に前のページ状態ではありません。AJAXアプリケーションでは「ページ」と「ページ状態」の違いが重要になります。なぜなら、この2つはユーザーにとっては同じことでも、ブラウザにとってはまったく別物だからです。
例として、AJAXベースの検索アプリケーションを考えてみましょう。最初のページには、ユーザーが検索条件を入力する検索フォームが含まれています。これをPage1とします。ユーザーが入力したフォームを送信すると、最初の数個の検索結果が含まれたページ（Page2）が表示されます。このページには、次の検索結果セットを含むページ（Page3）を見るためのリンクが表示されます（さらに後続のページがある場合は、同様に続きます）。アプリケーションがPage3のための次の検索結果セットを取得するためには、非同期呼び出しを送信し、取得したデータをPage2のDOM構造に入れるという処理を行います。このとき、ページ状態は変化しますが、ページのURLは変化せずPage2のままです。つまり、ユーザーは新しいページ（Page3）を見ているつもりでも、ブラウザ上ではこのアプリケーションの履歴スタックは次のようになっているのです。
Page2 Page1
そのため、ユーザーはPage3で［戻る］ボタンをクリックしたときに、当然、最初の検索結果セット（元のPage2）が表示されるものと期待しますが、ブラウザは実直にPage1に戻ります。同様に、ユーザーがPage3を見ているときにページの更新を行うと、代わりにPage2が表示されます。このような直観に反した動作により、ユーザーが混乱し、アプリケーションが使いにくくなります。
解決策
AJAXアプリケーションで作成される各ドキュメントをそれ自身のURLでアドレスできれば、［戻る］ボタンとブックマークの問題を解決できるでしょう。この検索アプリケーションが最初の結果ページと2番目のページを別々のURLで参照していることに注目してください。つまり、2つのURLがそれぞれ異なるリソースドキュメントを指しているわけです。しかし、実際にAJAXドキュメントを構成している要素は、開始時点のドキュメントと、ドキュメントのノードを追加、削除、変更する不定の数のDOM操作です。したがって、ある時点のAJAXドキュメントを再作成するには、まず開始時点のドキュメントのURLを取得したうえで、目的の時点までに行われたDOM変更を適用する必要があります。各AJAXリクエストが一意のURLを持っていれば、ずっと簡単にできるでしょう。
URLハッシュの入力
URLハッシュとは、シャープ記号（#）の後に続くURL部分です。通常、URLハッシュは他のページではなく、同じページ内の特定の位置を指すので、長いページ内の特定の位置にジャンプするためのリンクで使われます。しかし、必ずしもそういう使い方をする必要はありません。URLハッシュを使って、DOM操作に関する情報をAJAXアプリケーション内に格納する、つまり各AJAXリクエストに一意のURLを与えることもできます。
URLハッシュには、AJAX履歴を作成するうえで非常に有利な点が2つあります。その1つは、現在のURL内のハッシュを変更してもページの再ロードが起こらないことです。そのため、ページを変更せずに一意のURLを作成することができます。もう1つの利点は、ブラウザがもともとURLハッシュをページ履歴の一部として扱っていることです。つまり、URLハッシュに移動すると、ブラウザの履歴リストにエントリが追加されます。現在のURLのハッシュマークの後ろに明確なエントリを追加すれば、AJAXアプリケーションで標準的な前進/後退動作とブックマーク機能を再現するのに役立つ履歴トレールを作成できます。たとえば、次のようなURLハッシュを使って、検索アプリケーションの2つの結果ページを指すことができます。
http://searchserver/search.jsp?searchText=television#page=1 http://searchserver/search.jsp?searchText=television#page=2
これらのURLハッシュ（page=1とpage=2）は、ユーザーが現在見ている検索ページを指しています。
