使用JSON-RPC-Java完成Ajax交互

JSON-RPC-Java是一个开源Ajax框架，能够让javascript直接调用后台的Java程序。

下载地址：http://oss.metaparadigm.com/jsonrpc 

注意：构筑工程需要用到jsonrpc-1.0.jar，以及开源包webapps/jsonrpc下jsonrpc.js文件。

下面是来自《基于J2EE的Ajax宝典》一书的示例代码，和大家分享一下。

web.xml文件：

<? xml version="1.0" encoding="GBK" ?>  
<! DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
    "http://java.sun.com/dtd/web-app_2_3.dtd" >
< web-app >

     < servlet >
         < servlet-name > jsonServlet </ servlet-name >
         < servlet-class > com.metaparadigm.jsonrpc.JSONRPCServlet </ servlet-class >
     </ servlet >

     < servlet-mapping >
         < servlet-name > jsonServlet </ servlet-name >
         < url-pattern > /myjson </ url-pattern >
     </ servlet-mapping >

</ web-app >

java后台的service文件：

package  lee;

import  java.io.Serializable;

public   class  TipService  implements  Serializable
... {
    private static final long serialVersionUID = 1023926111323841333L;
    
    private String[][] tips= 
    ...{
        ...{"1" , "IBM笔记本电脑，价格有点贵，<br>外观保守，适合稳重型用户。"},
        ...{"2" , "Dell笔记本电脑，价格适中，<br>兼顾中、低端用户，有更多的<br>选择余地。"},
        ...{"3" , "SONY笔记本电脑，源自日本，<br>细致工艺，优美的外观都是其<br>卖点，比较贵。"}
    };

    public String getTip(int id)
    ...{
        for (String[] tip : tips )
        ...{
            if (tip[0].equals(String.valueOf(id)))
            ...{
                return tip[1];
            }
        }
        return null;
    }
}

前台jsp文件，要使用JSONRPCBridge，直接在jsp中追加<jsp:useBean id="JSONRPCBridge" scope="session" class="com.metaparadigm.jsonrpc.JSONRPCBridge" />即可。代码如下：

<% ... @ page contentType="text/html;charset=GBK" %>
< jsp:useBean  id ="JSONRPCBridge"  scope ="session"  class ="com.metaparadigm.jsonrpc.JSONRPCBridge"   />
< jsp:useBean  id ="tip"  scope ="session"  class ="lee.TipService"   />
<% ...  JSONRPCBridge.registerObject("tip", tip);  %>
< HTML >
< HEAD >
< TITLE > 在线商场 </ TITLE >
< META  http-equiv =Content-Type  content ="text/html; charset=GBK" >
</ HEAD >
     < script  type ="text/javascript"  src ="jsonrpc.js" ></ script >
< script  type ="text/javascript"  src ="tip.js" ></ script >
< BODY  topMargin =20  onLoad ="onLoad()" >
< h3  align ="center" > 请挑选您想购买的笔记本 </ h3 >

