关于在SSH2中使用ajax技术的总结(主要写Struts2和ajax)
以下内容是自己理解的，因为还没有看过相关的文章，所以，技术上还是有很大的欠缺。不过这也是自己努力思考得到的，如果有什么更好的建议可以回复我。
1. 任务需求： 实现一个包含数据的表格，并且有分页功能。
2. 效果图：（如图一）
（图一）
3. 从全局来理解、分析（暂时不使用JQuery的ajax，只是用JQuery的获取节点操作节点的方法。ajax使用自己写的重构ajax.js）：
当用户点击查询按钮或者点击分页跳转的相关按钮(既首页/上一页/...)的时候，用户就会通过ajax给服务器发送请求，这个请求会被Struts2拦截，然后调用相关的方法，进行查询数据，再将数据以json数组的形式返回到页面，最后ajax调用回调函数对页面的数据进行更改。
大致流程如图二：
（图二）
stuMg.jsp（学生信息管理界面）的页面相关代码如下：
1 <script type="text/javascript" src="js/ajax.js"></script> 2 <script type="text/javascript" src="js/jquery-1.8.0.js"></script> 3 <script type="text/javascript"> 4 function del(id){ 5 if(window.confirm("确定要删除？")){ 6 window.location.href="stu/stu_del.action?id="+id; 7 } 8 } 9 10 function getList(url){ 11 var username = $("#selectTxt").val(); 12 url = url + username; 13 ajax("GET",url,"true","null","json",mycallback); 14 } 15 function mycallback(data){ 16 var html = '<tr><td>总记录：'+data[0].totalRecord+'条</td>'; 17 html = html + '<td>页码：第'+data[0].currentPage+'页/共'+data[0].totalPage+'页</td>'; 18 19 if(data[0].currentPage - 1 >= 1){ 20 html = html + '<td><input type="button" value="首页" onclick="getList(\'/ElectiveSystem/stu/stu_list.action?currentPage=1&username=\')"/></td>'; 21 html = html + '<td><input type="button" value="上一页" onclick="getList(\'/ElectiveSystem/stu/stu_list.action?currentPage='+(data[0].currentPage-1)+'&username=\')"/></td>'; 22 }else{ 23 html = html + '<td><input type="button" value="首页" disabled="false" onclick="getList(\'/ElectiveSystem/stu/stu_list.action?currentPage=1&username=\')"/></td>'; 24 html = html + '<td><input type="button" value="上一页" disabled="false" onclick="getList(\'/ElectiveSystem/stu/stu_list.action?currentPage='+(data[0].currentPage-1)+'&username=\')"/></td>'; 25 } 26 if(data[0].currentPage + 1 <= data[0].totalPage){ 27 html = html + '<td><input type="button" value="下一页" onclick="getList(\'/ElectiveSystem/stu/stu_list.action?currentPage='+(data[0].currentPage+1)+'&username=\')"/></td>'; 28 html = html + '<td><input type="button" value="尾页" onclick="getList(\'/ElectiveSystem/stu/stu_list.action?currentPage='+(data[0].totalPage)+'&username=\')"/></td>'; 29 }else{ 30 html = html + '<td><input type="button" value="下一页" disabled="false" /></td>'; 31 html = html + '<td><input type="button" value="尾页" disabled="false" /></td>'; 32 } 33 html = html + '</tr>'; 34 $("#pagination tr").remove("tr"); 35 $("#pagination").append(html); 36 $("#list tr").remove("tr[id!='tr_title']"); 37 if(data[0].currentPage<1){ 38 $("#list").hide();//隐藏<table> 39 }else{ 40 $("#list").show();//显示<table> 41 for(var i=1;i<data.length;i++){ 42 var html; 43 if(i%2!=0){ 44 html = '<tr class="content" bgcolor="#F7F7F7"><td>'; 45 }else{ 46 html = '<tr class="content" bgcolor="#FFFFFF"><td>'; 47 } 48 html = html + data[i].id+"</td><td>"; 49 html = html + data[i].username+"</td><td>"; 50 html = html + data[i].password+"</td><td>"; 51 html = html + data[i].realName+"</td><td>"; 52 html = html + data[i].stuId+"</td><td>"; 53 html = html + data[i].specialty+"</td>"; 54 html = html + '<td><a href="'+"<c:url value='stu/stu_preEdit.action?id="+data[i].id+"'/>"+'"><input class="edit_btn" type="button" value="修改"/></a><input class="del_btn" type="button" value="删除" onclick="del('+data[i].id+');"/></td></tr>'; 55 $("#list").append(html); 56 } 57 } 58 } 59 60 </script> 61 62 63 </head> 64 <body> 65 <div id="nav"> 66 <img alt="主页" src="images/shouye.png"> 67 <span id="shouyeTxt">主页 / <span id="url">学生信息管理</span> </span> 68 </div> 69 <div id="select"> 70 <input id="selectTxt" name="username" type="text" placeholder="请输入要查询的用户名..."/> 71 <input class="btn" type="button" value="查询" onclick="getList('/ElectiveSystem/stu/stu_list.action?currentPage=1&username=')"/> 72 <a href="<c:url value='admin/stuAdd.jsp'/>"> 73 <input class="btn" type="button" value="添加"/> 74 </a> 75 </div> 76 <table align="left" id="list" border="1" style="display: none;"> 77 78 <tr align="center" class="content" bgcolor="#F7F7F7" id="tr_title"> 79 <th>序号</th> 80 <th>用户名</th> 81 <th>密码</th> 82 <th>真实姓名</th> 83 <th>学号</th> 84 <th>专业</th> 85 <th>操作</th> 86 </tr> 87 </table> 88 <jsp:include page="../commons/pageList.jsp"/> 89 </body>
ajax.js（重构的ajax）：
//创建XMLHttpRequest对象 function createXMLHttpRequest(){ var req; try{ req = new XMLHttpRequest();//支持大部分浏览器 }catch(e){ try{ req = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ req = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } return req; } function ajax(method,url,asyn,params,type,callback){ //获得XMLHttpRequest var xmlHttp = createXMLHttpRequest(); //注册监听 xmlHttp.onreadystatechange = function(){ if(xmlHttp.status == 200 && xmlHttp.readyState == 4){ var data; if("xml" == type){ data = xmlHttp.responseXML; }else if("text" == type){ data = xmlHttp.responseText; }else if("json" == type){ var test = xmlHttp.responseText; data = eval("("+test+")"); } callback(data); } } //打开链接 xmlHttp.open(method,url,asyn); //判断请求方式，如果为post的话，就设置Content-type头信息 if("POST" == method){ xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); } //发送请求 xmlHttp.send(params); }
StuMgAction的执行方法：
public List<Student> findByUsername() { String hql = "from Student where username like ?"; List<Student> list = stuService.findByUsername(hql, "%" + username + "%"); return list; } /** * 获取学生信息列表 */ public String list(){ PrintWriter out = null ; try{ ApplicationContext ac = new ClassPathXmlApplicationContext("classpath:/applicationContext_*.xml"); Pagination pagination = (Pagination) ac.getBean("pagination"); //获取总条数 pagination.setTotalRecord(findByUsername().size()); pagination.setMaxSize(10);//设置每页显示的最大条数 pagination.setCurrentPage(currentPage);//设置当前页 //获取当前页的数据内容 String hql ="from Student where username like ?"; List<Student> stuList = stuService.findByUsername(hql, "%"+username+"%", pagination); List list = new ArrayList(); if(stuList.size()<=0){ pagination.setCurrentPage(0); list.add(0,pagination); }else{ list.add(0, pagination); list.addAll(stuList); } //转换成json数组 JSONArray jsonArray = JSONArray.fromObject(list.toArray()); HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/html;charset=utf-8"); out= response.getWriter(); out.print(jsonArray); // System.out.println(jsonArray); out.flush(); }catch(Exception e){ return "input"; }finally{ out.close(); } return "list"; }
分页栏独立保存一个页面
pagination.jsp
<body> <table id="pagination"> <tr></tr> </table> </body>
Pagination.java 分页对象:
public class Pagination { private Integer totalRecord=0; //总条数 private Integer totalPage=0;//总页数 -->跟总条数会有分歧，所以，不给总页数提供set()方法。总页数=总条数 % 每页最大数 ！=0？总页数+1：总页数 private Integer maxSize=10; //每页最大数 private Integer currentPage=1; //当前页 public Integer getTotalRecord() { return totalRecord; } public Integer getTotalPage() { return totalPage = totalRecord % maxSize==0?totalRecord/maxSize:totalRecord/maxSize+1; } public Integer getMaxSize() { return maxSize; } public Integer getCurrentPage() { return currentPage; } public void setTotalRecord(Integer totalRecord) { this.totalRecord = totalRecord; } public void setMaxSize(Integer maxSize) { this.maxSize = maxSize; } public void setCurrentPage(Integer currentPage) { this.currentPage = currentPage; } }
========接下来稍微细点来讲解===========
4. 细讲：
4.1 stuMg.jsp的作用：
由上面的简单粗暴的解释呢，我们可以知道，stuMg.jsp页面主要是以表格的形式显示从数据库获取得到的数据。其中stuMg.jsp还包含了getList(url)和mycallback(data)方
法getList(url)方法是用来调用ajax.js的ajax()方法的，ajax()方法需要我们给它传入一些值，如：
"GET"-->请求方式;
"url"-->请求地址;
"true"-->是否为异步请求;
"null"-->要传入的参数，如果请求方式为POST的时候一定要写！没有请求参数就写Null,如果请求方式为GET可以不写,写了也传不过去;
"json"-->返回数据的类型;
mycallback-->回调函数。
ajax()在请求成功后，会返回数据，然后根据刚才设定的“返回数据的类型”对数据进行相应的处理。然后把数据传递给callback()方法，让callback()操作stuMg.jsp页面。
4.2 StuMgAction.action：
StuMgAction.action拦截了ajax()请求地址，然后根据struts.xml配置文件来判断选择使用什么方法。在这个例子中，我们是调用了StuMgAction#findByUsername()
和StuMgAction#list()。
StuMgAction#findByUsername()方法通过客户端传递过来的username参数，进行模糊查询，返回list集合。(因为以下有两个list，所以用不同的颜色区分)
StuMgAction#list()方法调用了StuMgAction#findByUsername()方法，来获取list集合，根据list集合的size()方法来获取得到数据的总条数，把该总条数赋值给
Pagination对象。
其中：List<Student> stuList = stuService.findByUsername(hql, "%"+username+"%", pagination);这句代码是说通过业务逻辑层的stuService对象调用
findByUsername(hql,username)的重载方法findByUsername(hql,username,pagination)方法，这个方法比之前多一个参数pagination，主要是用来进行分页查询的。
findByUsername(hql,username,pagination)方法返回了一个list集合。然而我们并不是直接把这个list转换成json数组对象。而是在再创建一个List集合list，给新的list
的索引号为0的进行赋值pagination，因为这样方便我们在stuMg.jsp页面判断返回的数据是否为空，如果为空我们可以隐藏<table>，否则就显示。然后再把list全部
赋给list 。最后才把list转换成json数组对象输出到stuMg.jsp页面。
4.3 mycallback()：
根据action返回来的json数组对象，mycallback()对页面进行操作。（略..看代码）
=====================================================================
结束。
