В недавнем проекте была функция загрузки: загрузить CVS-файл, затем проанализировать его и записать в базу данных. Поскольку часто приходится загружать большие файлы, на выполнение этой функции у клиентов часто уходит 40 минут. процесс, страница также Нет подсказки, и взаимодействие с пользователем очень плохое?
Почему бы не использовать ajax для создания индикатора выполнения?
Выполните это требование в два этапа:
Первое: напишите простой ajax для реализации простейшей функции индикатора выполнения.
Второе: превратите этот индикатор выполнения в индикатор выполнения, доступный для проекта.
1: Самый простой индикатор выполнения
1. Клиент отправляет запрос createXMLHttpRequest на сервер каждые 2 секунды и получает данные о ходе выполнения, возвращаемые сервером. На основе данных, возвращаемых сервером, используйте JavaScript для обновления ширины таблицы.
Это имитирует индикатор выполнения.
ProgressBar.html.Содержимое следующее:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<голова>
<title>Индикатор выполнения Ajax</title>
<script type="text/javascript">...
вар xmlHttp;
ключ вар;
функция createXMLHttpRequest() ...{
если (window.ActiveXObject) ...{
xmlHttp = новый ActiveXObject("Microsoft.XMLHTTP");
}
иначе, если (window.XMLHttpRequest) ...{
xmlHttp = новый XMLHttpRequest();
}
}
функция go() ...{
createXMLHttpRequest();
ОчиститьБар();
var url = "ProgressBarServlet?task=create";
кнопка var = document.getElementById("go");
кнопка.отключено = правда;
xmlHttp.open("GET", URL, true);
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send (нуль);
}
функция goCallback() ...{
если (xmlHttp.readyState == 4) ...{
если (xmlHttp.status == 200) ...{
setTimeout("pollServer()", 2000);
}
}
}
функция pollServer() ...{
createXMLHttpRequest();
var url = "ProgressBarServlet?task=poll&key=" + key;
xmlHttp.open("GET", URL, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send (нуль);
}
функция pollCallback() ...{
если (xmlHttp.readyState == 4) ...{
если (xmlHttp.status == 200) ...{
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
var Progress = document.getElementById("прогресс");
var ProgressPersent = document.getElementById("progressPersent");
прогресс.ширина = процент_завершения + «%»;
ProgressPersent.innerHTML = процент_завершения + «%»;
если (percent_complete < 100) ...{
setTimeout("pollServer()", 2000);
} еще ...{
document.getElementById("complete").innerHTML = "Complete!";
//document.getElementById("go").disabled = false;
}
}
}
}
функция ClearBar() ...{
var Progress_bar = document.getElementById("progressBar");
var ProgressPersent = document.getElementById("progressPersent");
var Complete = document.getElementById("complete");
Progress_bar.style.visibility = "видимый"
ProgressPersent.innerHTML = " ";
Complete.innerHTML = "Начать загрузку этого файла...";
}
</скрипт>
</голова>
<тело>
<div id="progressBar" style="padding:0px;border:solid black 0px;visibility:hidden">
<table width="300" border="0" cellpacing="0" cellpadding="0" align="center">
<тр>
<td align="center" id="progressPersent">86%</td>
</tr>
<тр>
<тд>
<table width="100%" border="1" cellpacing="0" cellpadding="0" bordercolor="#000000">
<тр>
<тд>
<table width="1%" border="0" cellpacing="0" cellpadding="0" bgcolor="#FF0000" id="progress">
<тр>
<td> </td>
</tr>
</таблица></тд>
</tr>
</таблица>
</td>
</tr>
<тр>
<td align="center" id="complete">завершено</td>
</tr>
</таблица>
</div>
<input id = "go" name="run" type="button" value="run" onClick="go();">
</body>
</html>
2: Имитированный сервлет: ProgressBarServlet1. java, содержимое следующее:
пакет com.cyberobject.lcl.ajax;
импорт java.io.*;
импорт javax.servlet.*;
импортировать javax.servlet.http.*
/**;
*
* @author Нэйт
* @версия
*/
публичный класс ProgressBarServlet расширяет HttpServlet {
частный счетчик int = 1;
/** Обрабатывает метод HTTP <code>GET</code>.
* @param запрос сервлета запроса
* @param ответ ответа сервлета
*/
protected void doGet (запрос HttpServletRequest, ответ HttpServletResponse)
выдает ServletException, IOException {
Строковая задача = request.getParameter("задача");
Строка res = "";
если (task.equals("создать")) {
res = "<key>1</key>";
счетчик = 1;
}
еще {
Строка процентов = "";
переключатель (счетчик) {
случай 1: процент = «10»;
случай 2: процент = "23";
случай 3: процент = "35";
случай 4: процент = «51»;
случай 5: процент = «64»;
случай 6: процент = «73»;
случай 7: процент = «89»;
случай 8: процент = «100»;
}
счетчик++;
res = "<percent>" + процент + "</percent>";
}
PrintWriter out = response.getWriter();
response.setContentType("текст/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<ответ>");
out.println(рез);
out.println("</response>");
выход.закрыть();
}
/** Обрабатывает метод HTTP <code>POST</code>.
* @param запрос сервлета запроса
* @param ответ ответа сервлета
*/
protected void doPost (запрос HttpServletRequest, ответ HttpServletResponse)
выдает ServletException, IOException {
doGet (запрос, ответ);
}
/** Возвращает краткое описание сервлета.
*/
публичная строка getServletInfo() {
вернуть «Краткое описание»;
}
}
3: В сети. Настройте сопоставление сервлетов в XML:
<!-- Сопоставление сервлетов действий -->
<сервлет>
<servlet-name>ProgressBarServlet</servlet-name>
<display-name>ProgressBarServlet</display-name>
<servlet-class>com.cyberobject.lcl.ajax.ProgressBarServlet</servlet-class>
</servlet>
<сервлет-отображение>
<servlet-name>ProgressBarServlet</servlet-name>
<url-pattern>/ProgressBarServlet</url-pattern>
</сервлет-сопоставление>
На этом этапе индикатор выполнения готов к запуску. Следующий шаг — портировать его в нашу систему.
два:
1. В классе DbOperater, записывающем базу данных, добавьте атрибут прогресса.
Private int Progress;
2: В классе, записывающем базу данных, добавьте метод getProgress():
публичный int getProgress()
{
вернуть прогресс;
}
3: В цикле for написания библиотеки Progress++;
4. Вызовите метод getProgress() DbOperater в сервлете, который вызывает DbOperater, тем самым предоставляя данные в реальном времени для индикатора выполнения.
5: Кроме того: функция doGet() сервлета используется для получения данных о ходе работы, а функция doPost() используется для загрузки файлов и записи библиотечных операций. Разделение труда между собой четкое.
Это заархивировано.