실제로 ajax 클라이언트 호출은 사용자가 작성해야한다.

스트라이프가 해주는 일은 ajax 호출에 대하여 적절히 데이타를 넘겨줄 수 있을 뿐이다.

 

Ajax 호출 및 스트라이프로 응답하기

우선 완전한 jsp 페이지를 보자.

<%@page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
      <title>My First Ajax Stripe</title>
      <script type="text/javascript"
              src="${pageContext.request.contextPath}/ajax/prototype.js"></script>
      <script type="text/javascript" xml:space="preserve">
          /*
           * Function that uses Prototype to invoke an action of a form. Slurps the values
           * from the form using prototype's 'Form.serialize()' method, and then submits
           * them to the server using prototype's 'Ajax.Updater' which transmits the request
           * and then renders the response text into the named container.
           *
           * NOTE: Requires Prototype version 1.6 or above.
           *
           * @param form reference to the form object being submitted
           * @param event the name of the event to be triggered, or null
           * @param container the name of the HTML container to insert the result into
           */
          function invoke(form, event, container) {
              if (!form.onsubmit) { form.onsubmit = function() { return false } };
              var params = Form.serialize(form, {submit:event});
              new Ajax.Updater(container, form.action, {method:'post', parameters:params});
          }
      </script>
  </head>
  <body>
    <h1>Stripes Ajax Calculator</h1>

    <p>Hi, I'm the Stripes Calculator. I can only do addition. Maybe, some day, a nice programmer
    will come along and teach me how to do other things?</p>

    <stripes:form action="/examples/ajax/Calculator.action">
        <table>
            <tr>
                <td>Number 1:</td>
                <td><stripes:text name="numberOne"/></td>
            </tr>
            <tr>
                <td>Number 2:</td>
                <td><stripes:text name="numberTwo"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <stripes:submit name="add" value="Add"
                        onclick="invoke(this.form, this.name, 'result');"/>
                    <stripes:submit name="divide" value="Divide"
                        onclick="invoke(this.form, this.name, 'result');"/>
                </td>
            </tr>
            <tr>
                <td>Result:</td>
                <td id="result"></td>
            </tr>
        </table>
    </stripes:form>
  </body>
</html>

이 예제는 숫자 2개를 입력받은 후 ajax 호출로 더한결과와 나눈 결과를 받아서 result 안에 출력하는 소스다. 여기선 프로토타입을 사용했지만, jQuery 를 써도 당연히 무방하다.
중요한 부분은 다음 구문이다.

var params = Form.serialize(form, {submit:event});

액션빈 클래스에 받아들일 메서드명을 submit 파라미터로 집어넣고 있다.
다음은 액션빈 클래스를 보자.

 

public class CalculatorActionBean implements ActionBean, ValidationErrorHandler {
    private ActionBeanContext context;
    @Validate(required=true) private double numberOne;
    @Validate(required=true) private double numberTwo;

    public ActionBeanContext getContext() { return context; }
    public void setContext(ActionBeanContext context) { this.context = context; }

    @DefaultHandler public Resolution add() {
        String result = String.valueOf(numberOne + numberTwo);
        return new StreamingResolution("text", new StringReader(result));
    }

    public Resolution divide() {
        String result = String.valueOf(numberOne / numberTwo);
        return new StreamingResolution("text", new StringReader(result));
    }

    // Standard getter and setter methods
    public double getNumberOne() { return numberOne; }
    public void setNumberOne(double numberOne) { this.numberOne = numberOne; }

    public double getNumberTwo() { return numberTwo; }
    public void setNumberTwo(double numberTwo) { this.numberTwo = numberTwo; }
}


add 메서드와 devide 메서드를 구현한걸 확인할 수 있다. ajax 통신이라고 조금 다르게 사용한것은 Resolution 을 StreamingResolution 을 반환한다는것 뿐이다.
StreamingResolution 을 3개의 생성자를 가지며, 첫 인자는 contentType 을 받아들이는것에 주의한다.

다음은 주로 사용하는 Resolution 에 대한 Java doc 이다.

Constructor Summary
StreamingResolution(String contentType)
Constructor only to be used when subclassing the StreamingResolution (usually using an anonymous inner class.
StreamingResolution(String contentType, InputStream inputStream)
Constructor that builds a StreamingResolution that will stream binary data back to the client and identify the data as being of the specified content type.
StreamingResolution(String contentType, Reader reader)
Constructor that builds a StreamingResolution that will stream character data back to the client and identify the data as being of the specified content type.

StreamingResolution 외에 흥미로운 ajax 관련 Resolution 들이 더 있다.

Constructor Summary
JavaScriptResolution(Object rootObject, Object... objectsToExclude)
Constructs a new JavaScriptResolution that will convert the supplied object to JavaScript.

JavaScriptResolution 은 주어진 인자를 javascript 에서 평가(eval)할 수 있는 형태로 문자열을 만들어 출력한다. 즉 json 형태로 출력한다.

물론 ForwardResolution 을 이용하여 jsp 로 렌더링해도 상관 없다.

Constructor Summary
ForwardResolution(Class<? extends ActionBean> beanType)
Constructs a ForwardResolution that will forward to the URL appropriate for the ActionBean supplied.
ForwardResolution(Class<? extends ActionBean> beanType, String event)
Constructs a ForwardResolution that will forward to the URL appropriate for the ActionBean supplied.
ForwardResolution(String path)
Simple constructor that takes in the path to forward the user to.

이 글은 스프링노트에서 작성되었습니다.

+ Recent posts