2008年09月06日

SAStruts＋Ajax（jquery.js）でXMLデータを取得しましょう

「コードなにがし」にもアップしていますが、SAStruts＋Ajax（jquery.js）でXMLデータ取得してみましょう。

SAStrutsのチュートリアルプロジェクト（Eclipse）を元にして改造しています。

序

SAStruts＋Ajax＋jQueryを試してみましょう。

ここでは、jQueryのAjax機能を使用してアクションクラスを呼び出し、レスポンスとして返されるXMLデータをパースして表示しましょう。

ここでは、例を単純にするためにアクションフォームを使用しません。

改

アクションクラス

"sa-struts-tutorial\src\main\java\tutorial\action\AjaxAction.java"を以下のように変更します。


import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.seasar.struts.annotation.Execute;
import org.seasar.struts.util.ResponseUtil;
 
public class AjaxAction {
    
    @Execute(validator = false)
    public String index() {
        return "index.jsp";
    }
    
    @Execute(validator = false)
    public String load_xml() throws IOException {
        //XMLデータを返却します。
        HttpServletResponse httpServletResponse = ResponseUtil.getResponse();
        httpServletResponse.setContentType("application/xml");
        PrintWriter sendPoint = new PrintWriter(httpServletResponse.getOutputStream());
        sendPoint.println("<?xml version='1.0' encoding='UTF-8' ?>");
        sendPoint.println("<employees>");
        sendPoint.println("  <employee>");
        sendPoint.println("    <id>1</id>");
        sendPoint.println("    <name>ALLEN</name>");
        sendPoint.println("  </employee>");
        sendPoint.println("  <employee>");
        sendPoint.println("    <id>2</id>");
        sendPoint.println("    <name>WARD</name>");
        sendPoint.println("  </employee>");
        sendPoint.println("</employees>");
        sendPoint.flush();
        sendPoint.close();
        return null;
    }
}

JSP

"sa-struts-tutorial\webapp\WEB-INF\view\ajax\index.jsp"を以下の内容に変更します。


<%@page pageEncoding="UTF-8"%>
<html>
<head>

<title>Tutorial: Ajax</title>
<link rel="stylesheet" type="text/css" href="${f:url('/css/sa.css')}" />
<script src="${f:url('/js/jquery.js')}"></script>

</head>
<body>
<h1>Tutorial: Ajax</h1>
 
<script type="text/javascript">
function loadXML() {
  $.ajax({  
    url: '${f:url('/ajax/load_xml')}',  
    type: 'GET', 
    dataType: 'xml',    //レスポンスのデータ形式
    timeout: 1000,  
    cache: false,       //ブラウザにキャッシュさせません。
    error: function(){  //例外時のコールバック関数
        alert("xmlファイルの読み込みに失敗しました");  
    },  
    success: function(xml){  
        $(xml).find("employee").find("name").each(function(){  
            var item_text = $(this).text();  
            alert(item_text)
        });  
    }  
  });  
}

</script>
<input type="button" value="hello" onclick="loadXML()"/>
</body>
</html>