首页 > 编程语言 > 详细

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

时间:2017-01-23 15:34:44      阅读:222      评论:0      收藏:0      [点我收藏+]

1、什么是AJAX

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

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

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

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)

下面是一个简单例子
  1. <script type="text/javascript">
  2. var xmlHttp;
  3. //创建XMLHttpRequest对象
  4. function createXMLHttpRequest() {
  5. if(window.ActiveXObject) {
  6. xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
  7. } else if(window.XMLHttpRequest) {
  8. xmlHttp = new XMLHttpRequest();
  9. }
  10. }
  11. function validate() {
  12. //todo 编写Ajax校验,发送请求和处理,并且显示信息
  13. //创建createXMLRequest对象
  14. createXMLHttpRequest();
  15. //使用DOM,得到id值是username的域
  16. var username = document.getElementById("username");
  17. var url = "ValidateUsernameCtl?username=" + escape(username.value);
  18. //向服务器端的ValidateUsernameCtl发送异步请求
  19. xmlHttp.open("GET", url, true);
  20. xmlHttp.onreadystatechange = callback;
  21. xmlHttp.send(null);
  22. }
  23. function callback() {
  24. if(xmlHttp.readyState == 4) {
  25. if(xmlHttp.status == 200) {
  26. //以responseXML属性,接收服务器端返回的xml文件,使用DOM进行解析
  27. var msg = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
  28. var passed = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
  29. setMessage(msg, passed);
  30. }
  31. }
  32. }
  33. function setMessage(message, passed) {
  34. var validateMessage = document.getElementById("usernamemsg");
  35. var fontColor = "red";
  36. if(passed == "true") {
  37. fontColor = "green";
  38. }
  39. //对<div name="usernmaesg">的地方设置其间的代码innerHTML为指定代码
  40. validateMessage.innerHTML = "<font color=" + fontColor + ">" + message + "</font>";
  41. }
  42. </script>

更多细节这里不做展开,请参考笔记:



2、JSON替代XML的优势

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

另外,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方式,你可以直接添加依赖
  1. <!--struts + ajax json //tips struts 整合 ajax json-->
  2. <dependency>
  3. <groupId>org.apache.struts</groupId>
  4. <artifactId>struts2-json-plugin</artifactId>
  5. <version>2.3.16.1</version>
  6. </dependency>

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


3.1.2 配置struts.xml

  1. <package name="ajax" namespace="/ajax" extends="json-default" >
  2. <action name="ajaxAction" class="ajaxAction">
  3. <!-- 返回类型为json-->
  4. <result name="register" type="json">
  5. <!--tips 参数root的含义-->
  6. <param name="root">message</param>
  7. </result>
  8. </action>
  9. </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
  1. public class JsonJqueryStruts2Action extends ActionSupport {
  2.   private String message; //使用json返回单个值
  3.   private UserInfo userInfo; //使用json返回对象
  4.   ... ...
  5. }

result中使用了root参数后返回的json数据: 
  1. {"userInfo":[
  2.   {"userId":"Patrick", "userName":"123456"}
  3.   ]}

result中没有设置root参数返回Action中的json数据: 
  1. {"data":[
  2.   {"userInfo":[ {"userId":"Patrick", "userName":"123456"} ] },
  3.   {"message":"testMesssageData"}
  4.   ]}


3.2 编写Action

  1. package com.zker.action;
  2. import com.opensymphony.xwork2.ActionSupport;
  3. import com.zker.common.util.Message;
  4. import com.zker.common.util.SpringContextUtils;
  5. import com.zker.dao.user.UserDao;
  6. import org.json.JSONObject;
  7. import java.io.IOException;
  8. public class AjaxAction extends ActionSupport {
  9. /**用来接受封装的参数 LoginName 用户名*/
  10. String loginName;
  11. /**封装信息,为了测试JSON刻意做成简单的类*/
  12. Message message = new Message();
  13. /**用来返回用于js接收*/
  14. String result;
  15. //tips 要有getter&setter,否则$post的param参数传递不过来
  16. public String getLoginName() {
  17. return loginName;
  18. }
  19. public void setLoginName(String loginName) {
  20. this.loginName = loginName;
  21. }
  22. public Message getMessage() {
  23. return message;
  24. }
  25. public void setMessage(Message message) {
  26. this.message = message;
  27. }
  28. public String getResult() {
  29. return result;
  30. }
  31. public void setResult(String result) {
  32. this.result = result;
  33. }
  34. /**
  35. * 利用Ajax实现注册的用户名重复性校验
  36. * @return
  37. */
  38. public String ajaxRegister() throws IOException {
  39. //tips 如何手动取出容器中的bean?答案如下
  40. UserDao userDao = (UserDao)SpringContextUtils.context.getBean("userDao");
  41. if (userDao.findAdminByLoginName(loginName) != null
  42. || userDao.findUserByLoginName(loginName) != null) {
  43. message.setMsg("用户名已存在");
  44. message.setStatus(false);
  45. } else {
  46. message.setMsg("用户名可以注册");
  47. message.setStatus(true);
  48. }
  49. /*
  50. //JSON-String转换 obj -> jsonStr
  51. //当struts-login.xml中root为result时,此处才需要解开
  52. this.result = JSONObject.wrap(message).toString();
  53. */
  54. return "register";
  55. }
  56. }
这里为了验证AJAX+JSON,故意采取的建立一个Message类来传递信息,多此一举只为学习,实际操作请注意。其他信息详见代码,这里不做具体展开。


3.3 编写JS

  1. <!--Ajax + JSON-->
  2. $(document).ready( function() {
  3. //使用 Ajax 的方式 判断登录
  4. $("#loginName").blur( function() {
  5. var url = "/ajax/ajaxAction!ajaxRegister";
  6. var params = {loginName : $("#loginName").val()};
  7. /*method1 <param name="root">result</param>
  8. $.post(
  9. url, //服务器要接受的url
  10. params, //传递的参数
  11. function validateLoginName(result){ //服务器返回后执行的函数 参数msg保存的是服务器发送到客户端的数据
  12. //alert("服务器端返回的data --> " + result);
  13. var msgObj = eval("(" + result + ")"); //jsonStr -> jsObj(jsonObj)
  14. var passed = msgObj.status;
  15. setMessage(msgObj.msg, passed);
  16. },
  17. ‘json‘ //数据传递的类型 json
  18. );
  19. */
  20. /*method2 <param name="root">message</param> */
  21. $.post(
  22. url, //服务器要接受的url
  23. params, //传递的参数
  24. function validateLoginName(message){ //服务器返回后执行的函数 参数是服务器发送到客户端的数据
  25. var msg = message.msg;
  26. var passed = message.status;
  27. setMessage(msg, passed);
  28. },
  29. ‘json‘ //数据传递的类型 json
  30. );
  31. function setMessage(message, passed) {
  32. var validateMessage = document.getElementById("loginNameMsg");
  33. var fontColor = "red";
  34. if(passed) {
  35. fontColor = "green";
  36. }
  37. //对<div name="loginNameMsg">的地方设置其间的代码innerHTML为指定代码
  38. validateMessage.innerHTML = "<font color=" + fontColor + ">"
  39. + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
  40. + message + "</font>";
  41. }
  42. });
  43. });
  1. <div id="loginNameMsg"></div>
  2. <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、源码和参考链接

关于更多详细的代码变动,可以在我的Github中参考具体源码


参考链接:





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

原文:http://www.cnblogs.com/deng-cc/p/6343973.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!