ajax: 사용자 체험 진도 개선

최근 프로젝트 에서 업로드 기능 이 있 습 니 다. cvs 파일 을 업로드 한 다음 에 이 파일 을 분석 하고 데이터 베 이 스 를 기록 합 니 다. 큰 파일 을 전송 해 야 하기 때문에 고객 이 이 기능 을 완성 하 는 데 40 분 이 걸 립 니 다. 이 과정 에서 페이지 에 도 아무런 알림 이 없어 서 사용자 체험 이 매우 좋 지 않 습 니까?왜 ajax 를 진도 항목 으로 만 들 지 않 습 니까?두 단계 로 나 누 어 이 수 요 를 완성 합 니 다. 하 나 는 간단 한 ajax 를 쓰 고 가장 간단 한 진도 항목 기능 을 실현 합 니 다.2. 이 진도 조 를 프로젝트 에 사용 할 수 있 는 진도 조로 개조 합 니 다.
1. 가장 간단 한 진도 1.클 라 이언 트 는 2 초 마다 createXMLHttpRequest 요청 을 서버 에 보 냅 니 다. 서버 에서 되 돌아 오 는 진도 데 이 터 를 받 습 니 다. 서버 에서 돌아 오 는 데이터 에 따라 자바 script 으로 table 의 width 를 업데이트 합 니 다. 그러면 진도 바. progressbar. html 을 모 의 했 습 니 다. 내용 은 다음 과 같 습 니 다.
      Ajax Progress Bar    <br>        var xmlHttp;<br>        var key;<br>        function createXMLHttpRequest() {<br>            if (window.ActiveXObject) {<br>                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br>            } <br>            else if (window.XMLHttpRequest) {<br>                xmlHttp = new XMLHttpRequest();                <br>            }<br>        }</p>
<p>        function go() {<br>            createXMLHttpRequest();<br>            clearBar();<br>            var url = "ProgressBarServlet?task=create";<br>            var button = document.getElementById("go");<br>            button.disabled = true;<br>            xmlHttp.open("GET", url, true);<br>            xmlHttp.onreadystatechange = goCallback;<br>            xmlHttp.send(null);<br>        }</p>
<p>        function goCallback() {<br>            if (xmlHttp.readyState == 4) {<br>                if (xmlHttp.status == 200) {<br>                    setTimeout("pollServer()", 2000);<br>                }<br>            }<br>        }<br>        <br>        function pollServer() {<br>            createXMLHttpRequest();<br>            var url = "ProgressBarServlet?task=poll&key=" + key;<br>            xmlHttp.open("GET", url, true);<br>            xmlHttp.onreadystatechange = pollCallback;<br>            xmlHttp.send(null);<br>        }<br>        <br>        function pollCallback() {<br>            if (xmlHttp.readyState == 4) {<br>                if (xmlHttp.status == 200) {<br>                    var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;<br>                    var progress = document.getElementById("progress");<br>                    var progressPersent = document.getElementById("progressPersent");<br>     progress.width = percent_complete + "%";<br>     progressPersent.innerHTML = percent_complete + "%";<br>                    if (percent_complete < 100) {<br>                        setTimeout("pollServer()", 2000);<br>                    } else {<br>                        document.getElementById("complete").innerHTML = "Complete!";<br>                        //document.getElementById("go").disabled = false;<br>                    }<br>                }<br>            }<br>        }        <br> function clearBar() {<br>   var progress_bar = document.getElementById("progressBar");<br>   var progressPersent = document.getElementById("progressPersent");<br>   var complete = document.getElementById("complete");<br>   progress_bar.style.visibility = "visible"<br>   progressPersent.innerHTML = "&nbsp;";<br>   complete.innerHTML = "Begin to upload this file...";<br> }<br>                              86%                                                                   completed
2: 아 날로 그 servlet: ProgressBarServlet 1. java, 내용 은 다음 과 같 습 니 다: package com. cyberobject. lcl. ajax;
import java.io.*;
import javax.servlet.*;import javax.servlet.http.*;
/** * * @author nate * @version */public class ProgressBarServlet extends HttpServlet { private int counter = 1;     /** Handles the HTTP GET method.  * @param request servlet request  * @param response servlet response  */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  String task = request.getParameter("task");  String res = "";          if (task.equals("create")) {   res = "1";   counter = 1;  }  else {   String percent = "";   switch (counter) {    case 1: percent = "10"; break;    case 2: percent = "23"; break;    case 3: percent = "35"; break;    case 4: percent = "51"; break;    case 5: percent = "64"; break;    case 6: percent = "73"; break;    case 7: percent = "89"; break;    case 8: percent = "100"; break;   }   counter++;                   res = "" + percent + "";  }          PrintWriter out = response.getWriter();  response.setContentType("text/xml");  response.setHeader("Cache-Control", "no-cache");  out.println("");  out.println(res);  out.println("");  out.close(); }     /** Handles the HTTP POST method.  * @param request servlet request  * @param response servlet response  */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  doGet(request, response); }     /** Returns a short description of the servlet.  */ public String getServletInfo() {  return "Short description"; }}3: 웹. xml 에 servlet 맵 설정:       ProgressBarServlet   ProgressBarServlet   com.cyberobject.lcl.ajax.ProgressBarServlet 
       ProgressBarServlet   /ProgressBarServlet 
  이 때 진도 표 는 이미 운행 할 수 있다. 다음 작업 은 그것 을 우리 시스템 에 이식 하 는 것 이다.  둘:  1: 데이터 베 이 스 를 쓰 는 class DbOperator 에 progress 속성 을 추가 합 니 다.  private int progress;
  2: 데이터 베 이 스 를 쓰 는 class 에 getProgress () 방법 을 추가 합 니 다.  public int getProgress()  { return progress;  }  3: 라 이브 러 리 를 쓰 는 for 순환 에서 progress +;  4: DbOperator 를 호출 하 는 servlet 에서 DbOperator 의 getProgress () 방법 을 호출 하면 진도 항목 에 실시 간 데 이 터 를 제공 합 니 다.  5: 또한: servlet 의 doGet () 은 진도 데 이 터 를 얻 는 데 사용 되 고 doPost () 는 파일 을 업로드 하고 라 이브 러 리 작업 을 하 는 데 사 용 됩 니 다. 서로 분업 이 명확 합 니 다.  특별히 보관 합 니 다.