웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
ajax 요청은 페이지 로딩 없이 데이터를 불러올 수 있다는 장점이 있다. 하지만 지나친 ajax 요청으로 데이터베이스 서버에 과부화를 줄 수도 있고 접속 인원이 많은 시간대에 데이터 트래픽이 과중될 경우 서버가 동작하는 않는 등의 문제가 생길 수 있을 것이다. 이런 문제는 아무리 데이터베이스 설계가 잘되있고 완벽한 환경을 갖추었다해도 언제든지 발생할 여지가 있다.
이런 문제가 발생하는 부분 중 하나로 예를들자면... 만약 검색어 영역에서 키보드를 누를때마다 미리보기를 위한 ajax 요청이 발생하는 경우를 생각해 볼 수 있을 것이다. 만약 수 많은 사용자가 키보드를 계속해서 누를 경우... 사용자가 많다면 지나치게 많은 요청이 발생할 수 있고 이는 해결하기 위한 방안이 필요할 것이다.
이런 경우에 어떠한 대안이 있을 수 있을까. 물리적 방법도 좋지만 기술적으로 대응할 수 있는 대비책이 있다면 더 좋을 것이다. 아래는 타이머와 ajax를 동시에 사용하여 모든 ajax 요청이 반드시 최소 1초 또는 정해진 지연시간 이 후에만 동작하도록 만들어보려한다.
! ajax 타이머 만들기 예제보기
먼저 정상적으로 이를 구현하기 위해서 가장 먼저 타이머가 필요할 것이다. 타이머는 ajax를 실행해도 되는지 않되는지를 결정하는 역할을 한다. 즉, ajax가 이전에 이미 실행되어 타이머가 동작이라면 ajax가 추가로 실행되는 것을 막는데 사용할 것이다. 이 타이머는 매우 간단하게 구현할 것이며 단순하게 원하는 시간을 인자로 넘기면 그 시간이 지났는지를 확인하여 불리언값으로 반환하는 것이 전부이다. 우선 타이머를 만드는 코드를 보자.<script type="text/javascript">
timerOn = false;
expnowminsec = 0;
// Ajax 통신중인지를 확인하는 전역변수 설정
// Ajax 요청 이전에 확인하는 timer() 함수를 생성
timer = function(delay) {
var delayVal = delay || 1000;
if (timerOn) {
// timer에 현재시간을 설정
nowTime = new Date;
nowmin = nowTime.getMinutes()*60*1000;
nowsec = nowTime.getSeconds() * 1000;
nowmillisec = nowTime.getMilliseconds();
nowminsec = nowmin + nowsec + nowmillisec;
}
else {
nowTime = new Date;
nowmin = nowTime.getMinutes()*60*1000;
nowsec = nowTime.getSeconds() * 1000;
nowmillisec = nowTime.getMilliseconds();
expnowminsec = nowmin + nowsec + nowmillisec + delay;
timerOn = true;
return true;
}
if (((timerOn)) && (expnowminsec != 0) && (expnowminsec != '')) {
if (expnowminsec <= nowminsec) {
timerOn = false;
expnowminsec = 0;
return false;
}
else {
timerOn = true;
return true;
}
}
timerOn = true;
return true;
}
</script>
여기까지가 타이머를 완성시키는 코드이다. 변수명 및 분기문이 다소 복잡하게 엃혀있으나 동작상에는 무리가 없다.(차후 개선하도록 하겠다.) 아래는 실제 ajax를 실행하는 코드로 timer() 함수를 먼저 실행시켜서 현재 동작중인지의 여부에 따라 작동하는 코드이다.timerOn = false;
expnowminsec = 0;
// Ajax 통신중인지를 확인하는 전역변수 설정
// Ajax 요청 이전에 확인하는 timer() 함수를 생성
timer = function(delay) {
var delayVal = delay || 1000;
if (timerOn) {
// timer에 현재시간을 설정
nowTime = new Date;
nowmin = nowTime.getMinutes()*60*1000;
nowsec = nowTime.getSeconds() * 1000;
nowmillisec = nowTime.getMilliseconds();
nowminsec = nowmin + nowsec + nowmillisec;
}
else {
nowTime = new Date;
nowmin = nowTime.getMinutes()*60*1000;
nowsec = nowTime.getSeconds() * 1000;
nowmillisec = nowTime.getMilliseconds();
expnowminsec = nowmin + nowsec + nowmillisec + delay;
timerOn = true;
return true;
}
if (((timerOn)) && (expnowminsec != 0) && (expnowminsec != '')) {
if (expnowminsec <= nowminsec) {
timerOn = false;
expnowminsec = 0;
return false;
}
else {
timerOn = true;
return true;
}
}
timerOn = true;
return true;
}
</script>
<script type="text/javascript">
if (timer(delay) == false) {
$.ajax({
...
});
}
</script>
여기까지 타이머를 사용한 ajax() 지연 방식의 코드를 완성하였다. 이와 같이 ajax()의 트래픽 과부화를 막기위한 방식으로 타이머를 설정할 수도 있겠지만 그 외의 다양한 방법들이 존재할 것이다. 예를들면 첫번째 보낸 ajax() 호출에 지연시간을 만들고 그 호출이 정상적으로 완료된 이후에만 보내는 코드도 생각해 볼 수 있다. 이를 간단하게 나타내면...if (timer(delay) == false) {
$.ajax({
...
});
}
</script>
i. ajax()가 실행여부를 결정하는 전역변수 생성 Ex) isAjax = false;
ii. ajax()를 통한 비동기 통신 실행하면서 isAjax = true; 설정
iii. ajax() 완료시점에 지연시간 발생 후 isAjax = false; 설정
iv. ajax()를 실행하기 위해 ii로 다시 이동
위 코드는 ii 그리고 iii 단계에 ajax()가 완료되어 일정시간이 지난다음에 다른 ajax()를 호출하는 방법이라 하겠다. 다음번에는 이 방식에 대한 코드를 만들어보겠다. 이처럼 서버와의 통신을 좀 더 효과적으로 할 수 있는 많은 방법들을 익혀두면 큰 도움이 될 것이다.
아래의 글도 찾고 계시지 않나요?
