AJAX를 사용하여 웹 페이지에 진행률 표시줄을 구현하는 예 공유

AJAX를 사용하여 웹 페이지에 진행률 표시줄을 구현하는 예 공유_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:01:44

원래의

2005명이 탐색했습니다.

애플리케이션 설치 및 다운로드 과정에서 진행률 표시줄을 사용하는 것이 매우 보편화되었습니다. 진행률 표시줄은 프로젝트의 완료 진행률을 나타내는 데 사용할 수 있으며 백분율 또는 숫자로 표시할 수 있으며 가로로 배치할 수 있습니다. Ajax 기술을 사용하여 진행률 표시줄을 만들어 기능을 더욱 강력하고 빠르게 만듭니다.
이제 Ajax 기술을 사용하여 진행률 표시줄을 구현하는 방법을 보여주는 예제를 만듭니다. 이 예제는 클라이언트 코드와 서버 코드로 나눌 수도 있습니다.

1, 서버코드
서버 코드는 주로 클라이언트의 요청 정보를 구현하고 해당 백분율을 반환합니다. 메모장을 열고 다음 코드를 입력하세요:

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> 
<%! 
int counter = 1;//注意：多用户将共享此变量，此进度条只适合单用户 
%> 
<% 
 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>" + percent + "</percent>"; 
  } 
   
  // PrintWriter out = response.getWriter(); 
  response.setContentType("text/xml"); 
  response.setHeader("Cache-Control", "no-cache"); 
  out.println("<response>"); 
  out.println(res); 
  out.println("</response>"); 
  out.close();  
%>

로그인 후 복사

위 코드를 ProgressBar.jsp로 저장합니다. 이 파일에서는 변수 counter가 선언되고 값 1이 할당됩니다. 이 변수는 진행률 표시줄에서 반환되는 백분율 숫자의 기초입니다. 아래 요청 개체를 사용하여 클라이언트가 보낸 변수 작업의 값을 가져옵니다. 값이 생성되면 진행률 표시줄을 다시 생성해야 하며 작업이 완료되면 카운터 값이 1로 설정됩니다. 생성하지 않으면 숫자 값을 기준으로 백분율이 반환되며, 작업이 완료된 후 카운터 값이 1씩 증가합니다.

2, 클라이언트 코드
이 예제의 클라이언트 코드는 주로 반환된 백분율 숫자를 기반으로 진행률 표시줄의 상태를 표시합니다. 메모장을 열고 다음 코드를 입력하세요:

<html> 
 <head> 
 <title>JSP+Ajax 进度条</title> 
 <script type="text/javascript"> 
  var xmlHttp; 
  var bar_color = 'blue'; 
  var span_id = "yellow"; 
  var clear = " " 
 
  function createXMLHttpRequest() { 
   if (window.ActiveXObject) { 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
   else if (window.XMLHttpRequest) { 
    xmlHttp = new XMLHttpRequest();     
   } 
  } 
 
  function go() { 
   createXMLHttpRequest(); 
   checkDiv(); 
   var url = "ProgressBarJsp.jsp&#63;task=create"; 
   xmlHttp.open("GET", url, true); 
   xmlHttp.onreadystatechange = goCallback; 
   xmlHttp.send(null); 
  } 
 
  function goCallback() { 
   if (xmlHttp.readyState == 4) { 
    if (xmlHttp.status == 200) { 
     setTimeout("pollServer()", 2000); 
    } 
   } 
  } 
   
  function pollServer() { 
   createXMLHttpRequest(); 
   var url = "ProgressBarJsp.jsp&#63;task=poll"; 
   xmlHttp.open("GET", url, true); 
   xmlHttp.onreadystatechange = pollCallback; 
   xmlHttp.send(null); 
  } 
   
  function pollCallback() { 
   if (xmlHttp.readyState == 4) { 
    if (xmlHttp.status == 200) { 
     var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data; 
      
     var index = processResult(percent_complete); 
     for (var i = 1; i <= index; i++) { 
      var elem = document.getElementById("block" + i); 
      elem.innerHTML = clear; 
 
      elem.style.backgroundColor = bar_color; 
      var next_cell = i + 1; 
      if (next_cell > index && next_cell <= 9) { 
       document.getElementById("block" + next_cell).innerHTML = percent_complete + "%"; 
      } 
     } 
     if (index < 9) { 
      setTimeout("pollServer()", 2000); 
     } else { 
      document.getElementById("complete").innerHTML = "网站已完成加载!"; 
     } 
    } 
   } 
  } 
   
  function processResult(percent_complete) { 
   var ind; 
   if (percent_complete.length == 1) { 
    ind = 1; 
   } else if (percent_complete.length == 2) { 
    ind = percent_complete.substring(0, 1); 
   } else { 
    ind = 9; 
   } 
   return ind; 
  } 
 
  function checkDiv() { 
   var progress_bar = document.getElementById("progressBar"); 
   if (progress_bar.style.visibility == "visible") { 
    clearBar(); 
    document.getElementById("complete").innerHTML = ""; 
   } else { 
    progress_bar.style.visibility = "visible" 
   } 
  } 
   
  function clearBar() { 
   for (var i = 1; i < 10; i++) { 
    var elem = document.getElementById("block" + i); 
    elem.innerHTML = clear; 
    elem.style.backgroundColor = "white"; 
   } 
  } 
 </script> 
 </head> 
 <body onload="go();"> 
 <h1 align=center>网站正在加载中，请稍候</h1> 
 
 <p> 
 <table align="center"> 
  <tbody> 
   <tr><td> 
    <div id="progressBar" style="padding:2px;border:solid yellow 2px;visibility:hidden"> 
     <span id="block1"> </span> 
     <span id="block2"> </span> 
     <span id="block3"> </span> 
     <span id="block4"> </span> 
     <span id="block5"> </span> 
     <span id="block6"> </span> 
     <span id="block7"> </span> 
     <span id="block8"> </span> 
     <span id="block9"> </span> 
    </div> 
   </td></tr> 
   <tr><td align="center" id="complete"></td></tr> 
  </tbody> 
 </table> 
 </body> 
</html>

로그인 후 복사

위 코드를 JspprogressBar.html로 저장하세요. 이 파일에서 JavaScript 함수 createXMLHttpRequest()는 주로 XMLHttpRequest 객체를 생성하는 데 사용됩니다. go() 함수는 웹 페이지가 로드될 때 호출됩니다. 서버를 실행하고 클라이언트에서 진행률 표시줄을 시작합니다. GoCallback() 함수는 주로 서버의 응답을 처리하는 데 사용되며, pollServer() 함수는 2초마다 호출되어 서버에 비동기 요청을 보내는 데에도 사용되며 주로 서버 응답의 비율을 요청합니다. PollCallback() 함수는 주로 서버측 응답을 처리하는 데 사용됩니다. 즉, 서버측에서 반환된 숫자에 따라 진행률 표시줄의 표시 상태를 지정하는 데 사용됩니다. 여기서 주목해야 할 점은 goCallback() 함수는 한 번만 실행되는 반면 PollCallback() 함수는 여러 번 실행될 수 있다는 점입니다. 나머지 세 함수는 진행률 표시줄을 구현하기 위한 보조 함수입니다.

3, 달려
위의 두 Jsp 파일을 JSP 디렉터리에 복사합니다. 작동 효과 다이어그램은 다음과 같습니다.

201656165706542.jpg (518×153)