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>

时间： 2024-11-08 18:26:55

Buffalo ajax实例的相关文章

jQuery Ajax 实例(一)

jQuery Ajax实例 在jquery中ajax实现方法分类很多种,如有:load.jQuery.get.jQuery.post.jQuery.getScript.jQuery Ajax 事件.jQuery.ajaxSetup等等 一.$.ajax的一般格式 $.ajax({      type: 'POST',      url: url ,     data: data ,     success: success ,     dataType: dataType }); 二.$.aja

AJAX、AJAX实例及AJAX源代码（asp）

ajax|源代码 AJAX介绍 AJAX 关键词: javascript脚本和可扩展标记语言(XML) WEB浏览器技术 开放式WEB标准 浏览器以及独立平台 更好更快的网络应用程序 XML以及HTTP请求 AJAX = 异步JavaScript和可扩展标记语言 AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术. AJAX是一种浏览器技术 AJAX是一种运用于浏览器中的技术.在浏览器和服务器之间,它使用异步数据进行转换,并允许网页向服

AJAX、AJAX实例及AJAX源代码(asp)

AJAX介绍 AJAX 关键词:javascript脚本和可扩展标记语言(XML) WEB浏览器技术 开放式WEB标准 浏览器以及独立平台 更好更快的网络应用程序 XML以及HTTP请求 AJAX = 异步JavaScript和可扩展标记语言AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术. AJAX是一种浏览器技术AJAX是一种运用于浏览器中的技术.在浏览器和服务器之间,它使用异步数据进行转换,并允许网页向服务器索取少量信息而非整个

jQuery Ajax 实例全解析_jquery

废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (Map) : (可选参数) 发送至服务器的 key/value 数据. callback (

jquery ajax实例教程与详细说明(1/2)

说明 $.ajax({ type: "post", url: "handler1.ashx", data: { username: "admin", password: "123" }, success: successhandle }); function successhandle(rep) { $("#msg").html(rep); } 详细讲一下关于jquery ajax实例 实例 通过 ajax

jQuery Ajax 实例详解 ($.ajax、$.post、$.get)_AJAX相关

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:http://www.jb51.net/article/26903.htm $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data ,

asp ajax 实例（post,get,form测试)(1/3)

文章提供一款简单asp教程 ajax 实例(post,get,form测试)哦,他做了三个相关ajax asp测试实例,都通过了. index.html <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http:/

jQuery Ajax 实例代码 ($.ajax、$.post、$.get)_jquery

$.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二.$.ajax的参数描述 参数 描述 url 必需.规定把请求发送到哪个 URL. data 可选.映射或字符串值.规定连同请求发送到服务器的数据. success(data, textS

php ajax 实例与ajax 教程

php教程 ajax 实例与ajax 教程    1创建xmlhttprequest对象的网页特效程序.   2   发出异步请求的javascript程序.   3   处理服务器响应的javascript程序. */  //1创建xmlhttprequest对象的javascript程序.  代码如下 复制代码  function getxmlhttprequest() {     var xmlhttp=null;     try     {         xmlhttp = new x