AJAX 기술을 활용하여 새로 고침 없이 웹 페이지에 진행률 표시줄 표시 실현

웹 페이지에서 페이지를 새로 고치지 않고 진행률 표시줄을 표시하는 것은 그리 어려운 일이 아니지만, 진행률 표시줄이 현재 트랜잭션이나 복잡한 논리의 실행 진행 상황을 정확하게 반영할 수 있다면 현재는 쉬운 작업이 아닙니다. AJAX 기술 대중적이기 때문에 이 글의 저자는 독자의 관심을 끌기 위해 AJAX를 사용하여 웹 페이지의 정확한 진행률 표시줄을 구현하려고 합니다.
먼저, 복잡한 트랜잭션이나 비즈니스 로직이 스레드 방식으로 실행되지 않는 경우 JAVA에서 실행 시 진행 표시를 처리하기 위해 복잡한 트랜잭션을 건너뛸 수 없다는 점을 생각해 보아야 합니다. 복잡한 트랜잭션이나 비즈니스 로직을 수행하기 위해 멀티스레딩을 사용하는 것을 고려해보세요.
또 다른 질문을 생각해보면, 트랜잭션 처리에는 웹 페이지에 일련의 매개변수 정보가 필요합니다. 이러한 매개변수를 얻는 방법은 생각하기 쉬운 것 같습니다. HttpServletRequest를 전달하기만 하면 됩니다.
진행률 표시줄을 공유하려면 모든 복잡한 트랜잭션 처리가 동일한 인터페이스 또는 추상 클래스를 구현해야 합니다. 여기서는 다음과 같이 인터페이스를 사용했습니다.
공개 인터페이스 IprogressBar {
public voidexecute(HttpServletRequest req,String pbid);//복잡한 트랜잭션 실행
}
다음과 같이 추상 클래스를 사용하여 멀티스레딩을 구현합니다.
공용 추상 클래스 AbstractProgressBar는 TimerTask를 확장하고 IprogressBar를 구현합니다.
개인 HttpServletRequest 요청;
개인 문자열 pbid;
공개 AbstractProgressBar(){
}
//하위 클래스는 이 함수를 재정의해야 합니다.
공개 추상 무효 실행(HttpServletRequest req, String pbid);
공개 무효 실행() {
실행(요청,pbid);
}
공개 무효 setRequest(HttpServletRequest req){
this.request=요청;
}
공공 무효 setPbid(문자열 pbid){
this.pbid=pbid;
}
}
특정 프로젝트에 대한 코드를 제공하는 것이 불편하므로 여기서는 복잡한 트랜잭션 처리를 수행하는 클래스인 또 다른 테스트 클래스를 다음과 같이 작성했습니다.
공개 클래스 TestPB는 AbstractProgressBar를 확장합니다.
공개 무효 실행(HttpServletRequest req, 문자열 pbid) {
String sql="temp_table(idx)값에 삽입(?)";
int pid=Integer.parseInt(pbid);
ProgressBar pb=new ProgressBar(pid,300,0,1);
//대규모 트랜잭션 시뮬레이션
for(int i=0;i<300;i++){
DbUtils.executeUpdate(sql,new Object[]{new Integer(i)});
//진행상황 제어
pb.stepIt();
}
}
}
그런 다음 AJAX 기술을 사용하여 웹 페이지의 새로 고침되지 않는 진행률 표시줄을 실현합니다. 코드는 다음과 같습니다.
<%@ 페이지 contentType="text/html;charset=UTF-8"%>

<스타일 유형="텍스트/css">


<스크립트 유형="텍스트/자바스크립트">
var xmlHttp;
var pbid;//진행률 표시줄 ID
함수 createXMLHttpRequest(){
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = 새로운 XMLHttpRequest();
}
}
함수 checkDiv() {
var Progress_bar = document.getElementById("progressBar");
if (progress_bar.style.visibility != "visible") {
Progress_bar.style.visibility = "표시됨";
}또 다른
{
Progress_bar.style.visibility = "숨김";
}
}
함수 이동() {
createXMLHttpRequest();
checkDiv();
var url = "../servlet/ProgressBarServlet?task=create&impcls=blogcn.pb.imp.TestPB";//여기서 blogcn.pb.imp.TestPB는 복잡한 트랜잭션의 구현 클래스입니다.
var 버튼 = document.getElementById("go");
버튼.비활성화 = true;
xmlHttp.open("GET", url, true);
xmlHttp.setRequestHeader("Content-Type", "text/xml;charset=gb2312");
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send(null);
}
함수 goCallback(){
if (xmlHttp.readyState==4)
{
if (xmlHttp.status==200) {
pbid=xmlHttp.responseXML.getElementsByTagName("pbid")[0].firstChild.data;
setTimeout("pollServer()", 2000);
}
}
}
함수 pollServer() {
createXMLHttpRequest();
var url = "../servlet/ProgressBarServlet?task=poll&pbid="+pbid;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
함수 pollCallback(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var 퍼센트_완료 =
xmlHttp.responseXML
.getElementsByTagName("퍼센트")[0].firstChild.data;
if (퍼센트 완료 < 100) {
PB1.pos=percent_complete;
PB1.업데이트();
setTimeout("pollServer()", 2000);
} 또 다른 {
PB1.pos=100;
PB1.업데이트();
document.getElementById("go").disabled = false;
}
}
}
}