DWR(動的更新テキスト)


サーバ側からテキストを取得してWebページを動的に更新する例を簡単に説明します
sayHello.html

<html>
	<head>
		<title></title>
			<script type='text/javascript' src='/DWR/dwr/interface/Person.js'></script>
			<script type='text/javascript' src='/DWR/dwr/engine.js'></script>
			<script type='text/javascript' src='/DWR/dwr/util.js'></script>
		<script type="text/javascript">
			
			/**
			 * auther:cong_px
			 * versin:1.0
			 */
			function update() {
				var name = dwr.util.getValue('name');
				Person.sayHello(name, function(data) {
					dwr.util.setValue('replay', data);	
				});				
			}
		</script>
	</head>
	<body>
		<p>
			<input type="text" id="name"/>
			<input type="button" onclick="update()" value="Send"/>
			<br/>
			Replay : <span id="replay"></span>
		</p>
	</body>
</html>

「Send」ボタンをクリックすると、ブラウザがonclickイベントをトリガーし、update()関数が呼び出されます.


function update() {
  var name = dwr.util.getValue("demoName");
  Person.sayHello(name, loadinfo);
}

dwr.util.getValueは、任意の要素の値を取得するために使用されます.
サーバ側ではDWRがPersonを呼び出す.sayHello()メソッド.
public String sayHello(String name) {
    return "Hello, " + name;
}

メソッド呼び出しが返されると、DWRはspanラベルの値を設定するためにloadinfo()関数を呼び出します.
function loadinfo(data) {
  dwr.util.setValue("demoReply", data);
}

dwr.util.getValueは、任意の要素の値を設定するために使用されます.
上記の2つのjsを統合することもできます.次のようになります.
			function update() {
				var name = dwr.util.getValue('name');
				Person.sayHello(name, function(data) {
					dwr.util.setValue('replay', data);	
				});				
			}