[Ajax] 웹 페이지 로딩시 로딩바 구현하기
- Web/Ajax
- 2018. 5. 18.
웹 페이지를 만들다보면 서버나 페이지간의 데이터를 주고받을 일이 많습니다. 서버간의 통신을 하고있을경우 데이터를 받을때까지는 약간의 delay가 발생하게 되는데 적은 양의 데이터를 주고받는 일이라면 큰 문제가 되지않겠지만 많은 양의 데이터를 주고받을때는 그만큼 delay시간도 많이 발생하게 됩니다.. 이경우 사용자에게 Progress바를 이용하여 데이터가 불러지고 있다는것을 알려주는 것이 좋습니다. 이번 포스팅에서는 JavaScript Ajax를 활용한 로딩 프로그래스 바의 구현방법에 대해 알아보겠습니다.
이번 예제에서 사용될 로딩바입니다. 다운 받아주시고 이클립스안에 넣어주세요.
Ajax 통신예제는 저번포스팅에서 진행했던 예제 그대로 진행하고 거기에 로딩바만 추가해보도록 하겠습니다.
웹 페이지 로딩시 로딩바 구현하기
Main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax 로딩바 구현하기</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script><!-- 항상 최신버전의 JQuery를 사용가능하다. -->
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#Progress_Loading').hide(); //첫 시작시 로딩바를 숨겨준다.
})
.ajaxStart(function(){
$('#Progress_Loading').show(); //ajax실행시 로딩바를 보여준다.
})
.ajaxStop(function(){
$('#Progress_Loading').hide(); //ajax종료시 로딩바를 숨겨준다.
});
$(document).ready(function(){
$.ajax({
type : "GET", //전송방식을 지정한다 (POST,GET)
url : "InputData.jsp?type=2",//호출 URL을 설정한다. GET방식일경우 뒤에 파라티터를 붙여서 사용해도된다.
dataType : "text",//호출한 페이지의 형식이다. xml,json,html,text등의 여러 방식을 사용할 수 있다.
error : function(){
alert('통신실패!!');
},
success : function(Parse_data){
$("#Parse_Area").html(Parse_data); //div에 받아온 값을 넣는다.
alert("통신데이터 값 : " + Parse_data);
}
});
});
</script>
</head>
<body>
<div id = "Progress_Loading"><!-- 로딩바 -->
<img src="Progress_Loading.gif"/>
</div>
<style type = "text/css"> <!-- 로딩바스타일 -->
body
{
text-align: center;
margin: 0 auto;
}
#Progress_Loading
{
position: absolute;
left: 50%;
top: 50%;
background: #ffffff;
}
</style>
<div id="Parse_Area"></div> <!--받아온 데이터들이 들어갈 div -->
</body>
</html>
InputData.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>InputData</title>
</head>
<body>
데이터
</body>
</html>
결과화면
이렇게 하게되면 Ajax를 통하여 데이터를 주고받을때마다 가운데 로딩바가 생성되어 돌게됩니다. 위 예제는 로딩바의 매우 간단한 예제를 구현해놓은것이고 위의 예제를 바탕으로 각각의 설계에 맞게 수정하셔서 사용해주시면 될 듯하네요.
'Web > Ajax' 카테고리의 다른 글
| [Ajax] Csv형식의 데이터 파싱하기 (1) | 2018.05.21 |
|---|---|
| [Ajax] Ajax를 활용하여 다른페이지에 있는 데이터 받아오기 (3) | 2018.05.17 |
| [Ajax] Ajax란 무엇인가? (7) | 2018.05.12 |