< table  width ="640"  height ="208"  border ="1"  align ="center"  style ="border-collapse:collapse" >
   < tr >
     < td  width ="230" >< img  id ="1"  src ="img/ibm.jpg"  onMouseOver ="getTip(this.id , event);"  onMouseOut ="hideTip()" /></ td >
     < td  width ="400" >
     < table  width ="400"  border ="0"  style ="font-size:10pt" >
        < tr >
         < td >< h3  align ="center" > ThinkPad T60 2007GT1 </ h3 ></ td >
       </ tr >
       < tr >
         < td >< strong > 处理器:  </ strong > Intel Core2 Duo(Merom) T7200(2.0G) </ td >
       </ tr >       
       < tr >
         < td >< strong > 内存容量:  </ strong > 512M </ td >
       </ tr >
       < tr >
         < td >< strong > 硬盘容量:  </ strong > 120G </ td >
       </ tr >
       < tr >
         < td >< strong > 屏幕尺寸:  </ strong > 14.1寸 </ td >
       </ tr >
       < tr >
         < td >< strong > 显示芯片:  </ strong > 独立,ATI Mobility Radeon X1300 </ td >
       </ tr >
       < tr >
         < td >< strong > 重量:  </ strong > 约2.32Kg </ td >
       </ tr >
     </ table ></ td >
   </ tr >
   < tr >
     < td >< img  id ="2"  src ="img/dell.jpg"   onMouseOver ="getTip(this.id , event);"  onMouseOut ="hideTip()" /></ td >
     < td >
     < table  width ="400"  border ="0"  style ="font-size:10pt" >
       < tr >
         < td >< h3  align ="center" > 戴尔 Inspiron 6400(N511212) </ h3 ></ td >
       </ tr >
       < tr >
         < td >< strong > 处理器:  </ strong > Intel Core2 Duo(Merom) T5500(1.66G) </ td >
       </ tr >       
       < tr >
         < td >< strong > 内存容量:  </ strong > 512M </ td >
       </ tr >
       < tr >
         < td >< strong > 硬盘容量:  </ strong > 120G </ td >
       </ tr >
       < tr >
         < td >< strong > 屏幕尺寸:  </ strong > 14.1寸 </ td >
       </ tr >
       < tr >
         < td >< strong > 显示芯片:  </ strong > 独立,ATI Mobility Radeon X1300 </ td >
       </ tr >
       < tr >
         < td >< strong > 重量:  </ strong > 约2.32Kg </ td >
       </ tr >
     </ table ></ td >
   </ tr >
     < tr >
     < td >< img  id ="3"  src ="img/sony.jpg"   onMouseOver ="getTip(this.id , event);"  onMouseOut ="hideTip()" /></ td >
     < td >
     < table  width ="400"  border ="0"  style ="font-size:10pt" >
       < tr >
         < td >< h3  align ="center" > 索尼 VGN-AR18CP </ h3 ></ td >
       </ tr >
       < tr >
         < td >< strong > 处理器:  </ strong > Intel Core Duo(Yonah) T2600(2.16G) </ td >
       </ tr >
       < tr >
         < td >< strong > 内存容量:  </ strong > 2048M </ td >
       </ tr >
       < tr >
         < td >< strong > 硬盘容量:  </ strong > 160G </ td >
       </ tr >
       < tr >
         < td >< strong > 屏幕尺寸:  </ strong > 17寸 </ td >
       </ tr >
       < tr >
         < td >< strong > 显示芯片:  </ strong > 独立,nVidia Geforce Go7600GT </ td >
       </ tr >
       < tr >
         < td >< strong > 重量:  </ strong > 约3.8Kg </ td >
       </ tr >  
     </ table >
     </ td >
   </ tr >
</ table >
< div  id ="tip"  style ="position:absolute; z-index:100;font-size:10pt;background-color:#eeeeaa;border:1px solid #999999"   >
</ div >
</ BODY >
</ HTML >

这里提一下,在servlet中使用JSONRPCBridge，代码如下：

HttpSession session  =  request.getSession();
JSONRPCBridge jsonBridge  =   null ;
jsonBridge  =  (JSONRPCBridge)session.getAttribute( " JSONRPCBridge " );
if (jsonBridge  ==   null ) ... {
    jsonBridge = new JSONRPCBridge();
    session.setAttribute("JSONRPCBridge", jsonBridge);
}

由jsp页面可知，在jsp中暴露处理类的方法为：

< jsp:useBean  id ="tip"  scope ="session"  class ="lee.TipService"   />
<% ...  JSONRPCBridge.registerObject("tip", tip);  %>

jsonrpc.js文件在JSON-RPC开源包中可以取到。tip.js文件如下：

var  jsonrpc;
var  tipDiv;
var  top;
var  left;

function  onLoad()
... {
    jsonrpc = new JSONRpcClient("myjson");
}

function  getTip(id , event)
... {
    if (navigator.appName == "Microsoft Internet Explorer")
    ...{
        left = event.x;
        top = event.y;
    }
    else
    ...{
        left = event.pageX;
        top = event.pageY;
    }
    tipDiv = document.getElementById("tip");
    jsonrpc.tip.getTip(cb, id);
    tipDiv.style.left = left;
    tipDiv.style.top = top;
    tipDiv.style.display = "";
}


function  cb(result, exception)
... {
    if(result == null && exception != null)
    ...{
        alert(exception.message);
    }
    if (result != null && exception == null)
    ...{
        tipDiv.innerHTML=result;
    }
}

function  hideTip()
... {
    tipDiv.style.display = "none";
}