ajax实现网页的局部刷新

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

从页面到ajax函数的运行的大致思路：页面点击事件，触发 xmlHttp.open("post", url, true)函数的执行。通过web.xml的配置的servlet-mapping,url所附带的参数会被处理的servlet类接收，此类中可进行数据库的查询，并将查询结果以xml文件的格式保存下来，页面会以解析xml文件将值传到前台，完成了局部刷新的功能。

1.mysql创建的数据库表的字段及相对应的javabean.(可使用hibernate框架构建user数据库)

技术分享

user.java

public class User implements java.io.Serializable {

// Fields

private Integer id;
private String name;
private String password;
private String power;
private Timestamp dtime;

// Constructors

/** default constructor */
public User() {
}

/** minimal constructor */
public User(Timestamp dtime) {
this.dtime = dtime;
}

/** full constructor */
public User(String name, String password, String power, Timestamp dtime) {
this.name = name;
this.password = password;
this.power = power;
this.dtime = dtime;
}

// Property accessors

public Integer getId() {
return this.id;
}

public void setId(Integer id) {
this.id = id;
}

public String getName() {
return this.name;
}

public void setName(String name) {
this.name = name;
}

public String getPassword() {
return this.password;
}

public void setPassword(String password) {
this.password = password;
}

public String getPower() {
return this.power;
}

public void setPower(String power) {
this.power = power;
}

public Timestamp getDtime() {
return this.dtime;
}

public void setDtime(Timestamp dtime) {
this.dtime = dtime;
}

}

2.执行页面点击的javascript函数

var xmlHttp;
var musicTotal;

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

function delUser() {
createXMLHttpRequest();
var url = "delU";
xmlHttp.open("post", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}

function delArc() {
createXMLHttpRequest();
uId=getCheckboxItem();
alert(uId);
var url = "delU?uId="+uId;
xmlHttp.open("post", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}


function validate() {
createXMLHttpRequest();
// mId=getCheckboxItem();
var url = "delU";
xmlHttp.open("post", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}

var userTotal,musicTotal;
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var xmlDoc=xmlHttp.responseXML;
var str;
var show="";
var yan=xmlDoc.getElementsByTagName("content");
userTotal=yan.length;
show+="<form name=formUMM id=formUMM><table width=98% border=0 cellpadding=2 cellspacing=1 bgcolor=#D1DDAA align=center ><tr bgcolor=#E7E7E7><td height=24 colspan=10 background=skin/images/tbg.gif> 用户信息 </td></tr><tr align=center bgcolor=#FAFAF1 height=22><td width=9%>ID</td><td width=6%>选择</td><td width=30%>用户名</td><td width=15%>注册时间</td><td width=10%>密码</td><td width=10%>权限</td><td width=30%>操作</td></tr>";
for(var i=0;i<yan.length;i++){
var y=yan[i];
var id=y.childNodes[0].firstChild.data;
var name=y.childNodes[1].firstChild.data;
var password=y.childNodes[2].firstChild.data;
var power=y.childNodes[3].firstChild.data;
var dTime=y.childNodes[4].firstChild.data;
show+="<tr align=center bgcolor=#FFFFFF onMouseMove=javascript:this.bgColor=‘#FCFDEE‘; onMouseOut=javascript:this.bgColor=‘#FFFFFF‘; height=22 ><td>"+id+"</td><td><input name=userId type=checkbox id=userId value=‘"+id+"‘ class=np></td><td align=center>"+name+"</td><td>"+dTime+"</td><td>"+password+"</td><td>"+power+"</td><td><a href=101>编辑</a> | <a href=101>预览</a></td></tr>";
}
show+="<tr bgcolor=#FAFAF1><td height=28 colspan=10> <input type=button value=‘全选‘ onclick=‘selAll()‘ id="+id+"><input type=button value=‘取消‘ onClick=‘noSelAll()‘><input type=button value=‘删除‘ onClick=‘delArc()‘>"
+"</td></tr><tr align=right bgcolor=#EEF4EA><td height=36 colspan=10 align=center></td></tr></table></form><table width=98% border=0 cellpadding=2 cellspacing=1 bgcolor=#D1DDAA align=center style=margin-top:8px><tr bgcolor=#E7E7E7 height=52 colspan=10 background=skin/images/tbg.gif><td style=font-size:18px align=center>用户总人数："+userTotal+"</td></tr></table>";
setMessage(show);
}
}
}

function setMessage(message) {
var messageArea = document.getElementById("dateMessage");
messageArea.innerHTML =message;
}
</script>

<body>
<h1>Ajax Validation Example</h1>
Birth date: <input type="button" size="10" id="birthDate" value="提交" onclick="validate();"/>
<div id="dateMessage"></div>
</body>

3.配置web.xml,创建servlet类

web.xml

<servlet>
<servlet-name>delUser</servlet-name>
<servlet-class>servlet.delUser</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>delUser</servlet-name>
<url-pattern>/delU</url-pattern>
</servlet-mapping>

delUser.java

public class delUser extends HttpServlet {

/**
*
*/
private static final long serialVersionUID = 1L;
public void init( ServletConfig config) throws ServletException {
super.init(config);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/xml"); // 像这样设置返回的类型。

   PrintWriter out = response.getWriter();
   userDao ud=new userDao();
   String uId=request.getParameter("uId");
if(uId!=null){
String s[]=uId.split(",");
for(int i=0;i<s.length;i++){
   ud.delete(Integer.parseInt(s[i]));
}
}
   // System.out.println(request.getParameter("uId"));
String sql="select * from user";

   out.println("<?xml version=‘1.0‘ encoding=‘utf-8‘?>");
   out.println("<contents>");
   for(int i=0;i<ud.allUser(sql).size();i++){
   User u=(User)ud.allUser(sql).get(i);
   out.println("<content>");
   out.println("<id>"+u.getId()+"</id>");
   out.println("<name>"+u.getName()+"</name>");
   out.println("<password>"+u.getPassword()+"</password>");
   out.println("<power>"+u.getPower()+"</power>");
   out.println("<dTime>"+u.getDtime()+"</dTime>");
   out.println("</content>");
   }
   out.println("</contents>");
}

}