Using AJAX to implement a simple with percent progress bar

　　Requirements: When the file long-pass preservation and other operations, can be displayed on the page with a percentage of the progress bar, to give users a good interactive experience

Implementing the steps JSP Page 1. Adding a table label

<TableID= "Load"width= "The "Border= "0"Align= "Center"bgcolor= "#FAFAFA"cellpadding= "0"cellspacing= "0"bordercolor= "#000000"style= "Border-collapse:collapse;display:none">      <TR>        <TD><BR><BR>        <Tablewidth= "100%"Border= "1"cellspacing= "0"cellpadding= "0"bordercolor= "#287BCE"style= "Border-collapse:collapse">            <TRbgcolor= "#F7F7F6">              <TDwidth= "20%"Height= "+"valign= "Middle">                <TableAlign= ' Center 'width= ' $ '>                  <TR>                   <TDcolspan= ' 2 'Align= ' Center 'ID= "Progresspersent"><Fontsize= "2">saving is taking longer, please later ...</Font>                   </TD>                  </TR>                  <TR>                    <TDID= ' Tdone 'Height= ' + 'width=1bgcolor= "Blue">&nbsp;</TD>                    <TDID= ' Tdtwo 'Height= ' + 'width=500BgColor= ' #999999 '>&nbsp;</TD>                  </TR>                </Table>              </TD>            </TR>        </Table>        </TD>      </TR>    </Table> 　 

This table tag should be hidden and displayed when the progress bar executes. The ID is tdone and tdtwo are the blue and gray areas of the progress bar, respectively.

2. Add JS Code

/** Add a progress bar with a percentage*/    varxmlHttp; //creating an AJAX engine    functioncreatexmlhttprequest () {if(window. XMLHttpRequest) {xmlHttp=NewXMLHttpRequest (); } Else if(window. ActiveXObject) {Try{xmlHttp=NewActiveXObject ("Msxml2.xmlhttp"); } Catch(E1) {Try{xmlHttp=NewActiveXObject ("Microsoft.XMLHTTP"); } Catch(E2) {}}} }        functionloading () {createxmlhttprequest ();        Clearload (); varurl = "Eleccommonmsgaction_progressbar.do"; Xmlhttp.open ("GET", URL,true); Xmlhttp.onreadystatechange=Createcallback; Xmlhttp.send (NULL); }        functioncreatecallback () {if(Xmlhttp.readystate = = 4) {            if(Xmlhttp.status = = 200) {                //executes the Percentserver () method every 1 seconds until the end of the current accessSetTimeout ("Percentserver ()", 1000); }        }    }        functionPercentserver () {createxmlhttprequest (); varurl = "Eleccommonmsgaction_progressbar.do"; Xmlhttp.open ("GET", URL,true); Xmlhttp.onreadystatechange=Updatecallback; Xmlhttp.send (NULL); }        functionUpdatecallback () {if(Xmlhttp.readystate = = 4) {            if(Xmlhttp.status = = 200) {                //gets the value of the percentage of percent stored in the XML data                varPercent_complete = XmlHttp.responseXML.getElementsByTagName ("percent") [0].firstchild.data; varTdone = document.getElementById ("Tdone"); varProgresspersent = document.getElementById ("Progresspersent"); //Change the width of the blue areaTdone.width = percent_complete + "%"; //display a percentage value on the pageprogresspersent.innerhtml = percent_complete + "%"; //if the calculated percentage of the obtained value does not reach 100, the method continues to be called until the end of the Operation                if(Percent_complete < 100) {setTimeout ("Percentserver ()", 1000); }            }        }    }     functionclearload () {document.getElementById ("Load"). style.display= ""; document.getElementById ("Opperate1"). style.display= "None"; document.getElementById ("Opperate2"). style.display= "None"; }

When you click Save, the Loading () method is executed.

Action Class ProgressBar () method

/**      * @throwsException * @Name: ProgressBar * @Description: After the page is saved, use Ajax, calculate the percentage of execution, display the results on the page * @Parameters: None * @Return: Ajax If you do not need to jump page, return null or None*/     PublicString ProgressBar ()throwsexception{//gets the percentage calculated in the action method from the sessionDouble percent = (double) request.getsession (). getattribute ("percent"); String Res= ""; //The business method that describes the operation continues at this point in the execution        if(percent!=NULL){            //computes the decimal, rounding the rounding            intPercentint = (int) Math.rint (percent); Res= "<percent>" + percentint + "</percent>"; }        //at this point, the operation's business method has been executed and the value in session has been emptied .        Else{            //Storage Percentageres = "<percent>" + + + "</percent>"; }        //The return result of defining Ajax is in the form of XMLPrintWriter out =Response.getwriter (); Response.setcontenttype ("Text/xml"); Response.setheader ("Cache-control", "No-cache"); //storing result data, such as:<response><percent>88</percent></response>Out.println ("<response>");        Out.println (RES); Out.println ("</response>");        Out.close (); return NULL; }

Save () method

/*** @Name: Save * @Description: Saves form data to database * @Parameters: None * @Return: String: Redirect to system/actingindex.jsp Enquiry*/     PublicString Save () {//simulation: Cycle save 150 times for easy observation of percentage changes         for(inti=1;i<=150;i++) {eleccommonmsgservice.savecommonmsg (eleccommonmsg);//Save DataRequest.getsession (). SetAttribute ("percent", (Double) i/150*100); }        //thread end, empty sessionRequest.getsession (). RemoveAttribute ("percent"); return"Save"; }

Note: You can divide code snippets into points in a complex business, how much progress a point takes, and then store it in session　　 , and then gets the value from the session through the AJAX call service , returns the progress and displays it.

Effect

　　Enter data and click "Save" When:

Summarize

　　A progress bar with a percentage, in fact, is implemented using AJAX to open multiple threads in the Save:

• A thread that performs the saved operation:
  

1. Calculate the percentage and put it in the session;

2. Empty the session at the end of the thread.

• Another thread that gets the percentage of content from the session:

1. Use Ajax to return the results and display them on the page

Using AJAX to implement a simple with percent progress bar