Use Ajax to implement a simple example with percentage progress bar and ajax percentage

Use Ajax to implement a simple example with percentage progress bar and ajax percentage

Requirement: a progress bar with a percentage is displayed on the page when you perform operations such as long-transfer and storage of files to provide a good interactive experience.

Steps

JSP page

1. Add table labels

<Table id = "load" width = "700" border = "0" align = "center" bgcolor = "# FAFAFA" cellpadding = "0" cellspacing = "0" bordercolor = "& quot; #000000 & quot; style = & quot; border-collapse: collapse; display: none "> <tr> <td> <br> <table width =" 100% "border =" 1 "cellspacing =" 0 "cellpadding =" 0 "bordercolor =" # 287BCE "style =" border-collapse: collapse "> <tr bgcolor =" # F7F7F6 "> <td width =" 20% "height =" 100 "valign =" middle "> <table align = 'center' width =' 500 '> <tr> <td colspan = '2' align = 'center' id = "progressPersent"> <font size = "2"> saving, it takes a long time. Please wait... </font> </td> </tr> <td id = 'tdone' height = '25' width = 1 bgcolor = "blue"> </td> <td id = 'tdtwo' height = '25' width = 500 bgColor = '# 000000'> </td> </tr> </table> </td> </ tr> </table> </td> </tr> </table>

This table label must be hidden and displayed when the progress bar is executed. The id tdOne and tdTwo are the blue and gray areas of the progress bar respectively.

2. Add js Code

/** Add progress bars with percentages */var xmlHttp; // create the ajax engine function createXMLHttpRequest () {if (window. XMLHttpRequest) {xmlHttp = new XMLHttpRequest ();} else if (window. activeXObject) {try {xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");} catch (e1) {try {xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ") ;}catch (e2) {}}} function loading () {createXMLHttpRequest (); clearLoad (); var url =" elecCommonMsgAction_progressBar.do "; xmlHttp. open ("GET", url, true); xmlHttp. onreadystatechange = createCallback; xmlHttp. send (null);} function createCallback () {if (xmlHttp. readyState = 4) {if (xmlHttp. status = 200) {// execute the percentServer () method once every one second until the current access ends. setTimeout ("percentServer ()", 1000) ;}} function percentServer () {createXMLHttpRequest (); var url = "elecCommonMsgAction_progressBar.do"; xmlHttp. open ("GET", url, true); xmlHttp. onreadystatechange = updateCallback; xmlHttp. send (null);} function updateCallback () {if (xmlHttp. readyState = 4) {if (xmlHttp. status = 200) {// get the percentage of percent stored in XML data. var percent_complete = xmlHttp. responseXML. getElementsByTagName ("percent") [0]. firstChild. data; var tdOne = document. getElementById ("tdOne"); var progressPersent = document. getElementById ("progressPersent"); // change the width of the blue area tdOne. width = percent_complete + "%"; // display the percentage value to progressPersent on the page. innerHTML = percent_complete + "%"; // if the calculated percentage value does not reach 100, call the method until the operation ends. if (percent_complete <100) {setTimeout ("percentServer ()", 1000) ;}}} function clearLoad () {document. getElementById ("load "). style. display = ""; document. getElementById ("opperate1 "). style. display = "none"; document. getElementById ("opperate2 "). style. display = "none ";}

When you click Save, execute the loading () method.

Action class

ProgressBar () method

/*** @ Throws Exception * @ Name: progressBar * @ Description: After the page is saved, use ajax to calculate the execution percentage, display the result to the page * @ Parameters: NONE * @ Return: If ajax does not need to jump to the page, Return null or NONE */public String progressBar () throws Exception {// get the percentage calculated in the operation method from the session Double percent = (Double) request. getSession (). getAttribute ("percent"); String res = ""; // This indicates that the business method of the operation is still executing if (percent! = Null) {// calculates the decimal number, rounded to the integer int percentInt = (int) Math. rint (percent); res = "<percent>" + percentInt + "</percent>" ;}// the Operation's business method has been completed, the value in the session has been cleared else {// storage percentage res = "<percent>" + 100 + "</percent> ";} // define the ajax return result in the XML format PrintWriter out = response. getWriter (); response. setContentType ("text/xml"); response. setHeader ("Cache-Control", "no-cache"); // stores the result data, for example, <response> <percent> 88 </percent> </response> out. println ("<response>"); out. println (res); out. println ("</response>"); out. close (); return null ;}

Save () method

/*** @ Name: save * @ Description: save form data to the database * @ Parameters: none * @ Return: String: redirect to system/actingIndex. jsp re-query */public String save () {// simulation: the loop is saved for 150 times, so that you can easily observe the percentage change for (int I = 1; I <= 150; I ++) {elecCommonMsgService. saveCommonMsg (elecCommonMsg); // Save the data request. getSession (). setAttribute ("percent", (double) I/150*100);} // The thread ends and the session request is cleared. getSession (). removeAttribute ("percent"); return "save ";}

Note: You can divide the code segment into points in a complex business. The progress of a point is the percentage of the Code, which is stored in the Session. Then, the ajax call service is used to obtain the value from the Session, return the progress and display it.

Effect

Enter data. When you click Save:

Summary

The progress bar with percentage is actually implemented by enabling multiple threads in the SAVE Using ajax:

A thread executes the save operation:

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

2. When the thread ends, clear the session.

The other thread obtains the percentage content from the session:

1. Use ajax to return the result and display it on the page

The above is an example of Using Ajax to implement a simple progress bar with percentages. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!