Dynamically Updating Text

Dynamically Updating Text

단순한 예제로 어떻게 웹 페이지에 지정된 텍스트에 웹서버에서 가져온 텍스트를 동적으로 붙여주는 예제이다.

화면 :

Name: <INPUT id="demoName" value="Joe"> <INPUT onclick="update()" type="button" value="Send"> Reply: Hello, Joe

 

"Send"버튼을 클릭하는 경우 브라우저에서는 onclick 이벤트를 호출한다. 그리고 update() 함수를 호출하게 된다.

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

dwr.util.getValue()는 어떠한 엘리먼트의 값을 획득하는 유틸이다. 이 예제의 입력 필드는 div 혹은 select box가 올 수 있다.

DWR는 비동지적인 방법으로 자바스크립트 작업을 한다. 이것은 웹 브라우저의 동작을 정지시키지 않고 요청에 대한 결과를 백그라운드에서 기다리게 된다. So the parameter loadinfo names a function to be called when the call has returned.

서버에서는 DWR이 Demo.sayHello()라는 자바 메소드가 호출된다.

public String sayHello(String name) {
    return "Hello, " + name;
}

메소드가 반환할때 DWR은 loadinfo()함수를 호출하고 응답으로 텍스트를 이동시킨다.

function loadinfo(data) {
  dwr.util.setValue("demoReply", data);
}

dwr.util.setValue() 는 두번째 파라미터로 온 데이터를 획득하는 유틸리티이며 첫번째 파라미터에 지정된 id에 해당하는 HTML엘리먼트에 대해 동작 하도록 한다. 이 함수는 몇몇 잘 정돈된 자바 스크립트로 DWR을 더욱 쉽게 해 주는 기능을 한다.

우리는 2개의 자바 스크립트 함수를 이처럼 간단하게 작성 할 수 있다.

function update() {
  var name = dwr.util.getValue("demoName");
  Demo.sayHello(name, function(data) {
    dwr.util.setValue("demoReply", data);
  });
}

이것과 같이 우리는 10라인보다 작은 코드로 서버에서 값을 받아 브라우저에 표현 할 수 있다.