国产Ajax框架-Buffalo 介绍以及快速上手

本文链接：https://blog.youkuaiyun.com/rich1979/article/details/563666

今天看了优快云上的一篇文章国产Ajax框架,顺着去Buffalo的网站去看了看,还真不错,文档,帮助,下载,实例都写的很完整,有些实例都是在实际项目开发中非常实用的,所以在这里也做个简单介绍,内容主要来自buffalo网站,我也就是做个整理,顺便做个传道者(绝对不是托啊)

内容分两部分,大家可以根据需要选择来看

1. Buffalo的特征

Ajax正开始大行其道，Sun的Blueprints中已经开始包括ajax的支持。但是直接使用XMLHTTP在大多数情况下编程并不容易。Buffalo使得这一过程更加容易。Buffalo首先是burlap协议的JavaScript实现，但是他为Amowa(面向异步消息的Web应用)/Ajax提供了更多的支持。开发者可以使用Buffalo为web应用更加容易的添加Amowa/Ajax特性；另外，随着开发者的要求，Buffalo开始逐渐加入了Web元素，使得Buffalo逐渐向一个全功能的、新型的Web框架逐渐靠近。

Burlap协议的JavaScript实现

事实上，burlap协议应该是目前最适合使用用作web remoting的通信协议，全面，简洁，适用。Buffalo实现了burlap协议中绝大部分数据类型的javascript序列化/反序列化。

Java对象到JavaScript对象的双向序列化全面支持

java端任意一个方法调用产生的结果，都可以被透明的序列化到javascript端，无论是这个对象多么复杂；无论是简单的原子类型（String, int, long, boolean）还是复杂的对象（List, Map），甚至你自己定义的业务对象，buffalo可以完整的将其序列化到javascript端，你可以用javascript与其交互。buffalo的这项特性久经考验，成为它最富特色的功能。例如，userService.listAll()返回所有用户列表(java.util.List):

客户端调用方式：

buffalo.remoteCall("userService.listAll",[],function(reply){
// 不用担心，reply.getResult会从聪明的判断服务器端远程调用的结果类型。
var userList = reply.getResult(); 
var firstUserFamilyName = userList[0].name.familyName;
});

异步回调的编程模型

在buffalo 1.1之前，每一个方法调用都是异步的，在1.1版本之后，Buffalo支持同步调用（尽管不推荐这么做）。两者编程模型完全相同，你可能这样使用系统的登录功能：

// var buffalo = new Buffalo("/bfapp/buffalo"); // 1.2版本的写法
buffalo.remoteCall("userService.login",["username","password"], function(reply) {
    var success = reply.getResult();
    if (success) {
        alert("You login successfully");
    } else {
        alert("user name or password incorrect!");
    }
});

支持异步事件

喜欢像gmail一样，在加载系统时出现小小的loading条，而不是切换页面？Buffalo给你支持。onLoading, onFinish, onError, 你可以定义这些事件，使之符合自己应用的需要。

简单，直观，易于使用

Buffalo开发者尽最大努力将API设计的易于使用，无论是客户端还是服务器端，尽可能不让开发者了解buffalo细节。

服务器端，使用buffalo的开发者，几乎不需要了解buffalo的java代码结构。任何POJO都可以成为Buffalo的服务被暴露出来。
客户端，开发者只需要与一个对象交互：Buffalo, 并且只需要与为数不多的方法进行交互即可。任何一个初学者，可以在半小时之内熟悉buffalo并开始开发。

集成Prototype Library

参考Ruby简单的思想，Prototype为真正的web开发提供了简便直接的支持。Buffalo 1.2版本开始用Prototype语法重写，并直接构建在其之上，这是因为Prototype是可以直接使用，几乎不需学习就可以为web开发带来巨大好处的。

Spring集成

Spring是当前最流行的轻量级容器，Buffalo对它进行了支持。Spring中任意一个配置过的bean, 都可以通过简单的配置被暴露为buffalo服务。

浏览器兼容

Buffalo目前支持IE6/Firefox 1.0+浏览器。

支持浏览器前进/后退按钮

许多大面积使用Ajax的web应用常常陷入一个浏览器前进后退功能失效的困境。Buffalo 1.2版本中解决了这一问题。只要在主页面中加入buffalo-blank.html的引用，并采用buffalo.switchView的方法，你会发现浏览器的前进后退按钮可用，并且能正确地进行导航。

支持数据绑定

对于一般的数据返回值，buffalo提供了绑定的功能，能够迅速的将javascript对象的值绑定到html元素上。绑定的元素支持text, checkbox, radio, textarea, select, span/div, table.

2. 快速上手

本文将针对初次接触buffalo的开发者，提供一个一分钟的快速教程，让开发能够迅速掌握buffalo的开发。任何一个教程都是从Hello, World开始，我们也不例外。为了演示Buffalo的基本功能，以及如何使用Buffalo, 看起来没有比这更简单的例子了~

1. 下载buffalo

请在下载页面中，下载最新版本。你也可以跳过这篇文章，直接下载buffalo-example.war，在那个压缩包中，已经包含了已经配置好的buffalo，以及这篇文章中涉及的演示应用。

2. Web应用目录

+ buffalo-example
       WEB-INF/classes
       WEB-INF/lib
       script

然后将burlap-2.1.2.jar, buffalo-<version>.jar放到WEB-INF/lib中；将prototype.js, buffalo.js放到script目录中。

3. 编辑web.xml

新建一个web.xml, 放到WEB-INF中；编辑内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<!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>
<display-name>Buffalo Example Application</display-name>
<servlet>
    <servlet-name>bfapp</servlet-name>
    <servlet-class>net.buffalo.web.servlet.ApplicationServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>bfapp</servlet-name>
    <url-pattern>/bfapp/*</url-pattern>
</servlet-mapping>
</web-app>

4. 编辑buffalo-service.properties

新建一个空文本文件，命名为buffalo-service.properties，放到WEB-INF/classes中；编辑内容如下：

# Example Service
helloService=example.HelloService

5. 编辑JSP文件

新建一个空的HTML文件，命名为example.jsp, 放到根目录下面, 内容如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>Example::Hello</title>
<script language="javascript" src="script/prototype.js"></script>
<script language="javascript" src="script/buffalo.js"></script>
<script language="javascript">
var END_POINT="<%=request.getContextPath()%>/bfapp";
var buffalo = new Buffalo(END_POINT);
function hello() {
    var p1 = $("myname").value;
    buffalo.remoteCall("helloService.hello",[p1], function(reply) {
        alert(reply.getResult());
    });
}
</script>
</head>
<body>
    <p>Buffalo Hello World</p>
    <p>&nbsp;</p>
    <form name="form1" method="post" action="">
      输入名字: 
      <input name="myname" type="text" id="myname">
      <input type="button" name="Submit" value="你好!" οnclick="hello()">
    </form>
</body>
</html>

6. 编辑HelloService.java

package example;
public class HelloService {
public String hello(String name) {
  try {
    // to see the loading div
    Thread.sleep(2000);
  } catch (InterruptedException e) {
    e.printStackTrace();
  }
  return "Hello, " + name;
  }
}

编译, 将编译后的类放到WEB-INF/classes下面。