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」ボタンをクリックしましょう。
ポップアップで、従業員名が表示されます。