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>

目录
相关文章
|
3月前
|
JSON 前端开发 JavaScript
介绍几个常见的 AJAX 实例,帮助你更好地理解和运用 AJAX 技术
介绍几个常见的 AJAX 实例,帮助你更好地理解和运用 AJAX 技术
39 2
|
4月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
48 0
|
SQL 前端开发 Java
Java Web——Ajax的结束与第二个实例
Java Web——Ajax的结束与第二个实例
Java Web——Ajax的结束与第二个实例
|
XML 存储 前端开发
Java Web——Ajax的理解与第一个实例
Java Web——Ajax的理解与第一个实例
Java Web——Ajax的理解与第一个实例
|
前端开发 Java
【AJAX】AJAX技术详细解析以及实例(2)
【AJAX】AJAX技术详细解析以及实例
171 0
【AJAX】AJAX技术详细解析以及实例(2)
|
XML Web App开发 缓存
【AJAX】AJAX技术详细解析以及实例(1)
【AJAX】AJAX技术详细解析以及实例
174 0
|
设计模式 JSON 前端开发
MVC框架模式技术实例(用到隐藏帧、json、仿Ajax、Dom4j、jstl、el等)(2)
MVC框架模式技术实例(用到隐藏帧、json、仿Ajax、Dom4j、jstl、el等)
120 0
MVC框架模式技术实例(用到隐藏帧、json、仿Ajax、Dom4j、jstl、el等)(2)
|
设计模式 JSON 前端开发
MVC框架模式技术实例(用到隐藏帧、json、仿Ajax、Dom4j、jstl、el等)(1)
MVC框架模式技术实例(用到隐藏帧、json、仿Ajax、Dom4j、jstl、el等)
131 0
MVC框架模式技术实例(用到隐藏帧、json、仿Ajax、Dom4j、jstl、el等)(1)