It is not a very troublesome thing to realize the progress bar display without page refresh in the web page, but if the progress bar can accurately reflect the current transaction or the execution progress of complex logic, then it is not an easy task. The current AJAX technology Popular, so the author of this article tries to use AJAX to realize the accurate progress bar of the web page to attract readers.
First of all, you should think about a problem. If complex transactions or business logic are not run in a threaded manner, it is impossible to skip the complex transactions to process the progress display when running in JAVA. Therefore, it is natural for us to think of using multi-threading for complex transactions or business logic. accomplish.
Thinking about another question, transaction processing should require a series of parameter information on the web page, so how to obtain these parameters? This seems easy to think of, just pass an HttpServletRequest.
In order to share the progress bar, all complex transaction processing should implement the same interface or abstract class. I used an interface here, as follows:
public interface IprogressBar {
public void execute(HttpServletRequest req,String pbid);//Execute complex transactions
}
Use an abstract class to implement multi-threading, as follows:
public abstract class AbstractProgressBar extends TimerTask implements IprogressBar {
private HttpServletRequest request;
private String pbid;
public AbstractProgressBar(){
}
//Subclasses must override 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;
}
}
It is inconvenient to provide the code for the specific project. Here I wrote another test class, which is a class that performs complex transaction processing, 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);
//Simulate large transactions
for(int i=0;i<300;i++){
DbUtils.executeUpdate(sql,new Object[]{new Integer(i)});
//Control progress
pb.stepIt();
}
}
}
Then use AJAX technology to realize the non-refresh progress bar of the web page. 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 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;
}
}
}
}
<input type="button" value="Execute large transactions" 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;