The implementation of the page without refreshing the progress bar display is not a very troublesome thing, but if the progress bar to accurately reflect the current transaction or complex logic execution progress, then it is not an easy thing, the current Ajax technology popular, so the author think through Ajax to achieve the Web page accurate progress bar, to 銄 readers.
First, you should think of a problem, complex transaction or transaction logic if not run in a thread, run in the Java runtime can not skip complex transactions to process the progress display, so we naturally think of complex transactions or business logic with multi-threaded implementation.
Think of another problem, the transaction should need a series of parameter information on the Web page, then how to get these parameters, it seems easy to think, pass a httpservletrequest past can be.
For the progress bar to be common, all complex transactions should implement the same interface or abstract class, I use an interface here, as follows:
Public interface Iprogressbar {
public void execute (httpservletrequest req,string pbid);//Perform complex transactions
}
Use an abstract class that implements multithreading, as follows:
Public abstract class Abstractprogressbar extends TimerTask implements Iprogressbar {
private HttpServletRequest request;
Private String pbid;
Public Abstractprogressbar () {
}
Subclasses must overload this function
public abstract void Execute (httpservletrequest req, String pbid);
public void Run () {
Execute (request,pbid);
}
public void Setrequest (HttpServletRequest req) {
This.request=req;
}
public void Setpbid (String pbid) {
This.pbid=pbid;
}
}
Design to specific project inconvenient to give the code, here I also wrote a test class, that is, the execution of complex transaction class, as follows:
public class TESTPB extends abstractprogressbar{
public void execute (httpservletrequest req, String pbid) {
String sql= "INSERT into temp_table (IDX) VALUES (?)";
int Pid=integer.parseint (pbid);
ProgressBar pb=new ProgressBar (pid,300,0,1);
Simulating large transactions
for (int i=0;i<300;i++) {
Dbutils.executeupdate (sql,new object[]{new Integer (i)});
Control progress
Pb.stepit ();
}
}
}
Then using AJAX technology to implement the Web page without the Refresh progress bar implementation, the code is as follows:
<%@ page contenttype= "Text/html;charset=utf-8"%>
<title> No Refresh page progress bar test </title>
<style type= "Text/css" >
<!--
BODY {Overflow:scroll;overflow-x:hidden}
. DEK {position:absolute; Visibility:hidden; z-index:200;}
-
</STYLE>
<script type= "Text/javascript" >
var xmlHttp;
var pbid;//progress bar ID
function Createxmlhttprequest () {
if (window. ActiveXObject) {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest) {
XmlHttp = new XMLHttpRequest ();
}
}
function Checkdiv () {
var Progress_bar = document.getElementById ("ProgressBar");
if (progress_bar.style.visibility! = "visible") {
progress_bar.style.visibility = "visible";
}else
{
progress_bar.style.visibility = "hidden";
}
}
function Go () {
Createxmlhttprequest ();
Checkdiv ();
var url = ".. /SERVLET/PROGRESSBARSERVLET?TASK=CREATE&IMPCLS=BLOGCN.PB.IMP.TESTPB ";//Where Blogcn.pb.imp.TestPB is the implementation class for complex transactions
var button = document.getElementById ("Go");
Button.disabled = true;
Xmlhttp.open ("GET", url, True);
Xmlhttp.setrequestheader ("Content-type", "text/xml;charset=gb2312");
Xmlhttp.onreadystatechange = Gocallback;
Xmlhttp.send (NULL);
}
function Gocallback () {
if (xmlhttp.readystate==4)
{
if (xmlhttp.status==200) {
Pbid=xmlhttp.responsexml.getelementsbytagname ("Pbid") [0].firstchild.data;
SetTimeout ("Pollserver ()", 2000);
}
}
}
function Pollserver () {
Createxmlhttprequest ();
var url = ".. /servlet/progressbarservlet?task=poll&pbid= "+PBID;
Xmlhttp.open ("GET", url, True);
Xmlhttp.onreadystatechange = Pollcallback;
Xmlhttp.send (NULL);
}
function Pollcallback () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
var percent_complete =
Xmlhttp.responsexml
. getElementsByTagName ("percent") [0].firstchild.data;
if (Percent_complete < 100) {
Pb1.pos=percent_complete;
PB1. Update ();
SetTimeout ("Pollserver ()", 2000);
} else {
pb1.pos=100;
PB1. Update ();
document.getElementById ("Go"). Disabled = false;
}
}
}
}
</script>
<body>
<input type= "button" value= "Perform large transaction" id= "Go" onclick= "Go ();" />
<div id= "ProgressBar" >
<script language= "JavaScript" >
var pb1=new tprogressbar ("myPB1", 220,180,375,20);
PB1. Create ();
piratecount=100;
Pid=piratecount-2;
PB1. Reposition ();
Pb1.max=pid;
</script>
</body>
The entire page will not have any refreshes.
