通用Ajax设计

利用Servlet和反射技术实现通用的Ajax调用设计，如下：

一，调用规则
在JS代码，调用者只需按下面的规范，即可实现异步或同步java方法调用
在你的jsp或html页面中，导入通用异步调用方法文件(km.js[自定义]),然后写异步调用方法AjaxTest(url)，url格式为：

var result  = AjaxTest(“异步类名/方法名?”+时间戳+参数)     参数中的名称，跟你异步类中的字段要一致，

异步类及其方法可自定义，但必须统一放在固定的包(com.smartcom.km.ajaxObj )下面，以达到通用的目的

,如果参数中有中文，须进行编码后再调用，用一个变量（result ）接收其返回值即可，详细代码如下：

 

1. 在页面中引入异步方法文件

   <script type="text/javascript" src="js/km.js"></script>

 

2.  index.jsp (页面中的异步调用)

<script type="text/javascript">
   			document.write("异步调用1------------------------------<br>");
   			var params = "?time="+new Date().getTime()+"&userid=zhangs&username=张三";
   			var url = "Ajax4Public/execute1"+encodeURI(encodeURI(params));
   			var ret = AjaxTest(url);
   			if(""!=ret){ 
   				document.write(ret+"<br>");
   			}
   			
   			document.write("异步调用2------------------------------<br>");
   			var params = "?time="+new Date().getTime()+"&userid=lis&username=李四";
   			var url = "Ajax4Public/execute2"+encodeURI(encodeURI(params));
   			var ret = AjaxTest(url);
   			if(""!=ret){ 
   				document.write(ret+"<br>");
   			}
   			
   			document.write("异步调用3------------------------------<br>");
   			var params = "?time="+new Date().getTime()+"&userid=wangw&username=王五";
   			var url = "Ajax4Comm/execute1"+encodeURI(encodeURI(params));
   			var ret = AjaxTest(url);
   			if(""!=ret){ 
   				document.write(ret+"<br>");
   			}
   			
   			document.write("异步调用4------------------------------<br>");
   			var params = "?time="+new Date().getTime()+"&userid=zhaoq&username=赵七";
   			var url = "Ajax4Comm/execute2"+encodeURI(encodeURI(params));
   			var ret = AjaxTest(url);
   			if(""!=ret){ 
   				document.write(ret+"<br>");
   			}
 </script>

 

 3.  km.js( 通用异步方法代码)

	 function AjaxTest(url){
		var xmlhttp=null;
		
		if (window.XMLHttpRequest){// code for Firefox, Opera, IE7, etc.
		  xmlhttp=new XMLHttpRequest();
		  if(xmlhttp.overrideMimeType){
		  		xmlhttp.overrideMimeType("text/html");
		  }
		}else if (window.ActiveXObject){// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		if (xmlhttp!=null){  
			xmlhttp.onreadystatechange=function(){}; 
			xmlhttp.open("GET","./servlet/com.borse.km.servlet.Dispatcher/"+url,false);
			xmlhttp.send(null);
			return xmlhttp.responseText;
		}else{
			alert("Your browser does not support XMLHTTP.");
			return false;
		}
	} 

 

4.   com.smartcom.km.servlet.Dispatcher.java  （Servlet代码）

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");   
		Object retparam = null; //返回值参数
		try {
			System.out.println("------------------------------->>>params:"+request.getPathInfo());
			String [] path = request.getRequestURL().toString().split("/", -1);
			String methodName = path[path.length-1];
			System.out.println("------------------------------->>>methodName:"+methodName);
			String beanName = path[path.length-2];
			System.out.println("------------------------------->>>beanName:"+beanName);
			String ajaxpath = null;
			if(ajaxpath==null || ajaxpath.trim().length()<1){
				ajaxpath="com.smartcom.km.ajaxObj";
			}
			System.out.println("------------------------------->>>ajaxpath:"+ajaxpath);
			//反射
			System.out.println("------------------------------->>>bean:"+ajaxpath+"."+beanName);
			Object bean = Class.forName(ajaxpath+"."+beanName).newInstance();
			BeanUtils.populate(bean, request.getParameterMap());
			retparam = MethodUtils.invokeMethod(bean, methodName, new Object []{});
			
		} catch (Exception e) {
			System.out.println(e.getMessage());
		}
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html");
		response.getWriter().write(retparam.toString());
}

 

5. web.xml (servlet配置)

 <?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>Dispatcher</servlet-name>
    <servlet-class>com.smartcom.km.servlet.Dispatcher</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>Dispatcher</servlet-name> 
     <url-pattern>/servlet/*</url-pattern>
  </servlet-mapping>
  
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

 

 

6. com.smartcom.km.ajaxObj.Ajax4Public.java (异步类1)

public class Ajax4Public {
	private String userid;
	private String username;
	public void setUserid(String userid) {
		this.userid = userid;
	}
	public void setUsername(String username) {
		try {
			this.username = java.net.URLDecoder.decode(username,"UTF-8"); 
		} catch (Exception e) {
			this.username = username;
		}
		
	}
	public String execute1(){
		System.out.println("----------------------->>>userid:"+this.userid);
		System.out.println("----------------------->>>username:"+this.username); 
		return  "["+this.username+"]调用[Ajax4Public.execute1()]成功!";
	}
	
	public String execute2(){
		System.out.println("----------------------->>>userid:"+this.userid);
		System.out.println("----------------------->>>username:"+this.username); 
		return  "["+this.username+"]调用[Ajax4Public.execute2()]成功!";
	}
}

 

7. com.smartcom.km.ajaxObj.Ajax4Comm.java (异步类2)

public class Ajax4Comm {
	private String userid;
	private String username;
	public void setUserid(String userid) {
		this.userid = userid;
	}
	public void setUsername(String username) {
		try {
			this.username = java.net.URLDecoder.decode(username,"UTF-8"); 
		} catch (Exception e) {
			this.username = username;
		} 
	}
	public String execute1(){
		System.out.println("----------------------->>>userid:"+this.userid);
		System.out.println("----------------------->>>username:"+this.username); 
		return  "["+this.username+"]调用[Ajax4Comm.execute1()]成功!";
	}
	
	public String execute2(){
		System.out.println("----------------------->>>userid:"+this.userid);
		System.out.println("----------------------->>>username:"+this.username); 
		return  "["+this.username+"]调用[Ajax4Comm.execute2()]成功!";
	}
}

 

运行结果如下：

 

 

评论

2 楼 skcks 2012-10-21  

建行内部开发平台也是做了一个类似的封装用于ajax远程调用服务端方法。

1 楼 qiuyu1990 2012-10-21  

这个应该是 DWR的原理吧