プッシュテクノロジーを使用してページコンテンツを動的に更新します

1. 動的コンテンツとは何ですか?
人気のある Web サイトのほとんどはオンライン広告から収益を上げています。 Web ページ上の広告スペースは限られており、広告投資に価値をもたらすためには、広告主は小さな広告スペースに大量の情報を詰め込むだけでなく、ユーザーの注意を引く広告を確保する必要があります。現在のほとんどの Web サイトでは、Web ページに配置されるバナー広告は通常、ページの構築中にサーバーによって生成され、送信されたページに新しい広告を動的に挿入することはできません。 新しい広告を表示したい場合は、ページを更新するしか方法はありません。たとえば、

ブラウザ ウィンドウ オブジェクトの setTimeOut 関数を使用して、ページを定期的に更新するなど、プログラムでページを更新できます。ただし、この方法で広告を更新すると、ユーザーはページの更新プロセスを明確に感じますが、同時に適切な更新頻度を決定することも困難になります。
ページの有効期限を数秒に設定すると、入力フォーカスがページに移動する (つまり、ブラウザがアクティブになる) たびにブラウザがページを再ダウンロードします。
yahoo.com や msn.com などの一部の大規模 Web サイトは、すでにこれらのテクノロジーを採用しています。どちらの方法にも独自の長所と短所があります。 Java のみを使用する場合、ネットワーク プログラミングと一部のインターフェイス プログラミング作業を通じてバナー広告更新システムを完全に実装できますが、長いダウンロード時間と更新遅延の問題を解決する必要があります。

2. Java を使用してコンテンツ プッシュを実装する
JavaScript のフレーム間通信とネットワーク通信を管理する Java アプレットを組み合わせることで、プッシュ テクノロジを使用してこの問題を解決できます。このようなシステムでは、Java アプレットのタスクはサーバーに接続してコンテンツの更新をリッスンすることです。新しいコンテンツを受信すると、アプレットは新しいコンテンツを表示する HTML コードを構築し、JavaScript 関数を呼び出して、新しいコンテンツを含む HTML を JavaScript 関数に渡します。 JavaScript 関数は、DHTML および DOM テクノロジーを使用して、ページ内の <div> タグのコンテンツを、パラメーターに渡された新しいコンテンツに置き換えます。ブラウザのセキュリティ制限により、アプレットによって開かれたソケット ポートは、アプレットをダウンロードしたサーバーにのみ接続できます。

Web サーバーはポート 80 でのみ接続リクエストをリッスンします。したがって、Web サーバーに加えて、アプレットの Socket 接続要求を受け付けるネットワーク アプリケーション サービスも必要です。このネットワーク アプリケーション サービスは、定期的にデータベースにクエリを実行し、変更されたデータを接続されているすべてのアプレットに公開 (プッシュ) します。隠しフレームと JavaScript のフレーム間通信機能の使用により、JavaScript ロジックの大部分をユーザーから隠すことができます。

このプロセス全体の中で最も困難なタスクは、Java アプレットと JavaScript コード間の通信です。 Netscape は、netscape.javascript.JSObject というクラスを提供します。このオブジェクトを使用するには、特別な「MAYSCRIPT」属性を含むアプレット タグを追加します。

<APPLET code="MyApplet.class" height=1 width=1 MAYSCRIPT>

JSObject のメソッドを使用すると、アプレットがドキュメント オブジェクトと対話し、JavaScript コマンドを呼び出すことができます。たとえば、次のコードをアプレットに挿入すると、ウィンドウ オブジェクトにアクセスできます

。 ( this); } }

JSObject 参照を取得したら、ドキュメント ウィンドウ オブジェクトにアクセスし、JSObject の eval() メソッドを通じて JavaScript 関数を呼び出すことができます。

3. DHTML を使用してページを更新する
アプレットからドキュメントに新しいコンテンツを書き込む場合、既存のコンテンツに影響を与えないようにするために、HTML <div></div> タグを使用できます。このタグは IE と Netscape では異なります。

IE および Netscape 6 の場合、この HTML タグは次のとおりです。

// 更新されるすべてのコンテンツは ID <div id="iexplorer" width=700px ></div> で識別される必要があります。

Netscape 4.x バージョンの場合、この HTML タグは次のとおりです:

<DATA><layer id="netscapev" ></layer></DATA>

適切な ID を参照することで、アプレットから HTML コンテンツを直接更新できますが、わかりやすくするために説明します。わかりやすくするために、HTML コードを更新するプログラム ロジックを JavaScript 関数に組み込みます。

を

ie 変数に保存します。

