AJAX 使用上のヒント: ブックマークとページめくりボタンの扱い方

この記事では、Ajax アプリケーションにブックマークや戻るボタンを追加する機能を提供するオープンソースの JavaScript ライブラリを提供します。このチュートリアルに従った後、開発者は、AJAX アプリケーションの開発の問題に対する解決策を得ることができます。この機能は、現在 Google マップや Gmail でさえ提供していない機能です。つまり、強力で使いやすいブックマークと転送を提供します

この記事では、Ajax アプリケーションにブックマークや戻るボタンを追加する機能を提供するオープンソースの JavaScript ライブラリを提供します。このチュートリアルを完了すると、開発者は、AJAX アプリケーションの開発中に遭遇する問題の解決策を得ることができます。この機能は、現在 Google マップや Gmail でも提供されていません。強力で使いやすいブックマークと、進むボタンと戻るボタンを提供します。同じ動作です。他のWEBアプリケーションと同様に。

AJAX「ブックマークと戻るボタンの対処方法」では、AJAX アプリケーションでブックマークと戻るボタン機能を開発する際に遭遇する深刻な問題について説明し、上記の問題を解決できるオープンソース フレームワークを提供します。また、実際のシンプルな履歴ライブラリも提供します。いくつかの実際の例が提供されています。

この記事では、このフレームワークによって得られる重要な発見について 2 つの部分に分けて説明します。まず、クライアント側で大量の一時的な情報をキャッシュするために、非表示の HTML フォームが使用されます。これらのキャッシュは、Web ページのナビゲーションを強力にサポートします。次に、非表示の IFrame とハイパーリンクを使用してブラウザの履歴イベントを傍受して記録し、戻るボタンと進むボタンのサポートを提供します。上記のテクノロジーは両方とも、シンプルな Javascript ライブラリにパッケージ化されており、簡単な開発を実現します。

問題: ブックマークと戻るボタンは、従来の複数ページの Web アプリケーションで完全に機能します。ユーザーが Web サイトを閲覧すると、ブラウザのアドレス バーのレコードが新しい URL で更新され、これらのレコードは後で使用するために電子メールやブックマークにコピーできます。 「戻る」ボタンと「進む」ボタンは、ユーザーが閲覧した Web ページを前後に切り替えるのに役立ちます。

AJAX アプリケーションは異なり、Web ページ内で実行される複雑なプログラムです。ブラウザはこのタイプのプログラム用に作られていません。このタイプのプログラムは過去のもので、マウスをクリックするたびにページ全体を更新する必要がありました。

Gmail などの AJAX ソフトウェアでは、ユーザーが機能を選択したりプログラムの状態を変更したりしても、ブラウザのアドレス バーは変化しないため、そのようなプログラムではブックマークが使用できなくなります。将来的には、「戻る」ボタンを押して最後の操作を元に戻すと、ブラウザとアプリケーションが分離され、ユーザーは驚くことになるでしょう。

解決策: オープンソースの Really Simply History (RSH) フレームワークを使用すると、ブックマークを提供し、AJAX アプリケーションの「戻る」ボタンと「進む」ボタンを制御して、上記の問題を解決できます。 RSH はまだベータ版であり、Firefox 1.0、Netscape 7 以降、Internet Explorer 6 以降、およびその他のブラウザで動作します。現在、Safari ブラウザはサポートされていません。 「コーディング パラダイス: Safari: 不可能な DHTML の歴史」を参照してください。

現在ブックマークと履歴アクセスの問題をサポートしている AJAX フレームワークにはいくつかの種類がありますが、これらのフレームワークには現在、実装方法の違いによりいくつかの大きなバグがあります。将来的には、Backbase や Dojo などの多くの AJAX フレームワークに履歴参照機能が統合される予定です。これらのフレームワークは、AJAX アプリケーションにまったく異なるプログラミング モデルを採用するため、プログラマは履歴参照機能を実装するためにまったく異なる方法を使用する必要があります。

対照的に、RSH は既存の AJAX システムに含めることができる単一のモジュールです。将来的には、他のフレームワークの関連機能との競合を避けるために、RSH ライブラリがさらに改良される予定です。

RSH 履歴フレームワークは、DhtmlHistory と HistoryStorage という 2 つの JavaScript クラスで構成されます。

