2008年09月06日

SAStruts+Ajax(jquery.js)でXMLデータを取得しましょう

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

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


目次


●序
●造
 アクションクラス
  sa-struts-tutorial\src\main\java\tutorial\action\AjaxAction.java (変更)
JSP
  sa-struts-tutorial\webapp\WEB-INF\view\ajax\index.jsp (変更)
●結




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>





http://localhost:8080/sa-struts-tutorial/ajax/にアクセスしましょう。以下の画面が表示されますので、「Hello」ボタンをクリックしましょう。
ポップアップで、従業員名が表示されます。

posted by 台北猫々 at 19:54| Comment(0) | TrackBack(0) | 技術メモ(SAStruts)