It is not difficult to display a progress bar without refreshing a page on a webpage. However, if the progress bar accurately reflects the execution progress of the current transaction or complex logic, this is not an easy task. Currently, Ajax technology is popular. Therefore, the authors of this article want to use ajax to implement the accurate progress bar on the Web page to help readers.
First of all, you should think about a problem. If complex transactions or transaction logic are not run in the thread mode, it is impossible to skip complicated transactions to display the processing progress during Java running, therefore, we naturally think of complex transactions or business logic using multiple threads.
Another problem is that transaction processing requires a series of parameter information on the Web page. It seems easy to think about how to obtain these parameters. Just pass an httpservletrequest.
To make the progress bar public, all complex transaction processing should implement the same interface or abstract class. Here I use an interface, as shown below:
Public interface iprogressbar {
Public void execute (httpservletrequest req, string pbid); // execute complex transactions
}
Use an abstract class that implements multithreading as follows:
Public abstract class implements actprogressbar extends timertask implements iprogressbar {
Private httpservletrequest request;
Private string pbid;
Public abstractprogressbar (){
}
// The subclass 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;
}
}
Inconvenience caused by design to specific projects Code Here I wrote another test class, that is, the class for executing complex transaction processing, as follows:
Public class testpb extends actprogressbar {
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, 0, 1 );
// Simulate large transactions
For (INT I = 0; I <300; I ++ ){
Dbutils.exe cuteupdate (SQL, new object [] {New INTEGER (I )});
// Control the progress
PB. stepit ();
}
}
}
Then, the Ajax technology is used to implement the refreshing progress bar of the Web page. The Code is as follows:
<% @ Page contenttype = "text/html; charset = UTF-8" %>
<HTML>
<Head>
<Title> progress bar test of the refreshing page </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 "; // blogcn. Pb. Imp. testpb is the implementation class of 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>
</Head>
<Body>
<Input type = "button" value = "execute 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>
</Html>
The whole page will not be refreshed.