DhtmlHistory クラスは、AJAX アプリケーションの閲覧履歴の抽象化を提供します。 AJAX ページ add() 履歴閲覧記録イベントをブラウザーに記録し、指定された新しいアドレスと関連する履歴データを保存します。 DhtmlHistory クラスは、ハッシュ接続を使用してブラウザの現在の URL (#new-location など) を更新し、履歴データを新しい URL に関連付けます。 AJAX アプリケーションは、自身を履歴閲覧のリスナーとして登録します。ユーザーが「進む」ボタンと「戻る」ボタンを使用して閲覧すると、履歴閲覧時間がトリガーされ、ブラウザーに新しい情報を提供するために add() メソッドが呼び出されます。アドレスを指定して履歴データを保存します。

2 番目のクラス: HistoryStorage を使用すると、プログラマは任意の履歴閲覧データを保存できます。通常の Web ページでは、ユーザーが新しい URL を参照すると、ブラウザーはすべてのプログラムをアンインストールし、現在の Web ページの JavaScript ステータスをクリアします。ユーザーが戻ると、すべてのデータが失われます。 HsitoryStorage クラスは、put()、get()、hasKey() およびその他のメソッドを通じてこの種の問題を解決するためのハッシュ テーブルを備えた API を提供します。上記のメソッドを使用すると、ユーザーが Web ページから離れたときに、「戻る」ボタンを押して戻るときに、プログラマがデータを保存でき、HistoryStorage クラスを通じて履歴データにアクセスできます。ユーザーがページから離れた場合でも、ブラウザはフォーム フィールドの値を自動的に保存するため、最初は非表示のフォーム フィールドを使用してこれを実行しました。

例: 簡単な例から始めましょう:

まず第一に、RSH フレームワークを必要とする Web ページには dhtmlHistory.js 教科書を含める必要があります:

src="../../framework/dhtmlHistory.js">

DHTML 履歴アプリケーションには、同じディレクトリに空の .html ファイルが含まれている必要があります。このファイルは RSH フレームワークによって自動的にバインドされ、IE ブラウザで使用する必要があります。前述したように、RSH は非表示の Iframe を使用して IE の変更を保存および追加します。この Iframe が正しく動作するには、実際のファイルの場所 (blank.html) を指定する必要があります。

RSH フレームワークは、ブラウザーの履歴閲覧記録を制御するためのエントリ ポイントである dhtmlHistory と呼ばれるグローバル オブジェクトを作成します。最初のステップは、Web ページが読み込まれた後に dhtmlHistory オブジェクトを初期化することです。

window.onload = 初期化;
functionInitialize() {
// DHTML History を初期化します
// フレームワーク
dhtmlHistory.initialize();

次に、プログラマは dhtmlHistory.addListener() メソッドを使用して、履歴閲覧イベントの変更をサブスクライブします。このメソッドは、履歴閲覧イベントが発生したときに 2 つのパラメーターを受け取る JavaScript コールバック関数を使用します。 Web ページの新しいアドレスと履歴データは、このイベントに関連付ける必要があります:

window.onload =Initialize;
functionInitialize() {
// DHTML 履歴を初期化する
// フレームワーク
dhtmlHistory.initialize();
// DHTML 履歴変更をサブスクライブする
// イベント
dhtmlHistory.initialize();

historyChange() メソッドは非常に直感的です。ユーザーが新しい Web ページを参照すると、メソッドを使用して newLocation を受け取ります。同時に、他のhistoryData をこのイベントに添付できます。

/**履歴変更

イベントを受信するためのコールバック。*/
functionhistoryChange(newLocation,
historyData) {
debug("履歴の変更が発生しました: "
+ "newLocation="+newLocation
+ ",historyData="+historyData,
true );
}
上記で使用した

Debug() は、単に Web ページにメッセージを出力するために使用されるツール メソッドです。 2 番目のパラメータはブール型で、true に設定すると、新しいメッセージが出力されるときに元の情報がクリアされます。

Add() メソッド。 「edit:SomePage」などの新しいアドレスを含む履歴イベントを追加し、イベントとともに保存されるオプションのhistoryDate値も提供します。

window.onload =Initialize;

functionInitialize() {
// DHTML 履歴を初期化する
// フレームワーク
dhtmlHistory.initialize();
// DHTML 履歴変更をサブスクライブする
// イベント
dhtmlHistory.initialize();
// これが初めての場合
// ページをロードする...
if (dhtmlHistory.isFirstLoad()) {
debug("ブラウザに値を追加しています "
+ "history", false);
/ / 履歴の追加を開始します
dhtmlHistory.add("helloworld",
"Hello World Data");
dhtmlHistory.add("boobah", true); = 新しい Object();
complexObject.value1 =
「これは最初の値です」;
complexObject.value3 = 新しい Array(); Array( );
complexObject.value3[1] = ¡°配列 2¡±;
dhtmlHistory.add("complexObject",
complexObject);

add()実行と同時に、ブラウザのURLアドレスバーにリンクアドレスとして新しいアドレスが表示されます。たとえば、AJAX Web ページの現在のアドレスは http://codinginparadise.org/my_ajax_app です。 dhtmlHistory.add("helloworld", "Hello World Data") を実行すると、ブラウザの URL にそのアドレスが表示されます。アドレスバー: http://codinginparadise.org/my_ajax_app#helloworld

これは、ユーザーがこのページをブックマークできる場所です。ユーザーが後でこのブックマークを使用する場合、AJAX アプリケーションは #helloworld 値を読み取り、それを使用して Web ページを初期化できます。 RSH フレームワークは、URL アドレス値を透過的にエンコードおよびデコードします。

historyData は、より複雑な状態を保存する場合に非常に便利です。これはオプションの値で、数値、文字列、オブジェクトなどの任意の JavaScript タイプを指定できます。この機能の使用例は、ユーザーが現在の Web ページから離れた場合の Web ページのキャラクター エディターです。ユーザーが再度ログオンすると、ブラウザはオブジェクトを履歴閲覧変更リスナーに返します。

開発者は、ネストされたオブジェクトと配列を含む複雑な JavaScript オブジェクトを使用して、historyData を提供できます。ただし、ブラウザがサポートする DOM オブジェクトおよびスクリプト オブジェクト xmlHttPRequest は保存されません。注:historyData はブックマークと一緒に保持されるわけではなく、ブラウザが閉じられ、ブラウザのキャッシュがクリアされ、ユーザーが履歴をクリアすると消えます。

転載元: http://www.aspnetjia.com