Beetle框架使用指南之--Web Ajax开发

Ajax是当前流行的Web开发技术，BJAF Web框架在原有框架结构上对Ajax进行了强而有力的封装，是开发Ajax就想开发一个普通的传统标准控制器那么简单。Ajax框架结构如下：

浏览器采取Javascript调用XMLHttpRequest（Mozilla、Microsoft各有实现）后台底层Http请求组件与远程的J2EE Web Servlet容器通信：发出的请求交给GlobalDispatchServlet服务程序去负责统一处理，它适配给AjaxController控制器再通过AjaxConfig配置类读取部署在WebController.xml文件中的Ajax子控制器配置信息。然后，根据浏览器提交请求的子控制器名称来匹配其对应的处理程序，完成请求逻辑并把结果数据返回给浏览器客户端。最后，浏览器再利用Javascript来解析并展现这些结果数据。
ICommonAjax是请求处理程序的入口，所有的Ajax子控制器都必须实现此接口，其定义如下：

package com.beetle.framework.web.controller.ajax;
public interface ICommonAjax {
  /**
   * ajax控制逻辑执行方法，GlobalDispatchServlet会根据请求的名称来找到此接口的实现类，
   * 并执行此方法完成任务
   * @param AjaxRequest 浏览器客户端提交的参数对象，参照传统的Http Request设计。提供一些方法便于获取参数。
   * @return AjaxResponse 返回一个AjaxResponse结果响应的数据对象，其数据格式为json。因为ajax是后台刷新，也就是说返回的视图就是它自己本身。
   * @throws ControllerException
   */
  AjaxResponse perform(AjaxRequest request) throws ControllerException;
}

 

可见，其执行过程很明显：在perform方法体内，首先从输入参数AjaxRequest对象中获取页面提交上来的数据，然后编程处理请求的逻辑，最后生成结果的数据放在AjaxResponse对象中，并返回。
下面例子为用Ajax改写标准控制器的登录实现：

package com.beetle.WebDemo.presentation;
import java.util.*;
import com.beetle.WebDemo.common.*;
import com.beetle.framework.web.controller.ajax.* ;
public class LoginAjaxController implements ICommonAjax {
  public LoginAjaxController() {
  }
  public AjaxResponse perform(AjaxRequest ajaxRequest) throws ControllerException {
AjaxResponse response = new AjaxResponse();
//获取页面输入的参数
String userName = ajaxRequest.getParameter("username"); 
int password = ajaxRequest.getParameterAsInt("password");
    //调用业务对象处理业务逻辑，本示例在这里只是简单地作了一个字符串比较
    if (userName.equals("HenryYu") && password == 888888) {
      User user = new User();
      user.setUserId(new Integer(10001));
      user.setName("余浩东");
      user.setPhone("13501583576");
      user.setSex("男");
      user.setYear(30);
      response.setValue("UserInfo", user);
      response.setValue("LoginTime", new Date(System.currentTimeMillis()));
      response.setReturnFlag(0);
      response.setReturnMsg("登陆成功！");
    }
    else {
      response.setReturnFlag(-1);
      response.setReturnMsg("登陆失败！");
    }
    return response;
  }
}

 

Javascript客户端请求（同步）代码为：

<SCRIPT LANGUAGE="JavaScript">
<!--
function doLogin()
{
  	var req=new Request();//创建一个请求对象
	req.setControllerName("LoginAjaxController.ajax");//设置处理控制器名称
	req.put("username",form1.username.value);//输入请求参数
	req.put("password",form1.password.value);
	var r=req.synchroExecute();//同步执行请求并处理响应结果
	if(r.returnFlag==0){
	  var userInfo=r.getValueByName("UserInfo");
	  var user=userInfo.name;
	  var userid=userInfo.userId;
	  var useryear=userInfo.year;
	  var sex=userInfo.sex;
	  var phone=userInfo.phone;
	  var loginTime=new Date(r.getValueByName("LoginTime").time);
      alert(r.returnMsg+'\n-->用户信息<--\n编号：'+userid+'\n姓名：'+user+'\n性别：'+sex+'\n年龄：'+useryear+'\n登陆时间：'+loginTime.toString());
	}else{
	  alert(r.returnMsg);
	}
}
//-->
</SCRIPT>

 

当然，框架也支持异步请求，其代码如下：

function login(){
    var req=new Request();
	req.setControllerName("LoginAjaxController.ajax");
	req.put("username",f2.username.value);
	req.put("pwd",f2.pwd.value);
	req.put("flag",0);
	req.asynchroExecute( //异步执行，并利用回调函数处理结果
	 function resultHandle(r){ 
		if(r.returnFlag==0){
		  alert(r.returnMsg);
		  var userInfo=r.getValueByName("UserInfo");
		  var username=userInfo.username;
		  var pwd=userInfo.pwd;
		  var sex=userInfo.sex;
		  var email=userInfo.email;
		  var registTime=new Date(userInfo.registTime.time);
		  alert(r.returnMsg+'\n-->用户信息<--\n姓名：'+username+'\n性别：'+sex+'\n邮件：'+email+'\n注册时间：'+registTime.toString());
		}else{
		  alert(r.returnMsg);
		}
	});
}

 

最后，需要在WebController.xml文件指定Ajax控制器与实现类的映射关系：

<?xml version="1.0" encoding="UTF-8"?>
<mappings>
  <controllers>
     <ajax>
        <aItem name="LoginAjaxController.ajax" class=" com.beetle.WebDemo.presentation.LoginAjaxController"/>
    </ajax>
  </controllers>
</mappings>

 

上面整个ajax请求访问过程的各组件的调用关系如下：

首先，浏览器html页面引入jsonrpcEx.js库，在登录按钮事件内创建一个Request请求对象，调用其setControllerName()方法指定服务器处理此请求的子控制器名称，调用put()方法输入请求参数，调用synchroExecute()方法提交请求。
其次，GlobalDispatchServlet主控器接收到通过http协议提交上来的请求，交给AjaxController控制器去处理，它根据控制器名称找到其对应的LoginController实现类，并实例化它，调用其perform()方法执行处理请求的逻辑，并返回AjaxResponse结果对象给主控器，主控制将此结果进行序列化，以MapValue数据形式返回到浏览器的javascript客户端。
最后，javacirpt端request对象把传回的数据封装成一个Response对象交回给html页面，再通过Response对象提供的getValueByName方法读取返回的数据解析显示在页面视图上。

 

#BJAF Web框架对Ajax技术进行有力封装，详细请参考Henry Yu编写的《J2EE Web开发使用Ajax技术的核心所在》文章。