최근 프로젝트에는 CVS 파일을 업로드한 후 파일을 구문 분석하여 데이터베이스에 쓰는 업로드 기능이 있었는데, 대용량 파일을 업로드해야 하는 경우가 많기 때문에 고객이 이 기능을 완료하는 데 40분이 걸리는 경우가 많습니다. 프로세스, 페이지에도 프롬프트가 없고 사용자 경험이 매우 나쁩니다.
진행률 표시줄을 만들기 위해 Ajax를 사용하면 어떨까요?
이 요구 사항은 두 단계로 완료됩니다.
하나: 가장 간단한 진행 표시줄 기능을 구현하는 간단한 ajax를 작성하세요.
2: 이 진행률 표시줄을 프로젝트에 사용할 수 있는 진행률 표시줄로 변환합니다.
1: 가장 간단한 진행 표시줄
1. 클라이언트는 2초마다 서버에 createXMLHttpRequest 요청을 보내고 서버에서 반환된 진행 데이터를 가져옵니다. 서버에서 반환된 데이터를 기반으로 javascript를 사용하여 테이블 너비를 업데이트합니다.
진행률 표시줄을 시뮬레이션합니다.
ProgressBar.html.내용은 다음과 같습니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<머리>
<title>Ajax 진행 표시줄</title>
<스크립트 유형="텍스트/자바스크립트">...
var xmlHttp;
var 키;
함수 createXMLHttpRequest() ...{
if (window.ActiveXObject) ...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
그렇지 않으면 (window.XMLHttpRequest) ...{
xmlHttp = 새로운 XMLHttpRequest();
}
}
함수 go() ...{
createXMLHttpRequest();
클리어바();
var url = "ProgressBarServlet?task=create";
var 버튼 = document.getElementById("go");
버튼.비활성화 = true;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send(null);
}
함수 goCallback() ...{
if (xmlHttp.readyState == 4) ...{
if (xmlHttp.status == 200) ...{
setTimeout("pollServer()", 2000);
}
}
}
함수 pollServer() ...{
createXMLHttpRequest();
var url = "ProgressBarServlet?task=poll&key=" + 키;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
함수 pollCallback() ...{
if (xmlHttp.readyState == 4) ...{
if (xmlHttp.status == 200) ...{
var Percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
var 진행 = document.getElementById("진행");
var ProgressPersent = document.getElementById("progressPersent");
진행률.폭 = 퍼센트_완료 + "%";
ProgressPersent.innerHTML = 퍼센트_완료 + "%";
if (퍼센트 완료 < 100) ...{
setTimeout("pollServer()", 2000);
} 또 다른 ...{
document.getElementById("complete").innerHTML = "완료!";
//document.getElementById("go").disabled = false;
}
}
}
}
함수 클리어바() ...{
var Progress_bar = document.getElementById("progressBar");
var ProgressPersent = document.getElementById("progressPersent");
var 완료 = document.getElementById("완전");
Progress_bar.style.visibility = "표시"
ProgressPersent.innerHTML = " ";
Complete.innerHTML = "이 파일 업로드를 시작합니다...";
}
</script>
</head>
<본문>
<div id="progressBar" style="padding:0px;border:solid black 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>
</table>
</td>
</tr>
<tr>
<td align="center" id="complete">완료</td>
</tr>
</table>
</div>
<입력 ID = "go" name="run" type="button" value="run" onClick="go();">
</body>
</html>
2: 시뮬레이션된 서블릿: ProgressBarServlet1. java 내용은 다음과 같습니다.
패키지 com.cyberobject.lcl.ajax;
import java.io.*
;
import javax.servlet.http.*
/**
*
* @author 네이트
* @버전
*/
공개 클래스 ProgressBarServlet은 HttpServlet을 확장합니다.
개인 정수 카운터 = 1;
/** HTTP <code>GET</code> 메소드를 처리합니다.
* @param 요청 서블릿 요청
* @param 응답 서블릿 응답
*/
protected void doGet(HttpServletRequest 요청, HttpServletResponse 응답)
ServletException, IOException이 발생합니다.
String task = request.getParameter("task");
문자열 res = "";
if (task.equals("create")) {
res = "<key>1</key>";
카운터 = 1;
}
또 다른 {
문자열 퍼센트 = "";
스위치(카운터) {
사례 1: 퍼센트 = "10";
사례 2: 퍼센트 = "23";
사례 3: 퍼센트 = "35";
사례 4: 퍼센트 = "51";
사례 5: 퍼센트 = "64";
사례 6: 퍼센트 = "73";
사례 7: 퍼센트 = "89";
사례 8: 퍼센트 = "100";
}
카운터++;
res = "<퍼센트>" + 퍼센트 + "</퍼센트>";
}
PrintWriter 출력 = response.getWriter();
response.setContentType("text/xml");
response.setHeader("캐시 제어", "캐시 없음");
out.println("<응답>");
out.println(res);
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: DbOperater를 호출하는 서블릿에서 DbOperater의 getProgress() 메서드를 호출하여 진행률 표시줄에 실시간 데이터를 제공합니다.
5: 추가로: 서블릿의 doGet()은 진행 데이터를 얻는 데 사용되고 doPost()는 파일을 업로드하고 라이브러리 작업을 작성하는 데 사용됩니다.
이것은 보관되었습니다.