Ajax 통신시 제한시간 설정 및 로딩 아이콘 표시하기

ajax 통신시 제한시간 설정 및 로딩 아이콘 표시하기

1. 로딩 아이콘 CSS 설정(샘플 참고 사이트)
   

   /* <style> (css) */
   .loading {
   	display: inline-block;
   	width: 30px;
   	height: 30px;
   	border: 3px solid rgba(255,255,255,.3);
   	border-radius: 50%;
   	border-top-color: #fff;
   	animation: spin 1s ease-in-out infinite;
   	-webkit-animation: spin 1s ease-in-out infinite;
   }
   @keyframes spin {
   	to { -webkit-transform: rotate(360deg); }
   }
   @-webkit-keyframes spin {
   	to { -webkit-transform: rotate(360deg); }
   }

   - style 태그 혹은 css 파일에 loading 클래스를 정의한다.
   
   
2. Javascript ajax 통신 설정
   

   $.ajax({
   	url: '/login',
   	type: 'post',
   	contentType: 'application/json:chrset=utf-8',
   	data: JSON.stringify({data: sendData}),
   	success: function(resData) {
   		alert('성공!');
   	},
   	beforeSend: function() {
   		$('#btnLogin').html('<div class="loading"></div>');
   		$('#btnLogin').attr('disabled',true);
   	},
   	complete: function() {
   		$('#btnLogin').text('Log in');
   		$('#btnLogin').attr('disabled',false);
   	},
   	error: function(request, status, error) { // 오류가 발생했을 때 호출된다.
   		if(error === 'timeout'){
   			alert('서버 응답 제한시간 초과');
   		}else{
   			alert('아이디 혹은 비밀번호를 확인해주세요.');
   		}
   	}
   	,timeout: 5000 // 서버 응답 제한시간 5초
   });​

   - beforeSend : 요청에 대한 응답을 받기 전에 실행된다.
   - complete : 요청에 대한 응답이 오면 실행된다.
   - timeout : 서버 응답 제한시간을 밀리초로 설정하여 제한시간이 초과하면 timeout 오류를 발생시킨다.
   - 따라서 beforeSend 에서 loading 클래스를 가진 div 를 보여주고, complete 에서 다시 안보이게 하면 된다.
   - 응답 제한시간은 timeout 으로 설정한다.
   
   

예제 코드처럼 작성할 경우, 응답을 5초간 기다리며

돌아가는 로딩 아이콘

위와 같이 나오며 클릭이 제한되고, 응답 제한시간이 초과되거나 응답이 도착하면 기존처럼 돌아간다.

기존, 완료된 모습