关于在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()对页面进行操作。（略..看代码）

=====================================================================

结束。

　　

　

　

时间： 2024-07-31 15:34:33

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

ajax技术的背景

不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行.而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用.遗憾的是,不知道出于什么想法,当时微软发明了ajax的核心技术之后,并没有

在 PHP 中结合 Ajax 技术进行图片上传

前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Ajax 技术. 本例将要实现这样的效果:当用户选择图片,开始上传后,后台上传完成时,随即会显示到当前页面.由于,从开始上传到上传完成,再到图片显示均在一个页面上 完成(从表面上看).所以使用 Ajax 技术是必须的.但如何使用这些操作在一个页面上来完成呢?考虑到这样的情况,当文件开始上传后,便开始打开

AJAX技术在PHP开发中的简单应用

AJAX无疑是2005年炒的最热的Web开发技术之一,当然,这个功劳离不开Google.我只是一个普通开发者,使用AJAX的地方不是特别多,我就简单的把我使用的心得说一下.(本文假设用户已经具有JavaScript.HTML.CSS等基本的Web开发能力) [AJAX介绍] Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法.Web页面不用打断交互流程进行重新加裁,就可以动态地更新.使用Ajax,用户可以创建接近本地桌面应用的直接.高可用.更丰富.更动态的Web用户界面. 异步J

.net中对象序列化技术浅谈

.net中对象序列化技术浅谈 2009-03-11 阅读2756评论2 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储和传输数 据.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象.反之,反序列化根据流重新构造对象.此外还可以将对象序列化后保存到本地,再次运行的时候可以从本地文件 中“恢复”对象到序列化之前的状态.在.net中有提供了几种序列化的方式:二进制序列化

ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动

今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新]的[异步]通讯技术, 说白了就是局部刷新. 二.ajax的原理如下图 附上ajax与服务器之间的几种状态,但 4是所有浏览器都支持的的 三.ajax包含的技术如下图 四.ajax开发步骤 步一:创建ajax对象,例如:ajax = createAjax(); 步二:开启异步对象:例如:ajax.o

jQuery学习笔记10：Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

Web应用程序开发，基于Ajax技术的JavaScript树形控件

感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项. 目前市场上常见的JavaScript框架及组件库中均包含自己的树形控件,例如jQuery.Dojo.YUI.Ext JS等,还有一些独立的树形控件,例如dhtmlxTree等,这些树形控件完美的解决了层次数据的展示问题. 展示离不开数据,树形控件主要

Ajax技术详解

Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpRequest构造函数,它定义了用脚本操纵HTTP的API. XMLHttpRequest构造函数:每new一个XMLHttpRequest构造函数返回的对象都表示一个独立的请求/响应对,并且这个对象的属性和方法允许指定请求细节和提取响应数据.需要注意的是当你重用已存在的XMLHttpRequest,

JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法（让你真正理解ajax）

ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行更新. ajax效果的一个样例: 区域为空的时候,维护人情况: 选了一个区域后的情况:(选 舒城县 联带出来的维护人员 小刘) 一.原生态的js实现 XMLHttpRequest 是 AJAX 的基础 XMLHttpRequest 对象 全部现代浏览器均支持 X