Struts+Spring+Hibernate项目整合AJAX+JSON

1、什么是AJAX

AJAX是 “Asynchronous JavaScript and XML” 的简称，即异步的JavaScript和XML。

所谓异步，就是提交一个请求不必等待响应回来，可以直接去做其他事情。同步则是提交请求必须等待结果返回才能进行下一步操作。同时，异步能够局部刷新页面，比如网站常见的输入用户名后的局部显示该用户名是否可用的信息，这种可以更好地提高用户体验。

接下来我们回顾一下AJAX的基本用法：
核心对象 XMLHttpRequest，它是浏览器内部的对象，可以用来发送HTTP请求和接收HTTP响应。它的实现根据浏览器可能有不同，一般创建需要进行条件判断
if(window.ActiveObject) { 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
}

XMLHttpRequest的重要属性
  • readyState  ——  返回当前请求状态，用0-5表示
  • status  ——  返回当前服务器的状态，用数字（状态码）表示，如200、500、404 etc.
  • statusText ——  功能同status，不同点在于它以文本的形式进行表示
  • onreadystatechange  ——  事件触发器，readyState/status发生变化会触发该项
  • responseText  ——  接收服务器端返回的文本内容，以字符串形式存在
  • responseXML  ——  接收服务器响应，以XML存在，可以解析为一个DOM对象

XMLHttpRequest的重要方法
  • open() --> e.g. open("GET", url, true)
  • send() --> e.g. send(null)

下面是一个简单例子

<script type="text/javascript"> 
var xmlHttp;

//创建XMLHttpRequest对象
function createXMLHttpRequest() {
    if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
    } else if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

function validate() {
    //todo 编写Ajax校验，发送请求和处理，并且显示信息
    //创建createXMLRequest对象
    createXMLHttpRequest();
    //使用DOM，得到id值是username的域
    var username = document.getElementById("username");
    var url = "ValidateUsernameCtl?username=" + escape(username.value);
    //向服务器端的ValidateUsernameCtl发送异步请求
    xmlHttp.open("GET", url, true);
    xmlHttp.onreadystatechange = callback;
    xmlHttp.send(null);
}

function callback() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            //以responseXML属性，接收服务器端返回的xml文件，使用DOM进行解析
            var msg = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
            var passed = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
            setMessage(msg, passed);
        }
    }
}

function setMessage(message, passed) {
    var validateMessage = document.getElementById("usernamemsg");
    var fontColor = "red";
    if(passed == "true") {
        fontColor = "green";
    }
    //对<div name="usernmaesg">的地方设置其间的代码innerHTML为指定代码
    validateMessage.innerHTML = "<font color=" + fontColor + ">" + message + "</font>";
}
</script>


2、JSON替代XML的优势

在标题1中我们提到的AJAX中X实际上是XML，这里我们要换成JSON，为什么要采取JSON呢？
1）数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
2）易于解析，客户端JavaScript可以简单的通过eval_r()进行JSON数据的读取。

另外，JSON是趋势，我们要跟着大势走，顺水推舟，不要没事就去逆流而上。


3、SSH整合AJAX（JSON）的步骤

网上类似的博客几乎都是相同的在不停转载，这个跟我参考的那位网友的感觉是一样，参考的帖子很少，于是自己也鼓捣了很久才解决。Struts2实际上有多种方式实现AJAX，可以参考博文《Struts 2三种方式实现Ajax》，这里为了更好地结合JSON，采用了struts2-json插件的方式。

3.1 配置准备

3.1.1 添加jar包

  • 添加struts2-json-plugin-x.x.x.x.jar，用来支持struts和ajax-json的集成
如果你是用的Maven方式，你可以直接添加依赖
<!--struts + ajax json //tips struts 整合 ajax json--> 
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-json-plugin</artifactId>
            <version>2.3.16.1</version>
        </dependency>

  • 添加org.json.jar，用来解析json
如果你是用的Maven方式，你可以直接添加依赖
<!--JSON--> 
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20160810</version>
        </dependency>

3.1.2 配置struts.xml

<package name="ajax" namespace="/ajax" extends="json-default" > 
        <action name="ajaxAction" class="ajaxAction">
            <!-- 返回类型为json-->
            <result name="register" type="json">
                <!--tips 参数root的含义-->
                <param name="root">message</param>
            </result>
        </action>
</package>
重点注意的是：
  • 这里不再继承struts-default，而是json-default（这个文件在我们引入的struts-json插件包中就有配置）
  • type需要修改为json
  • <param name="root">message</param> 这里我们单独来叙述

这里最难理解的大概就是这个<param name="root">message</param>了，下面来简单说说到底是什么意思（参考链接：JSON中result的root属性）：
所谓root的含义，是指返回的json数据为指定的对象（Action中作为属性的那个类），例如我的源码中AjaxAction中为Message message，将返回和Message对等的json对象。如果没有指定root属性，则默认使用Action作为返回的json对象。

