Em um projeto recente, havia uma função de upload: fazer upload de um arquivo CVS, analisar o arquivo e gravá-lo no banco de dados. Como arquivos grandes geralmente precisam ser carregados, os clientes geralmente levam 40 minutos para concluir essa função. processo, a página também Não há prompt e a experiência do usuário é muito ruim?
Por que não usar o ajax para fazer uma barra de progresso?
Conclua este requisito em duas etapas:
Um: escreva um ajax simples para implementar a função mais simples da barra de progresso.
Dois: Transforme esta barra de progresso em uma barra de progresso disponível para o projeto.
1: A barra de progresso mais simples
1. O cliente envia uma solicitação createXMLHttpRequest ao servidor a cada 2 segundos e obtém os dados de progresso retornados pelo servidor. Com base nos dados retornados pelo servidor, use javascript para atualizar a largura de uma tabela.
Isso simula uma barra de progresso.
progressBar.html.O conteúdo é o seguinte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<cabeça>
<title>Barra de progresso do Ajax</title>
<script type="text/javascript">...
var xmlHttp;
chave var;
função createXMLHttpRequest() ...{
if (janela.ActiveXObject)...{
xmlHttp = novo ActiveXObject("Microsoft.XMLHTTP");
}
senão if (window.XMLHttpRequest) ...{
xmlHttp = novo XMLHttpRequest();
}
}
função go() ...{
createXMLHttpRequest();
limparBar();
var url = "ProgressBarServlet?task=create";
botão var = document.getElementById("ir");
botão.disabled = verdadeiro;
xmlHttp.open("OBTER", url, verdadeiro);
xmlHttp.onreadystatechange=goCallback;
xmlHttp.send(nulo);
}
função goCallback() ...{
if (xmlHttp.readyState == 4) ...{
if (xmlHttp.status == 200) ...{
setTimeout("pollServer()", 2000);
}
}
}
function pollServer() ...{
createXMLHttpRequest();
var url = "ProgressBarServlet?task=poll&key=" + chave;
xmlHttp.open("OBTER", url, verdadeiro);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(nulo);
}
função pollCallback() ...{
if (xmlHttp.readyState == 4) ...{
if (xmlHttp.status == 200) ...{
var percent_complete = xmlHttp.responseXML.getElementsByTagName("porcentagem")[0].firstChild.data;
var progresso = document.getElementById("progresso");
var progressPersent = document.getElementById("progressPersent");
progresso.largura = porcentagem_completa + "%";
progressPersent.innerHTML = porcentagem_completa + "%";
if (porcentagem_completa <100) ...{
setTimeout("pollServer()", 2000);
} outro ...{
document.getElementById("complete").innerHTML = "Completo!";
//document.getElementById("go").disabled = false;
}
}
}
}
função clearBar() ...{
var progress_bar = document.getElementById("progressBar");
var progressPersent = document.getElementById("progressPersent");
var completo = document.getElementById("completo");
progress_bar.style.visibility = "visível"
progressPersent.innerHTML = " ";
complete.innerHTML = "Comece a enviar este arquivo...";
}
</script>
</head>
<corpo>
<div id="progressBar" style="padding:0px;border:preto sólido 0px;visibility:hidden">
<table width="300" border="0" cellpacing="0" cellpadding="0" align="center">
<tr>
<td align="center" id="progressPersent">86%</td>
</tr>
<tr>
<td>
<table width="100%" border="1" cellpacing="0" cellpadding="0" bordercolor="#000000">
<tr>
<td>
<table width="1%" border="0" cellpacing="0" cellpadding="0" bgcolor="#FF0000" id="progress">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</tabela>
</td>
</tr>
<tr>
<td align="center" id="complete">concluído</td>
</tr>
</tabela>
</div>
<input id = "go" name="run" type="button" value="run" onClick="go();">
</body>
</html>
2: Um servlet simulado: ProgressBarServlet1. java, o conteúdo é o seguinte:
pacote com.cyberobject.lcl.ajax;
importar java.io.*
;
importar javax.servlet.http.*
/**
*
* @autor nate
* @versão
*/
classe pública ProgressBarServlet estende HttpServlet {
contador interno privado = 1;
/** Manipula o método HTTP <code>GET</code>.
* @param request solicitação de servlet
* @param resposta resposta do servlet
*/
protegido void doGet (solicitação HttpServletRequest, resposta HttpServletResponse)
lança ServletException, IOException {
String tarefa = request.getParameter("tarefa");
String res = "";
if (task.equals("criar")) {
res = "<key>1</key>";
contador = 1;
}
outro {
String porcentagem = "";
interruptor (contador) {
caso 1: porcentagem = "10";
caso 2: porcentagem = "23";
caso 3: porcentagem = "35";
caso 4: porcentagem = "51";
caso 5: porcentagem = "64";
caso 6: porcentagem = "73";
caso 7: porcentagem = "89";
caso 8: porcentagem = "100";
}
contador++;
res = "<percent>" + por cento + "</percent>";
}
PrintWriter out = resposta.getWriter();
resposta.setContentType("texto/xml");
response.setHeader("Cache-Control", "sem cache");
out.println("<resposta>");
out.println(res);
out.println("</response>");
out.close();
}
/** Manipula o método HTTP <code>POST</code>.
* @param request solicitação de servlet
* @param resposta resposta do servlet
*/
protegido void doPost (solicitação HttpServletRequest, resposta HttpServletResponse)
lança ServletException, IOException {
doGet(solicitação,resposta);
}
/** Retorna uma breve descrição do servlet.
*/
public String getServletInfo() {
retornar "Breve descrição";
}
}
3: Na web. Configure o mapeamento do servlet em xml:
<!-- Mapeamento de servlet de ação -->
<servlet>
<servlet-name>ProgressBarServlet</servlet-name>
<nome para exibição>ProgressBarServlet</nome para exibição>
<servlet-class>com.cyberobject.lcl.ajax.ProgressBarServlet</servlet-class>
</servlet>
<mapeamento de servlet>
<servlet-name>ProgressBarServlet</servlet-name>
<url-pattern>/ProgressBarServlet</url-pattern>
</servlet-mapping>
Neste ponto, a barra de progresso está pronta para ser executada. O próximo passo é portá-lo para nosso sistema.
dois:
1: Na classe DbOperater que grava o banco de dados, adicione um atributo progress
private int progress
2: Na classe que grava o banco de dados, adicione um método getProgress():
público int getProgress()
{
retornar progresso;
}
3: No loop for de escrita da biblioteca, progress++;
4: Chame o método getProgress() do DbOperater no servlet que chama o DbOperater, fornecendo assim dados em tempo real para a barra de progresso.
5: Além disso: doGet() do servlet é usado para obter dados de progresso, e doPost() é usado para fazer upload de arquivos e escrever operações de biblioteca. A divisão de trabalho entre si é clara.
Isto está arquivado.