applnname=navigator.appName; if(applnname=="Microsoft Internet Explorer") { ie=true; } else { ie=false;

データ コードを作成し、それを JavaScript 変数コンテンツに保存してから、assignData() メソッドを呼び出します。コンテンツ データは、プレーン HTML から XML、バイナリ データまで、あらゆるものにすることができます。

// ブラウザの種類に応じて、適切なメソッド function assignData() { if(ie) {explore();} else {navig() } } を呼び出します。

ブラウザが IE または Netscape 6 の場合、アプレットは、explorer() メソッドを呼び出します。

//content は、HTML 形式で表示する必要がある新しいデータを記述する JavaScript 変数です。 functionexplorer() { iexplorer.innerHTML=content ; }

if ブラウザが Netscape 4.0 以降で、アプレットが navig() メソッドを呼び出す場合:

function navig() { document.netscapev.document.write(“<DATA>” + content + “</DATA>”); document.netscapev.document.close(); }

4. 通信プロセス
サーバー側では、ImageAppliation.java クラスのインスタンスがソケット接続リクエストに応答し、新しい接続リクエストごとに新しいスレッドを作成します。コードを簡略化するために、各スレッドはデータ ファイルが変更されたかどうかのみをチェックします。データ ファイルが変更されている場合、スレッドはファイルの内容を読み取り、接続されているアプレットに新しいデータを送信します (サンプル アプリケーションはファイル全体をアプレットに送信します)。

クライアント側では、非表示フレームにアプレット ImageApplet.java が含まれているため、ブラウザの HTML ソース コード表示機能を使用してアプレット タグを表示することはできません。アプレットは、サーバ（アプレットをダウンロードする元のサーバ）に接続する機能と、簡単な通信プロトコルを実装します。サーバーとの接続を確立した後、アプレットはサーバーからデータを受信し、HTML コードを構築し、JavaScript 関数を呼び出してデータをドキュメントに渡します。

public void upDateHTML(String str){ //data は次の名前です。 //quote は JavaScript 変数です。 //str は新しく構築された HTML コードです mainwin.eval("document.data.quote.value="" + str + """); ()"); return; }

netscape.javascript.JSObject は、アプレットから JavaScript への通信を完了します。クライアント ブラウザのバージョンが異なれば、必要なバージョンも異なります。 Netscape 用に提供されている圧縮クラス ファイル java40.jar をダウンロードできます。 IE にはすでに JSObject クラスが付属していますが、見つけるのは少し難しいです。 $windows$JavaPackages ディレクトリを検索して、JSObject クラスを含む ZIP ファイルを見つけることができます。

サーバーは、toString() メソッドを通じて ImageArrayElement.java クラスのインスタンスを文字列にシリアル化し、それをアプレットに送信します。サーバーはデータ ファイルから各オブジェクトを構築し、toString() メソッドを呼び出し、すべてのオブジェクトを表す文字列を連結し、最後に結果の文字列を送信します。もう一方の端では、アプレットがこの文字列を受信して​​解析し、各 ImageArrayElement オブジェクトを再構築します。ここでデータを長い文字列の形式で送信する理由は、この方法では非常に単純な処理プロセスのみが必要であり、ユーザーはリアルタイムに近い速度でデータの変更をすぐに知ることができるためですが、別の方法を使用することもできます。メソッド メソッド。オブジェクトをベクトルとして送信します。

ライブ アプリケーションでは、通常、現在のページへの新しいデータの挿入を透過的にする必要があります。ただし、サンプル アプリケーションでは、プログラムの実行プロセスをより直観的にするために、新しいコンテンツが到着したときにユーザーにプロンプ​​トを表示します。

プッシュ テクノロジの主な利点は、アプリケーション サーバーが変更されたデータのみをネットワークに送信するため、遅延が最小限に抑えられることです。このアプレットはほとんど作業を担当しないため (ユーザー インターフェイスは関与せず、作業のこの部分はブラウザによって処理されます)、アプレットのサイズは小さく、ロードは非常に高速です。

5. この記事の例の実行方法
この記事のサンプル アプリケーションをテストするには、Web サーバーと JDK 1.7 以降がマシンにインストールされている必要があります。

インストールのポイント:

ZIP 圧縮ファイルを解凍し、Web サーバーのデフォルトのルート ディレクトリにインストールします。
IIS サーバーの場合、デフォルトのルート ディレクトリは Inetputwwwroot です。
jsdk2.1 に含まれる無料サーバーの場合、デフォルトのディレクトリは <インストール ディレクトリ>webpages です。
アーカイブを解凍すると、すべてのファイルが <Web サーバーのルート>/exp/ ディレクトリにインストールされます。
次のコード行をデフォルトのページに追加します。各サーバーには独自のデフォルト ページがあります。IIS のデフォルト ページは「default.htm」です。具体的な手順については、Web サーバーのドキュメントを参照してください。

<ul><li> <a href="/exp/ImageMain.htm"> Java ベースの動的広告バナー</a></li> </ul>

アプリケーションを実行する手順:

DOS ウィンドウを開き、<Default Web Directory>/exp と入力し、「java ImageApplication」を実行します。システムには「サーバーはポート 6011 での待機を開始しました」と表示されます。 classpath 環境変数が現在の作業ディレクトリを指していることを確認してください。
Webサーバーを起動します。
ブラウザを開いて次の URL を入力します: http://localhost:8080 。この URL は Web サーバーのデフォルト ページを開きます。このページには「Java ベースの動的広告バナー」リンクが含まれている必要があります。このリンクをクリックして、この記事のサンプル アプリケーションを起動します。
メモ帳で「/exp/images.txt」ファイルを開き、内容を 1 行コピーして貼り付け、ファイルを保存します。システムがコンテンツの更新を促す JavaScript ウィンドウを表示することがすぐにわかります。 JavaScript ウィンドウを閉じると、ページに新しいコンテンツが表示されます。
この記事の例の完全なコードをここ (411 KB/u/info_img/2009-06/20/pushweb.zip) からダウンロードしてください。