AJAX+struts实现无刷新分页

 昨天朋友说要实现局部刷新列表，开始没明白啥意思，后来才知道原来是一个页面上有个显示列表，还有其他的东西，想实现只刷新列表的功能。

今天差了点资料，于是用AJAX的特性实现了这个功能。我总觉得AJAX和JSP结合的资料很少，可能是我没找到，不管怎么样，经过了一下午的研究终于得到一点收获。

--------------------list.jsp---------------------------

<% ... @ page language="java" pageEncoding="gbk" %>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
  < head >
   < script  type ="text/javascript" > ...
 function changepage(cp)...{
 if(!cp)...{
  cp=1;
  
 }
  
 var key=document.all.key.value;
 
 var xmlhttp;
   if (window.ActiveXObject) ...{
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }else if(window.XMLHttpRequest)  ...{
      xmlhttp=new XMLHttpRequest();
   }
   if (xmlhttp) ...{
        xmlhttp.onreadystatechange=function () ...{
                if(xmlhttp.readyState==4)  ...{
             if(xmlhttp.status==200)  ...{
                   var yy=unescape(xmlhttp.responseText);
                
                   document.getElementById("list").innerHTML=yy;
                }else ...{
                     alert("error");
                }
          }
              } 
           xmlhttp.open("post","list.do?show=1&cp="+cp+"&key="+key);
           xmlhttp.send(null);
    }             
 }
  </ script >
  </ head >
  < body  onload ="changepage(1)" >
  < input  type ="text"  name ="key" >< input  type ="button"  value ="查询"  onclick ="changepage(1)" >
   < div  id =list ></ div >
   </ body >
</ html >

----------------------ListAction----------------------------

 

/**/ /*
 * Generated by MyEclipse Struts
 * Template path: templates/java/JavaClass.vtl
 */
package  xxn.web.action;

import  java.io.IOException;
import  java.io.PrintWriter;

import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;

import  org.apache.struts.action.Action;
import  org.apache.struts.action.ActionForm;
import  org.apache.struts.action.ActionForward;
import  org.apache.struts.action.ActionMapping;

import  xxn.dao.UserDAO;
import  xxn.model.User;
import  xxn.web.form.ListForm;

/** */ /**
 * MyEclipse Struts Creation date: 12-28-2007
 *
 * XDoclet definition:
 *
 * @struts.action path="/list" name="listForm" input="/form/list.jsp"
 *                scope="request" validate="true"
 */
public   class  ListAction  extends  Action  ... {
 /**//*
  * Generated Methods
  */

 /** *//**
  * Method execute
  *
  * @param mapping
  * @param form
  * @param request
  * @param response
  * @return ActionForward
  */
 public ActionForward execute(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) ...{
  ListForm listForm = (ListForm) form;// TODO Auto-generated method stub
   response.setContentType("text/xml");
      response.setCharacterEncoding("GBk");
  if ("1".equals(request.getParameter("show"))) ...{
   int ps = 10;
   int cp = Integer.parseInt(request.getParameter("cp"));
   String keystring=request.getParameter("key");
   System.out.println(keystring);
   System.out.println(cp);
   UserDAO ud = new UserDAO();
   User[] u = ud.getList(cp, ps,keystring);
   StringBuffer s = new StringBuffer();

   try ...{
    PrintWriter out = response.getWriter();
    s.append("<table bgcolor=#400040 width=80%>");
    s.append("<tr>");
    s.append("<td bgcolor=#ffffff align=center>姓名</td>");
    s.append("<td bgcolor=#ffffff align=center>城市</td>");
    s.append("</tr>");
    for (int i = 0; i < u.length; i++) ...{
     s.append("<tr>");
     s.append("<td bgcolor=#ffffff align=center>" + u[i].getName() + "</td>");
     s.append("<td bgcolor=#ffffff align=center>" + u[i].getCity() + "</td>");
     s.append("</tr>");
    }
    int last=10;
    int up=(cp-1>1)?cp-1:1;
    int next=(cp+1<last)?cp+1:last;
    s.append("<tr>");
    if(cp==1)...{
     s.append("<td bgcolor=#ffffff align=center colspan=2>首页&nbsp;&nbsp;");
     s.append("上一页&nbsp;&nbsp;");
    }else...{
     s.append("<td bgcolor=#ffffff align=center colspan=2><a href=javascript:changepage(1)>首页</a>&nbsp;&nbsp;");
     s.append("<a href=javascript:changepage("+up+") >上一页</a>&nbsp;&nbsp;");
    }
    if(cp==last)...{
     s.append("下一页 &nbsp;&nbsp;");
     s.append("尾页</td>");
    }else...{
     s.append("<a href=javascript:changepage("+next+")>下一页</a> &nbsp;&nbsp;");
     s.append("<a href=javascript:changepage("+last+")>尾页</a></td>");
    }
    s.append("</tr>");
    s.append("</table>");
    out.print(s.toString());
   } catch (IOException e) ...{
    // TODO Auto-generated catch block
    e.printStackTrace();
   }

   return null;
  } else ...{
   
   return mapping.getInputForward();
  }
 }
}

 

总结：

1.其实不是太难，只是要了解AJAX的知识。

2.做这样的程序肯定遇到转码问题。解决办法就是统一字符集：

  服务器端：    response.setContentType("text/xml");
                       response.setCharacterEncoding("GBk");

  客户端：

                        <%@ page language="java" pageEncoding="gbk"%>