gjq2267787274的专栏

从页面到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 {// Fieldsprivate 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 accessorspublic 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函数

<script type="text/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>&nbsp;用户信息&nbsp;</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>&nbsp;<input type=button value=’全选’ id="+id+"><input type=button value=’取消’><input type=button value=’删除’>" +"</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>

感受最美的风景。你曾经说，