关于在SSH2中使用ajax技术的总结(主要写Struts2和ajax)

浏览数：37 / 时间：2015年06月09日

以下内容是自己理解的，因为还没有看过相关的文章，所以，技术上还是有很大的欠缺。不过这也是自己努力思考得到的，如果有什么更好的建议可以回复我。

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;
    }
}