- 追加された行はこの色です。
- 削除された行はこの色です。
// 下階層用テンプレート
#topicpath
----
//ここにコンテンツを記述します。
Prototypeを用いて、非同期にサーバをポーリングするhtmlを書いてみました。J2EEでサーバのセッションをつないでおくためのリクエストを発行するにも使えそうです。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index2</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
<!--
new Ajax.PeriodicalUpdater(
"date", "/ajax/check.do",
{
frequency : 10, //10sごとにリクエストを送る
decay : 2 //前回同じ結果だったら、10x2s後にリクエストする。次は更に x decay
}
);
-->
</script>
</head>
<body>
<p>ここの下に時刻を表示します。</p>
<div id="date"></div>
<p>ここの上に時刻を表示します。</p>
</body>
</html>
Ajax.PeriodicalUpdater というクラスは指定した秒ごとにポーリングをするクラスです。引数の意味は、dateという変数は下のid=dateに対応しています。戻ってきたデータを引数のidに出力します。/ajax/check.do はリクエストを送るURLです。残りの引数でリクエスト間隔や、戻り値が変わってなかったときに間隔をどれくらい延ばすかなどを指定します。
/ajax/check.do は何でもよいんですが、ここでは時刻だけを返す処理を書いておきました。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="java.util.Date" %>
<%=new Date() %>
こんな感じ。
実行してみると、10秒ごとにリクエストがサーバに発行され、画面のリロードなしに表示されている時刻が変化します。
AJAXって、おもろいですね。
----
この記事は
#vote(おもしろかった[5],そうでもない[2])
#vote(おもしろかった[6],そうでもない[2])
#comment
#topicpath
SIZE(10){現在のアクセス:&counter;}