Ajax implements local refresh of Web pages

The general idea of running from page to Ajax function: page Click event, triggering Xmlhttp.open ("post", url, true) function execution. The parameters that are included with the configuration of Web. XML Servlet-mapping,url are received by the Servlet class being processed, which can query the database and save the query results in the format of the XML file, and the page will pass the values to the foreground in parsing the XML file. The function of local refresh is completed.

1.mysql the field of the database table created and the corresponding JavaBean. (The user database can be built using the Hibernate framework)

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 functions that perform page clicks

<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; User Information &nbsp;</td></tr><tr align=center bgcolor= #FAFAF1 height=22><td width=9%>ID</td &GT;&LT;TD width=6%> Select </td><td width=30%> user name </td><td width=15%> registration Time &LT;/TD&GT;&LT;TD width=10%> password </td><td width=10%> permissions </td><td width=30%> operation </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&GT;&LT;/TD&GT;&LT;TD align=center> "+name+" </td><td> "+dtime+" </td><td> "+ Password+ "</td><td>" +power+ "</td><td><a href=101> edit </a> | <a href=101> preview </a></td></tr> ";
}
show+= "<tr bgcolor= #FAFAF1 ><td height=28 colspan=10>&nbsp;<input type=button value= ' Select All ' onclick= ' Selall () ' id= ' +id+ "><input type=button value= ' Cancel ' onclick= ' Noselall () ' ><input type=button value= ' delete ' Onclick= ' Delarc () ' > '
+ "</td></tr><tr align=right bgcolor= #EEF4EA ><td height=36 colspan=10 align=center><!-- Page Flip Code--></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&GT;&LT;TD style=font-size:18px align=center> Total number of users: "+usertotal+" </td></tr></ Table> ";
Setmessage (show);
}
}
}

function setmessage (message) {
var Messagearea = document.getElementById ("Datemessage");
Messagearea.innerhtml =message;
}
</script>

<body>
Birth Date: <input type= "button" size= "ten" id= "BirthDate" value= "Submit" onclick= "Validate ();" />
<div id= "Datemessage" ></div>
</body>

3. Configure Web. XML to create a servlet class

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"); Set the returned type like this.

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


}

4. Running Results

Ajax implements local refresh of Web pages