890
Buffalo ajax實例
Buffalo是國人開發的Ajax框架
它可以使用戶在js中調用java代碼裏的方法.
配置方法：
1. web.xml中配置相關servlet 如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="https://java.sun.com/xml/ns/j2ee"
xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://java.sun.com/xml/ns/j2ee
https://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("--"+arts[1].id);
alert("--"+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="" />
<input type="button" value="Buffalo遠程調用" />
<div ></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("--"+arts[1].id);
alert("--"+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="" />
<input type="button" value="Buffalo遠程調用" />
<div ></div>
</body>
</html>
最後更新：2017-04-02 04:26:01