js Ajax로 프로그래스바 만들기
controller
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@RequestMapping(value="/main/")
@Controller
public class MainController {
@RequestMapping(value="/testProgressBar.do", method=RequestMethod.GET)
public void testProgressBar(HttpServletResponse res){
try{
res.setHeader("Transfer-Encoding", "chunked");
res.setHeader("X-Content-Type-Options", "nosniff");
res.setHeader("X-XSS-Protection", "1");
res.setContentType("text/html;charset=utf-8");
PrintWriter out= res.getWriter();
for(int i = 1; i < 101; i++){
out.println(i);
out.flush();
Thread.sleep(100);
}
}catch (Exception e){
e.printStackTrace();
}
}
}
JSP
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>프로그래스바 테스트</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script>
//로그 콘솔 클리어
function doClear()
{
document.getElementById("divProgress").innerHTML = "";
}
//로그콘솔에 메시지 누적
function log_message(message)
{
document.getElementById("divProgress").innerHTML += message + '<br/>';
}
//비동기로 ajax_stream 호출
function ajax_stream()
{
if (!window.XMLHttpRequest){
log_message("Your browser does not support the native XMLHttpRequest object.");
return;
}
try
{
var xhr = new XMLHttpRequest();
xhr.previous_text = '';
xhr.onerror = function() { log_message("[XHR] Fatal Error."); };
xhr.onreadystatechange = function()
{
try
{
if (xhr.readyState > 2)
{
var result = xhr.responseText.substring(xhr.previous_text.length);
log_message(result);
//update the progressbar
console.log(result);
if(result != ''){
document.getElementById('progressor').style.width = Number(result) + "%";
}
xhr.previous_text = xhr.responseText;
}
}
catch (e)
{
log_message("<b>[XHR] Exception: " + e + "</b>");
}
};
xhr.open("GET", "/main/testProgressBar.do", true);
xhr.send();
}
catch (e)
{
log_message("<b>[XHR] Exception: " + e + "</b>");
}
}
</script>
</head>
<body>
Ajax based streaming without polling <br/>
<button onclick="ajax_stream();">프로그래스바 진행</button>
<button onclick="doClear();">로그삭제</button><br/>
LOGS<br/>
<div style="border:1px solid #000; padding:10px; width:300px; height:200px; overflow:auto; background:#eee;" id="divProgress"></div>
<br/>
<div style="border:1px solid #ccc; width:300px; height:20px; overflow:auto; background:#eee;">
<div id="progressor" style="background:#FF0000; width:0%; height:100%;"></div>
</div>
</body>
</html>
참고 및 화면 : http://www.binarytides.com/labs/ajax_stream/index.html
'[프로그래밍] > FrontEnd' 카테고리의 다른 글
| jqgrid 사용시 setCell (0) | 2017.06.23 |
|---|---|
| jqgrid - sort disable (0) | 2017.02.20 |
| jQGrid관련 (0) | 2015.12.28 |
| 셀렉트박스관련 (0) | 2015.10.28 |
| 이벤트버블링 방지를 위한 코드 (0) | 2015.10.27 |
댓글