`

Struts 2与AJAX（第一部分）(Struts 2系列之十三)

StrutsAjaxjsonDojoJavaScript
阅读更多
 
Struts 2与AJAX（第一部分）

在当今——Web 2.0概念铺天盖地的Internet环境下，简易的AJAX集成对于一个成功的WEB框架来说是不可或缺的。因此，Struts 2其中的一个重要的功能（Feature）就是“First-class AJAX support - Add interactivity and flexibility with AJAX tags that look and feel just like standard Struts tags（大意：一流的AJAX支持——通过AJAX标志增加互动性和灵活性，而且使用这些AJAX标志与普通的Struts标志同样简单）”。

实现原理

基于不重新发明轮子的原则，Struts 2并没有开发新的AJAX框架，而是使用时下Java EE平台中比较流行的AJAX框架——Dojo和DWR。

最近在Musachy Barroso等同志的无私奉献下，开发了Struts 2的JSON插件（Plugin），极大地方便了我们输出JSON结果（Result）。

JSON插件（Plugin）

在Struts 2的showcase中的AJAX部分，JSON的结果输出是通过Freemaker模板实现。这种方法在简易性和灵活性上都比不上JSON插件，所以JSON插件值得向大家五星推荐。

下面让我们看一个JSON插件的例子。

首先到以下网址http://code.google.com/p/jsonplugin/downloads/list下载JSON插件的JAR包，并将其加入你的WebContent\WEB-INF\lib下。

接下是本例子的Action代码：

package tutorial;

import java.util.ArrayList;
import java.util.List;

import com.googlecode.jsonplugin.annotations.JSON;
import com.opensymphony.xwork2.ActionSupport;

public class JsonPluginAction extends ActionSupport {
   private static final long serialVersionUID = -6784977600668791997L;
   
   private int bookId;
   private String title;
   private double price;
   private List<String> comments;    
   private transient String secret1;
   private String secret2;

   @JSON(name="ISBN")
   public int getBookId() {
       return bookId;
   }

   public void setBookId(int bookId) {
       this.bookId = bookId;
   }

   public List<String> getComments() {
       return comments;
   }

   public void setComments(List<String> comments) {
       this.comments = comments;
   }

   public double getPrice() {
       return price;
   }

   public void setPrice(double price) {
       this.price = price;
   }

   public String getTitle() {
       return title;
   }
   
   public void setTitle(String title) {
       this.title = title;
   }

   @Override
   public String execute() {
       bookId = 15645912;
       title = "Max On Java";
       price = 0.9999d;
       comments = new ArrayList<String>(3);
       comments.add("It's no bad!");
       comments.add("WOW!");
       comments.add("No comment!");
       secret1 = "You can't see me!";
       secret2 = "I am invisible!";
       return SUCCESS;
   }
}
清单1 src/tutorial/JsonPluginAction.java

以上代码值得注意的是，通过@JSON的JAVA注释（Annotation），我们可以改变JSON结果的属性名称，另外带有transient修饰符与没有Getter方法的字段（field）都不会被串行化为JSON。

然后，我们来配置一下此Action，代码如下：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>    
    <package name="Struts2_AJAX_DEMO" extends="json-default">
        <action name="JsonPlugin" class="tutorial.JsonPluginAction">
            <result type="json" />
        </action>            
    </package>
</struts>
清单2 src/struts.xml

上面配置文件的“package”元素和以往不同的是，它扩展了“json-default”而不是“struts-default”。“json-default”是在jsonplugin-0.11.jar包里的struts-plugin.xml中定义的。该文件同时定义了“json”的结果类型，有兴趣的朋友可以打开此文件看看。

发布运行应用程序，在浏览器中键入：http://localhost:8080/Struts2_Ajax/JsonPlugin.action，出现下载文件对话框，原因是JSON插件将HTTP响应（Response）的MIME类型设为“application/json”。把文件下载下来，用记事本打开，内容如下：

{"ISBN":15645912,"comments":["It's no bad!","WOW!","No comment!"],"price":0.9999,"title":"Max On Java"}
清单3 例子1输出的JSON串

当然这还不是一个完整的AJAX的例子，下面让我们写一个HTML文件将其完成，HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JSON Plugin</title>
    <script type="text/javascript">    
    var bXmlHttpSupport = (typeof XMLHttpRequest != "undefined" || window.ActiveXObject);
     
    if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) {
        function XMLHttpRequest() {
            var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
                                 "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
                                 "Microsoft.XMLHTTP"];
                             
            for (var i=0; i < arrSignatures.length; i++) {
                try {        
                    var oRequest = new ActiveXObject(arrSignatures[i]);            
                    return oRequest;        
                } catch (oError) { /*ignore*/ }
            }          
    
            throw new Error("MSXML is not installed on your system.");               
        }
    }    
            
    function retrieveBook() {        
        if(bXmlHttpSupport) {
            var sUrl = 'JsonPlugin.action';
            var oRequest = new XMLHttpRequest();
            oRequest.onreadystatechange = function() {
                if(oRequest.readyState == 4) {                    
                    var oBook = eval('(' + oRequest.responseText + ')');
                    var bookHolder = document.getElementById('bookHolder');
                    var sBook = '<p><b>ISBN: </b>' + oBook.ISBN + '</p>';
                    sBook += ('<p><b>Title: </b>' + oBook.title + '</p>');
                    sBook += ('<p><b>Price: </b>$' + oBook.price + '</p>');
                    sBook += ('<b><i>Comments: </i></b><hr/>');
                    for(i = 0; i < oBook.comments.length; i++) {
                        sBook += ('<p><b>#' + (i + 1) + ' </b>' + oBook.comments[i] + '</p>');
                    }
                    bookHolder.innerHTML = sBook;
                }
            };
            oRequest.open('POST', sUrl);
            oRequest.send(null);
        }
    }
    </script>
</head>
<body>
    <input type="button" value="Retrieve Book" onclick="retrieveBook()" />
    <div id="bookHolder"></div>
</body>
</html>
清单4 WebContent/JsonPlugin.html

以上代码中，我没有使用任何的AJAX的Javascript包，而是参考《Professional Javascript For Web Developer》手工创建XHR（XMLHttpRequest），并在XHR完成后使用eval()方法将JSON字符串变为JSON对象。需要注意的是，要调用eval函数时，必须使用“(”和“)”将JSON字符串括起来，否则会出错的。

打开http://localhost:8080/Struts2_Ajax/JsonPlugin.html，点击“Retrieve Book”按钮，页面如下图所示：

图1 JsonPlugin.html页面输出
图1 JsonPlugin.html页面输出

Struts 2与Dojo

Dojo是开源Javascript工具包，它引了Widget的概念，方便了Javascript面向对象编程（OOP），改进Javascript的事件模型。在此我不打算对此进行深入的讲解，有兴趣的朋友的可以找网上找一些关于Dojo的资料学习。

Struts 2基于Dojo编写一些AJAX标志（在Dojo中称为Widget），要使用这些标志的AJAX功能，需要将标志的“theme”属性设为“ajax”。同时，亦需要将加入在<head>与</head>之间加入<s:head theme="ajax" />。当使用这些标志的AJAX功能，有些属性可能会经常用到，所以我会对这些属性稍作解释。

名称 描述
href XHR（XMLHttpRequest）请求的地址
listenTopics 监听的Dojo话题（Topic）以触发自身，如可以在可以通过发布（Publish）相应的话题，通知<s:autocompleter />重新加载其备选项（Options）
notifyTopics 完成远程调用后，发出通知，触发相应的Javascript函数或Dojo Widget
formId 需要提交到服务器的表单的ID
formFilter 过滤表单字段的Javascript函数名称
indicator 在XHR处理过程中，包含用户提示的信息的HTML元素的ID，如图片或DIV等
表1 常用的AJAX标志属性

这些标志包括：<s:a />、<s: submit />、<s:autocompleter />和<s:tree />等，下面我将分别讲解。

1、<s:a />和<s:submit />

这两个标志方便了我们的调用XHR实现AJAX，所以上面的HTML如果使用了这两标志将会变得更简单，因为我们不用再去理会繁锁的XHR创建和设定的工作。下面是示例代码：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>JSON Plugin</title>
        <s:head theme="ajax" />
        <script type="text/javascript">                    
        dojo.addOnLoad(function() {
            dojo.event.topic.subscribe('retrieveBook', this, function(data, type, e){
                if(type == 'load') {
                    showBook(data);
                } else if(type == 'error') {
                    alert('Can not retrieve the book');
                }
            });
        });
        
        function showBook(strBook) {
            var oBook = eval('(' + strBook
分享到：
| Strus 2的新表单标志的使用(Struts 2系列 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    第10章 Struts 2与Ajax.ppt

    第10章 Struts 2与Ajax.ppt

    第3章 Struts2标签库详解与AJAX技术应用大型门户网站是这样炼成的

    大型门户网站是这样炼成的，本书详细介绍了以JSP 2、Struts 2、Spring 2.5、Hibernate 3.2、AJAX等主流JavaEE技术进行优化组合开发高性能大型门户网站的实践经验。针对读者的不同学习阶段，共分技术篇、实践篇与部署...

    Strut2.0 与AJAX（第三部分）

    Strut2.0 与AJAX（第三部分），一本很好的学习struts与AJAX的书籍

    [Struts 2权威指南--基于WebWork核心的MVC开发(高清完整版) 1/12

    第1章 Struts 2概述，第2章 Struts 2下的HelloWorld，第3章 Struts 2基础，第4章 深入Struts 2，第5章 Struts 2的类型转换，第6章 文件的上传和下载.，第7章 Struts 2的拦截器，第8章 Struts 2的输入校验，9.2 ...

    Struts2权威指南完整版

    第二版删除了第一版中第18章的内容(Struts 2和Struts 1整合部分)，全面介绍了Struts 2.1新增的Convention和REST支持。《Struts 2.1权威指南》最后配备的两个常用的实例也都升级为基于Struts 2.1运行，读者可通过这两...

    STRUTS 2完全学习手册.pdf

    包括Struts 2中配置文件的详细讲解、国际化与异常处理、数据类型的转换、数据的输入校验、Struts 2强大的标签库、Struts 2中文件的上传与下载、Struts 2对Ajax的支持、Struts 2与流行框架的整合，最后以3个实例由...

    网络在线考试系统(Struts1.2+Ajax+SQLServer2000实现)

    根据网络在线考试系统的特点，可以将其分为前台和后台两个部分进行设计。前台主要用于考生注册和登录系统、在线考试、查询成绩以及修改个人资料等；后台主要用于管理员对考生信息、课程信息、考题信息和考生成绩信息...

    Struts2 in action中文版

    第一部分 Strut 2：一个全新的框架 第1章 Struts 2：现代Web框架 2 1.1 Web应用程序：快速学习 2 1.1.1 构建Web应用程序 2 1.1.2 基础技术简介 3 1.1.3 深入研究 6 1.2 Web应用程序框架 7 1.2.1 什么是框架 7 1.2.2 ...

    Java Web整合开发实战：基于Struts 2+Hibernate+Spring(PDF)

    6章 Struts之数据校验与GJ化 7章 详解Struts之标签库 8章 Struts之拦截器使用技巧 9章 在Struts中应用Ajax技术 10章 Struts之项目实战 3篇 持久层框架Hibernate技术 11章 Hibernate快速上手 12章 精解...

    Struts2例子14

    example14:Struts 2与AJAX(第一部分)

    accp5y2开发基于Struts Spring Hibernate Ajax的网上信息发布平台ppt-1

    accp5y2开发基于Struts Spring Hibernate Ajax的网上信息发布平台ppt第一部分(共3部分)

    精通Java Web整合开发(Jsp+Ajax+Struts+Hibernate)(第2版).part1

    精通Java Web整合开发(Jsp+Ajax+Struts+Hibernate)(第2版) Java Structs2.1 Spring3.0 Hibernate3.3 PDF有231M，只能分成4个包上传。 虽然是图片的，但绝对清晰完整，可以放心下载。 前面已经上传过，但第一个包忘...

    Struts2.0中文教程权威版

    Struts 2权威指南——第1章 Struts 2概述.doc Struts 2权威指南——第2章 Struts 2下的HelloWorld.doc Struts 2权威指南——第3章 Struts 2基础.doc 01 为Struts 2.0做好准备 02 常用的Struts 2.0的标志（Tag） 03 ...

    Java Web开发实战经典基础篇(JSP、Servlet、Struts、Ajax)(全)

    Java Web开发实战经典基础篇(JSP、Servlet、Struts、Ajax) 作者： 李兴华 王月清 ...第1部分 Web开发前奏 1~4章 第2部分 Web基础开发 5~8章 第3部分 Web高级开发 9~14章 第4部分 框架开发 15~17章 第5部分 附录 附录A,B

    北大青鸟ACCP4.0和ACCP5.0合集系列之(二)_JSP(Struts/Hibernate/Spring/Ajax) 第一部分

    内含北大青鸟ACCP4.0和北大青鸟ACCP5.0培训资料中的JAVA WEB部分,学习JSP, Struts, Hibernate, Spring, Ajax等技术必备经典资料.（由于最大20M上传限制，只好分三卷压缩） 强挡组合,绝对超值!

    深入浅出Struts2(附源码)

    第1章 Model 2应用程序 1 1.1 Model 2概览 1 1.2 带servlet控制器的Model 2 2 1.2.1 Product动作类 3 1.2.2 ControllerServlet类 4 1.2.3 视图 6 1.2.4 部署描述文件 8 1.2.5 示例程序的运行 9 1.3 带过滤器...

    深入浅出Struts2

    第1章 Model 2应用程序 第2章 初识Struts 第3章 动作与结果 第4章 OGNL 第5章 表单标签 第6章 通用标签 第7章 类型转换 第8章 输入验证 第9章 消息处理与国际化 第10章 Model Driven和Preparable拦截器 第11章 持久...

    Strut2.0 与AJAX（第一部分）

    Strut2.0 与AJAX（第一部分），一本很好的学习struts与AJAX的书籍

Magicbox
Global site tag (gtag.js) - Google Analytics