Top / html / Prototype / ポーリングする

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って、おもろいですね。


この記事は

選択肢 投票
おもしろかった 6  
そうでもない 2  

Top / html / Prototype / ポーリングする

現在のアクセス:7933


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-04-28 (土) 17:10:14 (566d)