Durante la instalación y descarga de aplicaciones, el uso de barras de progreso se ha vuelto muy común. La barra de progreso se puede usar para identificar el progreso de finalización del proyecto, puede representarse por porcentajes o números y se puede colocar horizontalmente. Utilizando la tecnología AJAX para crear barras de progreso, la función se vuelve más potente y rápida.
Ahora cree una instancia para demostrar la implementación de barras de progreso utilizando la tecnología AJAX. Esta instancia también se puede dividir en el código del cliente y el código del servidor.
1. Código del servidor
El código del servidor implementa principalmente una oración de la información de solicitud del cliente y devuelve el número de porcentaje correspondiente. Abra el bloc de notas e ingrese el siguiente código:
<%@ página contentType = "text/html; charset = gb2312" lenguaje = "java" import = "java.sql.*" ErrorPage = ""%> <%! int contence = 1; // Nota: Múltiples usuarios compartirán esta variable, y esta barra de progreso solo es adecuada para usuarios únicos%> <% string task = request.getParameter ("tarea"); Cadena res = ""; if (task.equals ("create")) {res = "1"; contador = 1; } else {string porcenter = ""; interruptor (contador) {caso 1: porcentaje = "10"; romper; caso 2: porcentaje = "23"; romper; caso 3: porcentaje = "35"; romper; caso 4: porcentaje = "51"; romper; caso 5: porcentaje = "64"; romper; caso 6: porcentaje = "73"; romper; caso 7: porcentaje = "89"; romper; caso 8: porcentaje = "100"; romper; } contador ++; res = "<%>" + porcentaje + "</porcentaje>"; } // printWriter out = Response.getWriter (); respuesta.setContentType ("Text/xml"); Respuesta.setheader ("Cache-Control", "No-Cache"); out.println ("<Spuesta>"); out.println (res); out.println ("</respuesta>"); out.close (); %>Guarde el código anterior con el nombre ProgressBar.jsp. En este archivo, se declara y se le asigna un valor de 1, que es la base para que la barra de progreso devuelva un número porcentual. A continuación, use el objeto de solicitud para obtener el valor de la tarea variable transmitida por el cliente. Si el valor se crea, significa que la barra de progreso debe recrearse y el valor del contador se establece en 1; Si la tarea no se crea, el número de porcentaje se devolverá en función del valor del contador, y la operación se completará, y el valor del contador se agregará a 1.
2. Código del cliente
El código del cliente de este ejemplo implementa principalmente el estado de la barra de progreso en función del número de porcentaje de retorno. Abra el bloc de notas e ingrese el siguiente código:
<html> <fead> <title> jsp+ajax barra de progreso </title> <script type = "text/javaScript"> var xmlhttp; var bar_color = 'azul'; var span_id = "amarillo"; var clear = "" function createExmlHttprequest () {if (window.activexObject) {xmlhttp = new ActiveXObject ("Microsoft.xmlhttp"); } else if (window.xmlhttprequest) {xmlhttp = new xmlhttprequest (); }} function go () {createExmlhttprequest (); checkDiv (); var url = "ProgressBarjsp.jsp? Tark = Create"; xmlhttp.open ("get", url, verdadero); xmlhttp.onreadyStateChange = gocallback; xmlhttp.send (nulo); } function gocallback () {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {setTimeout ("PollServer ()", 2000); }}} function PollServer () {createExMlHttpRequest (); var url = "ProgressBarJsp.jsp? Tark = Poll"; xmlhttp.open ("get", url, verdadero); xmlhttp.onreadyStateChange = PollCallback; xmlhttp.send (nulo); } function PollCallback () {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {var porcentaje_complete = xmlhttp.Responsexml.getElementsByTagName ("porcentaje") [0] .Firstchild.data; Var index = ProcessResult (porcent_complete); for (var i = 1; i <= index; i ++) {var elem = document.getElementById ("bloque"+i); elem.innerhtml = claro; elem.style.backgroundcolor = bar_color; var next_cell = i + 1; if (next_cell> index && next_cell <= 9) {document.getElementById ("bloque" + next_cell) .innerhtml = porcent_complete + "%"; }} if (index <9) {setTimeOut ("PollServer ()", 2000); } else {document.getElementById ("Complete"). InnerHtml = "¡El sitio web ha sido cargado!"; }}}}}} Función ProcessResult (porcent_complete) {var ind; if (porcent_complete.length == 1) {ind = 1; } else if (porcent_complete.length == 2) {ind = porcent_complete.substring (0, 1); } else {ind = 9; } return ind; } function checkDiv () {var progress_bar = document.getElementById ("ProgressBar"); if (progreso_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 ("bloque"+i); elem.innerhtml = claro; elem.style.backgroundcolor = "White"; }} </script> </head> <body onload = "go ();"> <h1 align = Center> El sitio web se está cargando, espere </h1> <p> <table align = "centro"> <tbody> <tr> <td> <div it = "progressbar" style = "relly: 2px; border: sólido amarillo 2px; Visibility: Hidden"> <span Id = "Bloque1 </" style = "Padding: 2px; Border: Border: Border 2px; Visibilidad: Visibilidad: Hidden" <Span Id = "Bloque1/" id = "bloque2"> </span> <span id = "block3"> </span> <span id = "block4"> </span> <span id = "block5"> </span> <span iD = "block6"> </span> <span id = "bloque7"> </span> <span Id = "block8"> </span> <span iD = "block9"> </spol <tr> <td align = "Center" id = "Complete"> </td> </tr> </tbody> </table> </body> </html>Guarde el código anterior con el nombre jspprogressbar.html. En este archivo, la función JavaScript createExMlHTTPRequest () se usa principalmente para crear el objeto XMLHTTPREQUEST. La función Go () quiere enviar una solicitud asíncrona en el servidor. La función se llama cuando se carga la página web. Su función principal es notificar al servidor y comenzar a ejecutar la barra de progreso en el cliente. La función gocallback () se usa principalmente para procesar la respuesta del servidor y llama a la función PollServer () cada 2 segundos. También se usa para enviar solicitudes asíncronas al servidor, principalmente solicitando el porcentaje de la respuesta del servidor. La función PollCallback () se usa principalmente para procesar las respuestas del lado del servidor, es decir, para especificar el estado de visualización de la barra de progreso en función del número devuelto por el lado del servidor. Cabe señalar aquí que la función gocallback () solo se ejecuta una vez, mientras que la función PollCallback () se puede ejecutar varias veces, y las otras tres funciones son funciones auxiliares que implementan la barra de progreso.
3. Corre
Copie los dos archivos JSP anteriores al directorio JSP. Las representaciones de operación son las siguientes: