Buffalo ajax執行個體

Buffalo是國人開發的Ajax架構

它可以使使用者在js中調用java代碼裡的方法.

配置方法：

1. web.xml中配置相關servlet 如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
 xmlns="http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
 http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 
 
  <servlet>
  <servlet-name>buffalo</servlet-name>
  <servlet-class>net.buffalo.web.servlet.ApplicationServlet</servlet-class>
 </servlet>
 
   <servlet-mapping>
  <servlet-name>buffalo</servlet-name>
  <url-pattern>/buffalo/*</url-pattern>
 </servlet-mapping>
 
 
</web-app>

2. 需要引入的jar包為：

加入兩個jar包：buffalo-2.0.jar和commons-logging.jar。註：若commons-logging.jar不加入，會拋出異常。

 

3. 編寫需要調用的業務類。
如：

1. HelloService.java

如下：方法中定義了三個。分別返回字串，傳回值對象vo，返回對象數組,

package com.artron.ajax.demo;

import com.artron.art.vo.Art;

public class HelloService {
 
 public String sayHello(String name)
 {      
  return "Hello," + name +",歡迎使用Buffalo。";   
 }
 
 public static void main(String[] args)
 {
  HelloService hs=new HelloService();
  String hellostr=hs.sayHello("yanek");
  System.out.println(hellostr);
 }
 
 
 public Art getArt(long id)
 {      
  Art art=new Art();
  art.setId(id);
  art.setName("aaaa");
  art.setDescription("mmdmd");
  return art;
 }

 public Art[] getArts(long id)
 {      
  
  Art[] arts=new Art[2];
  
  Art art1=new Art();
  art1.setId(id);
  art1.setName("aaaa");
  art1.setDescription("mmdmd");
  
  Art art2=new Art();
  art2.setId(id+1);
  art2.setName("bbbbb");
  art2.setDescription("cccc");
  
  arts[0]=art1;
  arts[1]=art2;
  
  
  return arts;
 }

}

相關的值對象：

Art.java

package com.artron.art.vo;

public class Art {

 private long id;

 private String name;
 
 private String description;
 
 

 public String getDescription() {
  return description;
 }

 public void setDescription(String description) {
  this.description = description;
 }

 public long getId() {
  return id;
 }

 public void setId(long id) {
  this.id = id;
 }

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

}

 

4. 設定檔中配置業務類

 設定檔為：buffalo-service.properties  位置在classes下
 
 內容如下：
 
 
 helloService = com.artron.ajax.demo.HelloService
 
 多個類則配置多個： 格式 名稱=業務類全名
 
 注意：js裡則通過  helloService 來代替com.artron.ajax.demo.HelloService類執行其中的業務方法
 
 
 

到此後台代碼結束

下面為前台調用

5. 在jsp中引入js檔案：prototype.js 和 buffalo.js 檔案

 <script type="text/javascript" src="js/prototype.js"></script>
 <script type="text/javascript" src="js/buffalo.js"></script>
 
6. 編寫調用js代碼

注意：helloService這個是設定檔中配置的名稱

<script type="text/javascript">  
      var endPoint = "<%=request.getContextPath()%>/buffalo"; 
      var buffalo = new Buffalo(endPoint);   
       function sayHello(name)
       { 
           //第一個參數是調用業務的方法，第二個是參數列表，用[]括起來，第三個是回調介面，
           //需要調用的都可以寫在這個函數中   
                
             buffalo.remoteCall("helloService.sayHello", [name.value], function(reply){ 
                      
                            //alert(reply.getResult());
                        
                            $('msg').innerHTML= reply.getResult();
                        
                        }
             );
            
            
             //alert("ccc="+getArt(6));
            
             var art=getArt(6);
             alert("id="+art.id);
              alert("id="+art.name);
              alert("id="+art.description);
             
             
             
             var arts=getArts(6);
            
               alert("id="+arts[1].description+"--"+arts[1].id);
               alert("id="+arts[0].description+"--"+arts[0].id);
       }
      
 //返回js對象     
 function getArt(id) {
 var buffalo = new Buffalo(endPoint, false);
 var ret = null;
 buffalo.remoteCall("helloService.getArt",[id], function(reply) {
  ret = reply.getResult();
 });
 return ret; 
}

//調用返回js對象數組
 function getArts(id) {
 var buffalo = new Buffalo(endPoint, false);
 var ret = null;
 buffalo.remoteCall("helloService.getArts",[id], function(reply) {
  ret = reply.getResult();
 });
 return ret; 
}
 
</script>   

    <input type="text" value="" id="myname"/>
   
    <input type="button" value="Buffalo遠程調用" onclick="sayHello($('myname'));"/>
   
    <div id="msg"></div>
   
   
   點按紐則顯示java類方法返回的內容
   
   
    完整例子：
   
    index.jsp:
   
   
    <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'index.jsp' starting page</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
  </head>
 
  <body>
    This is my JSP page. <br>
   
 <script type="text/javascript" src="js/prototype.js"></script>
   <script type="text/javascript" src="js/buffalo.js"></script>
     <script type="text/javascript">  
      var endPoint = "<%=request.getContextPath()%>/buffalo"; 
         var buffalo = new Buffalo(endPoint);   
       function sayHello(name)
       { 
           //第一個參數是調用業務的方法，第二個是參數列表，用[]括起來，第三個是回調介面，
           //需要調用的都可以寫在這個函數中   
                
             buffalo.remoteCall("helloService.sayHello", [name.value], function(reply){ 
                      
                            //alert(reply.getResult());
                        
                            $('msg').innerHTML= reply.getResult();
                        
                        }
             );
            
            
             //alert("ccc="+getArt(6));
            
             var art=getArt(6);
             alert("id="+art.id);
              alert("id="+art.name);
              alert("id="+art.description);
             
             
             
             var arts=getArts(6);
            
               alert("id="+arts[1].description+"--"+arts[1].id);
               alert("id="+arts[0].description+"--"+arts[0].id);
       }
      
      
 function getArt(id) {
 var buffalo = new Buffalo(endPoint, false);
 var ret = null;
 buffalo.remoteCall("helloService.getArt",[id], function(reply) {
  ret = reply.getResult();
 });
 return ret; 
}

 function getArts(id) {
 var buffalo = new Buffalo(endPoint, false);
 var ret = null;
 buffalo.remoteCall("helloService.getArts",[id], function(reply) {
  ret = reply.getResult();
 });
 return ret; 
}
 
    </script>   
    <input type="text" value="" id="myname"/>
   
    <input type="button" value="Buffalo遠程調用" onclick="sayHello($('myname'));"/>
   
    <div id="msg"></div>
   
  </body>
</html>