Durante a instalação e download de aplicativos, o uso de barras de progresso tornou -se muito comum. A barra de progresso pode ser usada para identificar o progresso da conclusão do projeto, pode ser representada por porcentagens ou números e pode ser colocada horizontalmente. Usando a tecnologia AJAX para criar barras de progresso, a função se torna mais poderosa e rápida.
Agora crie uma instância para demonstrar a implementação das barras de progresso usando a tecnologia AJAX. Esta instância também pode ser dividida no código do cliente e no código do servidor.
1. Código do servidor
O código do servidor implementa principalmente uma frase das informações de solicitação do cliente e retorna o número percentual correspondente. Abra o bloco de notas e insira o seguinte código:
<%@ página contentType = "text/html; charset = gb2312" idioma = "java" import = "java.sql.*" errorPage = ""%> <%! int contador = 1; // Nota: Vários usuários compartilharão essa variável, e essa barra de progresso é adequada apenas para usuários únicos%> <% string tarefa = request.getParameter ("tarefa"); String res = ""; if (task.equals ("create")) {res = "1"; contador = 1; } else {string porcent = ""; switch (contador) {case 1: porcent = "10"; quebrar; caso 2: porcentagem = "23"; quebrar; Caso 3: porcentagem = "35"; quebrar; Caso 4: porcentagem = "51"; quebrar; Caso 5: porcentagem = "64"; quebrar; caso 6: porcentagem = "73"; quebrar; caso 7: porcentagem = "89"; quebrar; caso 8: porcentagem = "100"; quebrar; } contador ++; res = "<%>" + porcentagem + "</cente>"; } // printWriter out = Response.getWriter (); Response.setContentType ("Text/XML"); Response.setheader ("Cache-Control", "No-Cache"); out.println ("<supler>"); out.println (res); out.println ("</suwer>"); out.Close (); %>Salve o código acima com o nome ProgressBar.jsp. Neste arquivo, um contador de variáveis é declarado e atribuído um valor de 1, que é a base para a barra de progresso retornar um número percentual. Abaixo, use o objeto de solicitação para obter o valor da tarefa variável transmitida pelo cliente. Se o valor for criado, significa que a barra de progresso precisa ser recriada e o valor do contador será definido como 1; Se a tarefa não for criada, o número percentual será retornado com base no valor do contador e a operação será concluída e o valor do contador será adicionado a 1.
2. Código do cliente
O código do cliente deste exemplo implementa principalmente o status da barra de progresso com base no número percentual de retorno. Abra o bloco de notas e insira o seguinte código:
<html> <head> <title> jsp+ajax Progress BAR </ititle> <script type = "text/javascript"> var xmlhttp; var bar_color = 'azul'; var span_id = "amarelo"; var clear = "" função 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 (nulo); } function gocallback () {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {setTimeout ("PollServer ()", 2000); }}} function polServer () {createxmlHttPrequest (); var url = "ProgressBarjsp.jsp? Task = Poll"; xmlhttp.open ("get", url, true); xmlhttp.onReadyStatechange = PollCallback; xmlhttp.send (nulo); } function PollCallback () {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {var %_complete = xmlhttp.Responsexml.getElementsByTagName ("porcentagem) [0] .Firstchild.datA; var index = processResult (percent_complete); for (var i = 1; i <= index; i ++) {var elem = document.getElementById ("bloco"+i); elem.innerhtml = claro; elem.style.backgroundColor = bar_color; var next_cell = i + 1; if (next_cell> index && next_cell <= 9) {document.getElementById ("block" + next_cell) .innerhtml = percentual_complete + "%"; }} if (índice <9) {setTimeout ("PolServer ()", 2000); } else {document.getElementById ("Complete"). Innerhtml = "O site foi carregado!"; }}}}} função processresult (percent_complete) {var ind; if (%_complete.length == 1) {ind = 1; } else if (percent_complete.length == 2) {ind = %_complete.substring (0, 1); } else {ind = 9; } retornar ind; } função checkDiv () {var progress_bar = document.getElementById ("ProgressBar"); if (progress_bar.style.visibility == "visible") {clearbar (); document.getElementById ("Complete"). Innerhtml = ""; } else {progress_bar.style.visibility = "visível"}} função clearbar () {for (var i = 1; i <10; i ++) {var elem = document.getElementById ("bloco"+i); elem.innerhtml = claro; elem.style.backgroundColor = "White"; }} </script> </ad Head> <corpo onLload = "go ();"> <h1 align = center> O site está carregando, aguarde </h1> <p> <tabela align = "Center"> <tbody> <tr> <t> <td> <div id = "progressbar" style = "Padding: 2px; borda: sólido 2 2px; id = "block2"> </span> <span id = "block3"> </span> <span id = "block4"> </span> <span id = "block5"> </span> <span id = "block6"> </mpan> <span id = "block7"> </span> <span = "block8"> </span> <ids = "block7"> </span> <span> = "8 "> </span> <ids =" 9 ">"> </span> <block8 "> </span> <ids =" 9 ">"> <tr> <td align = "Center" id = "Complete"> </td> </tr> </tbody> </table> </body> </html>Salve o código acima com o nome jsprogressBar.html. Neste arquivo, a função JavaScript CreatexmlHttPrequest () é usada principalmente para criar o objeto XMLHTTPREQUEST. A função go () deseja enviar uma solicitação assíncrona no servidor. A função é chamada quando a página da web é carregada. Sua principal função é notificar o servidor e começar a executar a barra de progresso no cliente. A função gocallback () é usada principalmente para processar a resposta do servidor e chama a função PolServer () a cada 2 segundos. Também é usado para enviar solicitações assíncronas ao servidor, solicitando principalmente a porcentagem da resposta do servidor. A função PollCallback () é usada principalmente para processar respostas do lado do servidor, ou seja, para especificar o status de exibição da barra de progresso com base no número retornado pelo lado do servidor. Deve -se notar aqui que a função gocallback () é executada apenas uma vez, enquanto a função PollCallback () pode ser executada várias vezes e as outras três funções são funções auxiliares que implementam a barra de progresso.
3. Corra
Copie os dois arquivos JSP acima para o diretório JSP. As renderizações da operação são as seguintes: