AJAX ナビゲーションの概要
.gif "Windows Internet Explorer 8 の新機能")
Internet Explorer 8 には、非同期 JavaScript および XML (AJAX) ナビゲーションが導入されています。 これらの機能は、[戻る] ボタンと [進む] ボタンではナビゲートできない、また、閲覧履歴を更新しない AJAX 対応 Web サイトにエンド ユーザーが感じるフラストレーションの軽減に役立つように設計されています。 ほんの数行の簡単なスクリプトで AJAX ナビゲーションを Web サイトに追加し、AJAX 対応コンテンツを "従来の" ナビゲーションと同じくらい滑らかかつシームレスにできます。
このトピックは、次の各セクションで構成されています。
- 概要
- 問題の例
- 動作のしくみ
- コード例
- 関連トピック
概要
AJAX を実装する利点の 1 つ (実際にはその存在理由の 1 つ) は、ユーザーが Web ページのコンテンツを新しい Web ページにナビゲートせずに更新できることです。 ただし、この便利さの反面、ユーザーを混乱させる欠点にもなることがあります。 たとえば、AJAX 対応の重い Web ページは、更新するたびにアドレス バーが更新されることはありません。 したがって、"travelog" (閲覧の履歴) も更新されません。
AJAX ナビゲーションは、ユーザーが AJAX アプリケーションを終了することなく前後にナビゲートできるようにして、この動作を変更します。 AJAX ナビゲーションが有効になった Web サイトは、window.location. hash 値を設定し、Web ページのコンポーネントに警告のイベントを発生させ、travelog にエントリを作成することで、アドレス バーなどのブラウザー コンポーネントの更新をトリガーします。
問題の例
例として、Windows Live Search Maps などの Web サイトのマッピングを考えてみます。 そのアプリケーションの AJAX 対応機能 (パンやズームなど) では、アドレス バーも travelog も更新されません。 新しい Web ページを表示するたびにアドレス バーが変更されることに慣れているユーザー、またはブラウザーの [戻る] ボタンや [進む] ボタンに依存しているユーザーは、このプロセスを不快に感じることがあります。 一部の Web サイトは、AJAX を介してコンテンツを更新するとき、非表示の iframe をナビゲートすることでこの制限に対処していますが、この方法ではパフォーマンスが低下することがあります。
動作のしくみ
AJAX ナビゲーションを有効にするために、IE8 モード (既定の互換モード。詳細については「ドキュメント互換性の定義」 (英語の可能性あり) を参照) の Internet Explorer 8 は、個々の "従来の" ナビゲーションのように、window.location.hash プロパティへの更新を処理します。 hash プロパティが更新されると、以前のハッシュ フラグメントからの、以前のドキュメントの URL がアドレス バー、travelog、さらに [戻る] ボタンで更新されます。 同時に、新しい onhashchange イベントが発生し、ユーザーがその Web ページから移動する前に、ハッシュ URL フラグメントが保存されます。
AJAX コンテンツが変更されたとき、この新機能を利用する AJAX 対応 Web ページでは、通常どおりナビゲーションがシームレスですが、ユーザーは AJAX ナビゲーションでも "従来の" ナビゲーションと同じように前後に移動できます。
コード例
次の例は、この機能の使用例の 1 つを示しています。 この場合、hash プロパティは Microsoft Virtual Earth マップ コントロールの onendzoom イベントと共に設定されています。 言い換えれば、ユーザーがズーム インまたはズーム アウトするたびに、アドレス バーと travelog の両方が更新され、ユーザーは [戻る] ボタンと [進む] ボタンを使用してズーム レベル間を前後に移動できます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>AJAX Map</title>
</head>
<!-- Load the Virtual Earth map control. -->
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" type="text/javascript"></script>
<script type="text/javascript">
var oMap = null;
var iZoomLevel = 0;
function GetMap()
{
oMap = new VEMap('myMap');
oMap.LoadMap();
oMap.AttachEvent("onendzoom", ZoomHandler);
iZoomLevel = oMap.GetZoomLevel();
window.location.hash = iZoomLevel;
}
function ZoomHandler(e)
{
iZoomLevel = oMap.GetZoomLevel();
// The following declaration sets the hash property to a
// variable containing the URL fragment to be saved.
window.location.hash = iZoomLevel;
}
function HashChangeHandler()
{
var hash = window.location.hash;
var iNewZoomLevel = hash.substr(1);
if (iNewZoomLevel != iZoomLevel)
{
iZoomLevel = iNewZoomLevel;
oMap.SetZoomLevel(iNewZoomLevel);
}
}
</script>
<!-- Attaching the event handler to a new onhashchange event allows
the page to detect when the hash has changed and an AJAX
navigation has occurred. -->
<body onhashchange="HashChangeHandler();" onload="GetMap();"
style="overflow: scroll; height: 100%">
<div id="myMap" style="position: relative; width: 500px;
height: 500px; vertical-align: middle">
</div>
</body>
</html>
ユーザーがズーム インまたはズーム アウトするたびに、次の図のようにアドレス バーのフラグメント識別子が更新されます。 この Web ページでは、番号記号 (#) の後ろの整数が 1 つずつ増えていくことになります。
.gif "フラグメント識別子を示すアドレス バーのイメージ。")