jquery로 ajax호출시 로딩이미지 보여주기
Ajax호출로 데이터를 가져오는 부분에 로딩이미지가 보여지는 사이트는 어렵지 않게 찾아볼 수 있는데 막상 구현하려면 머리가 아프다.
그래서 jQuery를 이용해서 쉽게 구현하는 방법을 생각만 하다가 오랜만에 시간이 나서 한번 만들어봤다.
jQery Api 는 http://jquery.com 사이트에 가면 쉽게 찾아볼 수 있으니 ajax호출에 대한 자세한 부분은 찾아보면 되겠다.
먼저 순서를 생각해보면 다음과 같다.
index.jsp -> ajax를 직접적으로 호출하는 페이지이다.
response.jsp -> ajax를 호출했을 때 데이터를 처리하고 응답을 보내주는 페이지
그럼
소스를 살펴보자.
참고로 이해를 돕기 위해서 간단하게 설명한다.
index.jsp
먼저 index.jsp에 ajax로 도착한 응답이 들어갈 영역이 필요하겠다.
그리고
이 영역의 모양을 css로 정의 해준다.
#target {
width: 500px;
height: 300px;
border: 1px dashed #000fff;
}
여기에 ajax를 호출하는 함수를 정의해주면 index.jsp 페이지는 끝이난다.
function fncCallAjax(){
$.ajax({
type : "POST" //"POST", "GET"
, async : true //true, false
, url : "/common/response.jsp" //Request URL
//, dataType : "html" //전송받을 데이터의 타입
//"xml", "html", "script", "json" 등 지정 가능
//미지정시 자동 판단
, timeout : 30000 //제한시간 지정
, cache : false //true, false
, data : 'a=asdf'
//$("#inputForm").serialize() //서버에 보낼 파라메터
//form에 serialize() 실행시 a=b&c=d 형태로 생성되며 한글은 UTF-8 방식으로 인코딩
//"a=b&c=d" 문자열로 직접 입력 가능
, contentType: "application/x-www-form-urlencoded; charset=UTF-8"
, error : function(request, status, error) {
//통신 에러 발생시 처리
alert("code : " + request.status + "\r\nmessage : " + request.reponseText);
}
, success : function(response, status, request) {
//통신 성공시 처리
$('#target').html(response);
}
, beforeSend: function() {
var padingTop = (Number(($('#target').css('height')).replace("px","")) / 2) - 20;
//통신을 시작할때 처리
$('#loading').css('position', 'absolute');
$('#loading').css('left', $('#target').offset().left);
$('#loading').css('top', $('#target').offset().top);
$('#loading').css('width', $('#target').css('width'));
$('#loading').css('height', $('#target').css('height'));
$('#loading').css('padding-top', padingTop);
$('#loading').show().fadeIn('fast');
}
, complete: function() {
//통신이 완료된 후 처리
$('#loading').fadeOut();
}
});
}
또
ajax호출시 보여질 로딩이미지가 있는 영역이 필요하다. 평소엔 display:none으로 보이지 않고 있다가 ajax호출이 시작되어서 응답이 오기 전에 보이게 되고, 응답이 끝나면 다시 안보이게 된다.
[html]
<div id="loading">
<img src="ajax-loader.gif" />
</div>
[css]
#loading {
border:0;
display:none;
text-align: center;
background: #FFFFF0;
filter: alpha(opacity=60);
opacity: alpha*0.6;
}
여기서
짚고 넘어가야 할 부분이 beforeSend 부분이다.
이
옵션이 없으면 그냥 여느 ajax호출과 다를게 없다.
호출하고
나서 response가 돌아올 동안 저 beforeSend 부분이 실행이 되고, response를 정상적으로 받는 순간 complete-> success가 처리되는 형식이다.
정말
생각해보면 간단한 원리다.
굳이
어렵다면 css를 모른다면 로딩이미지영역의 크기를 데이터 뿌려주는 영역과 크기를 맞추는 부분이 어렵다고 느낄수 있을텐데 이 부분도 api나 css관련 문서를 찾아보면 된다.
뭐
거창한 듯 보일지 모르지만 jquery Api나 사이트에서 ajax호출부분을 찾아보면 상세히 설명이 되어있다.
혹시 몰라서 옵션을 이것저것 줘본 것 뿐이고, 필수가 아닌 옵션들도 있으니 입맛에 맞게 쓰면 되겠다.
response.jsp
<%
String a = request.getParameter("a");
%>
<%=a %>
ajax 호출함수에서 보면 알겠지만 a라는 이름으로 asdf라는 값이 /common/response.jsp로 넘어간다.
그럼 response.jsp에서는 그 값으로 DB에 접속해서 데이터를 가져올 수도 있고, 기타 처리도 가능하다.
response는 html, xml, json, text 등 다양한 포맷이 존재한다.
이것도 api를 찾아보면 쉽게 알수 있다.
여기서는
간단한 text를 response로 넘겨줬다.
이렇게
마무리를 하고 이미지나 버튼을 이용해서 ajax호출함수를 실행해 보면 데이터 영역에 로딩이미지가 나왔다가 사라지고 데이터가 들어가는 모습을 확인할 수 있다.
참고로
간단한 flow만 보여주려고 jsp만 이용했고, 별다른 설명이 필요없이 간단한 코드를 이용했다.
여기서는
데이터가 정말 간단한 텍스트이기 때문에 잠깐 보이지만 DB에서 데이터를 가져오거나 response로 xml을 받아서 가공한다면 그 과정이 끝날때까지 보일것이다.
이렇게
해서 jQuery로 ajax호출시 로딩이미지 보여주기는 마치기로 한다.
