日期:2014-05-16  浏览次数:20907 次

使用Jquery与后台Seasar框架进行ajax交互
公司采用的Teeda + Seasar的前后端Web开发框架。在对于Ajax这一块的支持上,一直感觉Teeda提供的Kumu框架比较难使,去网上查了一下关于如何直接使用jquery和Seasar进行ajax交互,也读了关于这一块的源码,记点心得。

先举个简单的例子。利用Dolteng插件(eclipse下该插件下载地址http://eclipse.seasar.org/updates/3.3/)建立一个Seasar web项目,并在view下新建sample.html:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:te="http://www.seasar.org/teeda/extension"
	xmlns:h="http://java.sun.com/jsf/html" xml:lang="ja" lang="ja">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
<script>
$(function(){

	$("#checkNickname").click( function() {
		var fields = new Object();
		fields["component"] = "helloLogic";
		fields["action"] = "ajaxNicknameCheck";
		fields["AjaxParam1"] = "local";
		fields["nickName"] = $("#nickName").val();

		$.ajax({
			type : "POST",
			url : "./my.ajax",
			data : fields,
			success : function(msg){
				alert(msg);
			}
	        });
	});

});
</script>
</head>

<body>

	<form id="form">
                <input type="text" id="nickName" />
		<input type="button" id="checkNickname" value="check" />
	</form>
</body>
</html>

这里我们写了一个ajax的例子,在点击check按钮时会去跟客户端交互检验nickName(当然现在我们后台代码还没有写)。但是按照例子所示,是可以直接用jquery提供的ajax函数(如果不了解jquery的$.ajax请自行查阅资料)和seasar后台交互。接下来我们结合源码来看看该如何在后台进行交互。

首先查看一下web.xml,有如下:

...
 <servlet>
        <servlet-name>ajaxServlet</servlet-name>
        <servlet-class>org.seasar.teeda.ajax.AjaxServlet</servlet-class>
        <load-on-startup>3</load-on-startup>
    </servlet>
...
 <servlet-mapping>
        <servlet-name>ajaxServlet</servlet-name>
        <url-pattern>*.ajax</url-pattern>
    </servlet-mapping>
...

Seasar为处理ajax专门实现了一个Servlet,负责接受任何指向*.ajax页面的请求。这也解释了sample.html中$.ajax的url为./my.ajax,实际上你可以定义任意的以ajax结尾的地址。

接下来看看AjaxServlet的代码:

...
public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doAjax(request, response);
    }

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doAjax(request, response);
    }
...

核心代码在doAjax中,仔细分析该函数,首先是

 String componentName = request
                .getParameter(AjaxConstants.REQ_PARAM_COMPONENT);
        String method = request.getParameter(AjaxConstants.REQ_PARAM_ACTION);
        if (method == null) {
            method = AjaxConstants.DEFAULT_AJAX_METHOD;
        }
...

其中AjaxConstants.REQ_PARAM_COMPONENT="component", AjaxConstants.REQ_PARAM_ACTION="action",这也解释了在sample.html中为何要在传入的参数中加入"component"和 "action"两个key。第一个是component名,第二个是要调用的该component的函数名。 接下来有:

...
  if (!method.startsWith(AJAX_PREFIX)) {
            MetaDef meta = def.getMetaDef(AjaxConstants.TEEDA_AJAX_META);
            if (meta == null) {
                throw new ServletException("Ajax Component Name["
                        + componentName + "] is not public.");
            }
        }
...

其中AJAX_PREFIX="ajax", 这意味着要调用的函数还必须是命名为以ajax开头。如sample.html中调用的ajaxNicknameCheck。 接下来:

...
 ComponentDef def = getComponentDefNoException(componentName);
...
 Object obj = def.getComponent();
...

这个使用过seasar的童鞋再熟悉不过了,就是获取相应的component实例,不太了解的可以查阅http://dhongwu.iteye.com/blog/1949725。接下来:

...
 Object[] args = this.setRequestParameter(request, obj);
...

这个函数也比较重要,进入看看: