<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.111cn.net/1999/xhtml">
<Head>
<Style>
# DivProgress {width: 300px; height: 24px; position: relative ;}
# DivProgress div {position: absolute; left: 0; top: 0; height: 24px ;}
# ProgressBg {background-color: # B9F8F9; z-index: 10 ;}
# ProgressText {z-index: 15; text-align: center; width: 100% ;}
</Style>
</Head>
<Body>
<Div id = "divProgress">
<Div id = "progressBg"> </div>
<Div id = "progressText"> </div>
</Div>
<Br/>
<Button onclick = "send ()"> submit data </button>
<Script>
Var t = document. getElementById ("progressText ");
Var bg = document. getElementById ("progressBg ");
Function send (){
T. innerHTML = "loading ...";
Bg. style. width = "0px ";
Var xhr = new window. XMLHttpRequest ();
If (! Window. XMLHttpRequest ){
Try {
Xhr = new window. ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (e ){}
}
Xhr. open ("post", "jsp tutorial? Count = 6 "> http: // localhost: 801/ChunkTest/chunk. jsp? Count = 6 ");
Var oldSize = 0;
Xhr. onreadystatechange = function (){
If (xhr. readyState> 2 ){
Var tmpText = xhr. responseText. substring (oldSize );
OldSize = xhr. responseText. length;
If (tmpText. length> 0 ){
// Set text
T. innerHTML = tmpText + "/6 ";
// Set the progress bar
Var width = parseInt (tmpText)/6*300;
Bg. style. width = width + "px ";
}
}
If (xhr. readyState = 4 ){
// The request has been executed.
T. innerHTML = "completed ";
Bg. style. width = "300px ";
}
}
Xhr. send (null );
}
</Script>
</Body>
</Html>
Jsp page
<%
// Set Content-Type below: application/x-javascript tutorial to adapt to Webkit browsers (chrome, safari)
Response. setHeader ("Content-Type", "application/x-javascript ");
Int count = 6; // process 6 data records
For (int I = 0; I <count; I ++ ){
// After processing, output the result to the client.
Out. println (I + 1 );
Out. flush ();
// Assume that each data processing time is 1 second.
Thread. currentThread (). sleep (1000 );
}
%>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
