응용 프로그램을 설치하고 다운로드하는 동안 진행률 표시 줄의 사용이 매우 일반적이되었습니다. 진행률 표시 줄은 프로젝트의 완료 진행 상황을 식별하는 데 사용될 수 있으며 백분율 또는 숫자로 표시 될 수 있으며 수평으로 배치 할 수 있습니다. Ajax 기술을 사용하여 진행률 표시 줄을 생성하면 기능이 더욱 강력하고 빠릅니다.
이제 Ajax 기술을 사용하여 진행률 표시 줄의 구현을 보여주는 인스턴스를 만듭니다. 이 인스턴스는 클라이언트 코드 및 서버 코드로 나눌 수도 있습니다.
1. 서버 코드
서버 코드는 주로 클라이언트 요청 정보의 문장을 구현하고 해당 백분율 번호를 반환합니다. 메모장을 열고 다음 코드를 입력하십시오.
<%@ page contenttype = "text/html; charset = gb2312"언어 = "java"import = "java.sql.*"errorpage = ""%> <%! int counter = 1; 참고 : 여러 사용자 가이 변수를 공유 하며이 진행률 막대는 단일 사용자에게만 적합합니다.%> <% string task = request.getParameter ( "task"); 문자열 res = ""; if (task.equals ( "create")) {res = "1"; 카운터 = 1; } else {문자열 백분율 = ""; 스위치 (카운터) {case 1 : % = "10"; 부서지다; 사례 2 : % = "23"; 부서지다; 사례 3 : % = "35"; 부서지다; 사례 4 : % = "51"; 부서지다; 사례 5 : % = "64"; 부서지다; 사례 6 : % = "73"; 부서지다; 사례 7 : % = "89"; 부서지다; 사례 8 : % = "100"; 부서지다; } 카운터 ++; res = "< %>" + % + "</cents>"; } // printwriter out = response.getWriter (); Response.setContentType ( "Text/XML"); Response.SetHeader ( "Cache-Control", "No-Cache"); out.println ( "<response>"); out.println (res); out.println ( "</respones>"); out.close (); %>ProgressBar.jsp 이름으로 위의 코드를 저장하십시오. 이 파일에서는 변수 카운터가 선언되고 1의 값이 할당되며, 이는 진행률 표시 줄이 백분율 번호를 반환하는 기초입니다. 아래에서 요청 객체를 사용하여 클라이언트가 전송 한 변수 작업의 값을 얻으십시오. 값이 생성되면 진행률 표시 줄을 다시 만들어야하고 카운터 값이 1으로 설정되어 있음을 의미합니다. 작업이 생성되지 않으면 카운터 값에 따라 백분율 번호가 반환되고 작업이 완료되고 카운터 값이 1에 추가됩니다.
2. 클라이언트 코드
이 예제의 클라이언트 코드는 주로 반환 백분율 번호에 따라 진행률 표시 줄의 상태를 구현합니다. 메모장을 열고 다음 코드를 입력하십시오.
<html> <head> <title> jsp+ajax 진행률 바 </title> <script type = "text/javaScript"> var xmlhttp; var bar_color = 'blue'; var span_id = "옐로우"; var clear = ""함수 createxmlhttprequest () {if (wind } else if (wind }} function go () {createxmlhttprequest (); checkDiv (); var url = "progressBarjsp.jsp? 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? task = poll"; xmlhttp.open ( "get", url, true); xmlhttp.onreadyStateChange = PollCallback; xmlhttp.send (null); } function pollcallback () {if (xmlhttp.readystate == 4) {if (xmlhttp.status == 200) {var % _complete = xmlhttp.responsexml.getEmentementSyTagName ( "0] .firstchild.data; var index = processResult (백분율 _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) {documb }} if (index <9) {settimeout ( "pollserver ()", 2000); } else {document.getElementById ( "완료"). innerHtml = "웹 사이트가로드되었습니다!"; }}}}} 함수 processResult (percent_complete) {var ind; if (prent_complete.length == 1) {ind = 1; } else if (preng_complete.length == 2) {ind = % _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 ( "완료"). innerHtml = ""; } else {progress_bar.style.visibility = "visible"}} 함수 clearbar () {for (var i = 1; i <10; i ++) {var elem = document.getElementById ( "block"+i); elem.innerhtml = clear; elem.style.backgroundColor = "화이트"; }} </script> </head> <body onload = "go ();"> <h1 align = center> 웹 사이트가로드 중입니다. 기다려주세요 </h1> <p> <table align = "center"> <tbody> <tr> <td> <div id = "progressbar"style = "padding : 2px; 경계 : solice whell 2px; <span id = "block2"> </span> <span id = "block3"> </span> <span id = "block4"> </span id = "block5"> </span> <span id = "block6"> </span> <span id = "block7"> </span> < "block8"> </span id = "block9"> <tr> <td align = "center"id = "complete"> </td> </tr> </tbody> </table> </body> </html>JSPProgressBar.html이라는 이름으로 위 코드를 저장하십시오. 이 파일에서 JavaScript 함수 CreatexMlhttPrequest ()는 주로 XMLHTTPREQUEST 객체를 작성하는 데 사용됩니다. go () 함수는 서버에서 비동기 요청을 보내려고합니다. 웹 페이지가로드 될 때 기능이 호출됩니다. 주요 기능은 서버를 알리고 클라이언트에서 진행률 표시 줄을 실행하는 것입니다. gocallback () 함수는 주로 서버의 응답을 처리하는 데 사용되며 2 초마다 pollserver () 함수를 호출합니다. 또한 서버에 비동기 요청을 보내는 데 사용됩니다. 주로 서버 응답의 백분율을 요청합니다. PollCallback () 함수는 주로 서버 측 응답을 처리하는 데 사용됩니다. 즉, 서버 측에서 반환 된 숫자에 따라 진행률 표시 줄의 표시 상태를 지정합니다. 여기서 Gocallback () 함수는 한 번만 실행되며 PollCallback () 함수는 여러 번 실행될 수 있으며 다른 세 가지 함수는 진행률 표시 줄을 구현하는 보조 기능입니다.
3. 실행
위의 두 JSP 파일을 JSP 디렉토리에 복사하십시오. 작동 렌더링은 다음과 같습니다.