During the installation and download of applications, the use of progress bars has become very common. The progress bar can be used to identify the completion progress of the project, can be represented by percentages or numbers, and can be placed horizontally. Using Ajax technology to create progress bars, the function becomes more powerful and fast.
Now create an instance to demonstrate the implementation of progress bars using Ajax technology. This instance can also be divided into client code and server code.
1. Server code
The server code mainly implements a sentence of client request information and returns the corresponding percentage number. Open Notepad and enter the following code:
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> <%! int counter = 1;//Note: Multiple users will share this variable, and this progress bar is only suitable for single users%> <% String task = request.getParameter("task"); String res = ""; if (task.equals("create")) { res = "1"; counter = 1; } else { String percent = ""; switch (counter) { case 1: percent = "10"; break; case 2: percent = "23"; break; case 3: percent = "35"; break; case 4: percent = "51"; break; case 5: percent = "64"; break; case 6: percent = "73"; break; case 7: percent = "89"; break; case 8: percent = "100"; break; } counter++; res = "<percent>" + percent + "</percent>"; } // PrintWriter out = response.getWriter(); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); out.println("<response>"); out.println(res); out.println("</response>"); out.close(); %>Save the above code with the name ProgressBar.jsp. In this file, a variable counter is declared and assigned a value of 1, which is the basis for the progress bar to return a percentage number. Below, use the request object to obtain the value of the variable task transmitted by the client. If the value is create, it means that the progress bar needs to be recreated and the counter value is set to 1; if the task is not create, the percentage number will be returned based on the counter value, and the operation will be completed, and the counter value will be added to 1.
2. Client code
The client code of this example mainly implements the status of the progress bar based on the return percentage number. Open Notepad and enter the following code:
<html> <head> <title>JSP+Ajax progress bar</title> <script type="text/javascript"> var xmlHttp; var bar_color = 'blue'; var span_id = "yellow"; var clear = " " function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function go() { createXMLHttpRequest(); checkDiv(); var url = "ProgressBarJsp.jsp?task=create"; xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = goCallback; xmlHttp.send(null); } function goCallback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { setTimeout("pollServer()", 2000); } } } function pollServer() { createXMLHttpRequest(); var url = "ProgressBarJsp.jsp?task=poll"; 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; var index = processResult(percent_complete); for (var i = 1; i <= index; i++) { var elem = document.getElementById("block" + i); elem.innerHTML = clear; elem.style.backgroundColor = bar_color; var next_cell = i + 1; if (next_cell > index && next_cell <= 9) { document.getElementById("block" + next_cell).innerHTML = percent_complete + "%"; } } if (index < 9) { setTimeout("pollServer()", 2000); } else { document.getElementById("complete").innerHTML = "The website has been loaded!"; } } } } } function processResult(percent_complete) { var ind; if (percent_complete.length == 1) { ind = 1; } else if (percent_complete.length == 2) { ind = percent_complete.substring(0, 1); } else { ind = 9; } return ind; } function checkDiv() { var progress_bar = document.getElementById("progressBar"); if (progress_bar.style.visibility == "visible") { clearBar(); document.getElementById("complete").innerHTML = ""; } else { progress_bar.style.visibility = "visible" } } function clearBar() { for (var i = 1; i < 10; i++) { var elem = document.getElementById("block" + i); elem.innerHTML = clear; elem.style.backgroundColor = "white"; } } </script> </head> <body onload="go();"> <h1 align=center>The website is loading, please wait</h1> <p> <table align="center"> <tbody> <tr><td> <div id="progressBar" style="padding:2px;border:solid yellow 2px;visibility:hidden"> <span id="block1"> </span> <span id="block2"> </span> <span id="block3"> </span> <span id="block4"> </span> <span id="block5"> </span> <span id="block6"> </span> <span id="block7"> </span> <span id="block8"> </span> <span id="block9"> </span> </div> </td></tr> <tr><td align="center" id="complete"></td></tr> </tbody> </table> </body> </html>Save the above code with the name JspprogressBar.html. In this file, the JavaScript function createXMLHttpRequest() is mainly used to create XMLHttpRequest object. The go() function wants to send an asynchronous request on the server. The function is called when the web page is loaded. Its main function is to notify the server and start running the progress bar on the client. The GoCallback() function is mainly used to process the server's response, and calls the pollServer() function every 2 seconds. It is also used to send asynchronous requests to the server, mainly requesting the percentage of the server's response. The PollCallback() function is mainly used to process server-side responses, that is, to specify the display status of the progress bar based on the number returned by the server-side. It should be noted here that the goCallback() function is only executed once, while the PollCallback() function can be executed multiple times, and the other three functions are auxiliary functions that implement the progress bar.
3. Run
Copy the above two Jsp files to the JSP directory. The operation renderings are as follows: