跟阿根一起学Java Web开发二：使用Ajax技术及XML与JSON实现输出

最新推荐文章于 2020-12-27 00:39:02 发布

原创最新推荐文章于 2020-12-27 00:39:02 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JSPGen #Ajax #JSON #Java #Web

JSPGen教程专栏收录该内容

6 篇文章

订阅专栏

现在B/S结构的系统使用Ajax技术是再寻常不过的了。今天我们就来探讨下在JSPGenSDF第四版中：如何使用Ajax技术、如何输出XML文件及JSON格式数据输出。

如何搭建一个最基础的JSPGenSDF项目，请参考：http://blog.youkuaiyun.com/jspgen/article/details/30825879

技术交流QQ群：12349848

一、基础介绍

Ajax：一种创建交互式应用的网页开发技术，在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
XML：一种扩展性标识语言，属文件格式，在互联网应用中常用于多类型数据文件传输。
JSON：一种轻量级的数据交换格式，纯文本型。

作为数据传输方面，JSON比XML更具优势：
1、XML文件庞大, 格式复杂, 传输占用带宽；JSON数据格式比较简单, 易于读写,占用带宽小。
2、XML文件服务端和客户端都需要花费大量代码来解析XML,异常复杂、不容易维护；JSON服务端和客户端均易于解析这种数据格式。

JSPGenSDF第四版对Ajax有很好的支持，服务端均可直接输出XML文件及JSON数据格式，项目使用中我们可以根据业务情况任选一种数据传输格式。代码实现方面，我们看下面具体的例子。

二、测试代码

A、AjaxAction.java

Ajax动作：

package jspgen.action;
import grapes.Dates;
import grapes.Files;
import grapes.Grapes;

import java.io.File;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
 * Action类：Ajax 演示
 * 
 * @author JSPGen
 * @copyright (c) JSPGen.com
 * @created 2014年06月
 * @email jspgen@163.com
 * @address www.jspgen.com
 */
public class AjaxAction extends Action {
    /**
     * 默认方法
     */
    @Override
    public String execute() {
        String type = getParameter("type");
        if(type != null && "json".equals(type)) {
            // JSON输出
            /*
            // 第一种方式
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("name", getParameter("name"));
            map.put("name", getParameter("description"));
            return json(true, map);
            */
            // 第二种方式
           String message = "来自服务端，" + getParameter("name") + " " + getParameter("description");
          return json(true, message);
        } else {
            // 拼装xml字符串
            String xmlStr = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"
                            +"<root>"
                            +"  <name>"+getParameter("name")+"</name>"
                            +"  <description>"+getParameter("description")+"</description>"
                            +"</root>";
            return xml(xmlStr);
        }
    }
}

注意：JSPGenSDF第四版中对JSON数据输出进行了调整，JSON输出包含的必备属性有：status、message、store，分别对应于：操作状态、操作消息(含错误信息)、数据集合(一般用于对象属性输出)，效果图如下：

B、testAjax.html

Ajax调用页面：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Ajax</title>
</head>
<body>
<h2>Ajax Test</h2>
<a href="javascript:void(0);" onclick="testAjax();">读取JSON数据</a>
<a href="/jspgensdf/ajax.gen?type=xml&name=JSPGener&description=Hello!" target="_blank">输出XML文件</a><br /><br />
<script type="text/javascript" src="/jspgensdf/static/js/jquery.js"></script>
<script type="text/javascript">
function testAjax(){
    $.ajax({
        type: 'POST',
        url: '/jspgensdf/ajax.gen?type=json',
        data: {name:'JSPGener', description:'好嚣张！'},
        dataType: 'json',
        // 请求成功后触发
        success: function (result) {
            // {'status':'false', 'message':'message'}
            if (result.status == true) {
                alert('成功信息：'+result.message);
            }else{
                alert('错误信息：'+result.message);
            }
        },
        // 请求失败遇到异常触发
        error: function (xhr, status, error) {
            alert(status);
        }
    });
}
</script>
</body>
</html>