是否使用Action作为返回的json数据的根，区别如下： 
例如有Action如下，含两个属性String message、UserInfo userInfo：

public class JsonJqueryStruts2Action extends ActionSupport {  
　　private String message; //使用json返回单个值 
　　private UserInfo userInfo; //使用json返回对象 
　　... ... 
}

result中使用了root参数（<param name="root">userInfo</param>）后返回的json数据： 

{"userInfo":[ 
　　{"userId":"Patrick", "userName":"123456"}  
　　]}

result中没有设置root参数返回Action中的json数据： 

{"data":[ 
　　{"userInfo":[ {"userId":"Patrick", "userName":"123456"} ] },  
　　{"message":"testMesssageData"} 
　　]}


3.2 编写Action

package com.zker.action;
 
import com.opensymphony.xwork2.ActionSupport;
import com.zker.common.util.Message;
import com.zker.common.util.SpringContextUtils;
import com.zker.dao.user.UserDao;
import org.json.JSONObject;

import java.io.IOException;


public class AjaxAction extends ActionSupport {
    /**用来接受封装的参数 LoginName 用户名*/
    String loginName;

    /**封装信息，为了测试JSON刻意做成简单的类*/
    Message message = new Message();

    /**用来返回用于js接收*/
    String result;

    //tips 要有getter&setter，否则$post的param参数传递不过来
    public String getLoginName() {
        return loginName;
    }

    public void setLoginName(String loginName) {
        this.loginName = loginName;
    }

    public Message getMessage() {
        return message;
    }

    public void setMessage(Message message) {
        this.message = message;
    }

    public String getResult() {
        return result;
    }

    public void setResult(String result) {
        this.result = result;
    }

    /**
     * 利用Ajax实现注册的用户名重复性校验
     * @return
     */
    public String ajaxRegister() throws IOException {
        //tips 如何手动取出容器中的bean?答案如下
        UserDao userDao = (UserDao)SpringContextUtils.context.getBean("userDao");
        if (userDao.findAdminByLoginName(loginName) != null
                || userDao.findUserByLoginName(loginName) != null) {
            message.setMsg("用户名已存在");
            message.setStatus(false);
        } else {
            message.setMsg("用户名可以注册");
            message.setStatus(true);
        }

        /*
        //JSON-String转换 obj -> jsonStr
        //当struts-login.xml中root为result时，此处才需要解开
        this.result = JSONObject.wrap(message).toString();
        */

        return "register";
    }
}
这里为了验证AJAX+JSON，故意采取的建立一个Message类来传递信息，多此一举只为学习，实际操作请注意。其他信息详见代码，这里不做具体展开。

3.3 编写JS

<!--Ajax + JSON-->
    $(document).ready( function() { 
        //使用 Ajax 的方式 判断登录
        $("#loginName").blur( function() {
            var url = "/ajax/ajaxAction!ajaxRegister";
            var params = {loginName : $("#loginName").val()};

            /*method1 <param name="root">result</param>
            $.post(
                    url,  //服务器要接受的url
                    params,  //传递的参数
                    function validateLoginName(result){ //服务器返回后执行的函数 参数msg保存的是服务器发送到客户端的数据
                        //alert("服务器端返回的data --> " + result);
                        var msgObj = eval("(" + result + ")"); //jsonStr -> jsObj(jsonObj)
                        var passed = msgObj.status;
                        setMessage(msgObj.msg, passed);
                    },
                    'json' //数据传递的类型  json
            );
            */

            /*method2 <param name="root">message</param> */
            $.post(
                    url,  //服务器要接受的url
                    params,  //传递的参数
                    function validateLoginName(message){ //服务器返回后执行的函数 参数是服务器发送到客户端的数据
                        var msg = message.msg;
                        var passed = message.status;
                        setMessage(msg, passed);
                    },
                    'json' //数据传递的类型  json
            );

            function setMessage(message, passed) {
                var validateMessage = document.getElementById("loginNameMsg");
                var fontColor = "red";
                if(passed) {
                    fontColor = "green";
                }
                //对<div name="loginNameMsg">的地方设置其间的代码innerHTML为指定代码
                validateMessage.innerHTML = "<font color=" + fontColor + ">"
                        + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                        + message + "</font>";
            }
        });
    }); 
<div id="loginNameMsg"></div> 
<div class="login_sr">账号：<s:textfield cssClass="login_inputYhm" name="sysUser.loginName" id="loginName" />
这里值得一提的就是JQuery的$.post()方法，原型是ajax()，通过 HTTP 请求加载远程数据，返回其创建的 XMLHttpRequest 对象。
$.post()是其简单易用的高层实现，详见 jQuery ajax - post() 方法、jQuery ajax - ajax() 方法、jQuery 参考手册 - Ajax

至此，已经OK。 


4、参考链接


【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/deng-cc/p/6343973.html