SPRING(08.21) - Ajax (Asynchronous JavaScript and XML), 조회수 증가, 로컬스트리지

Ajax (Asynchronous JavaScript and XML)

Ajax는 웹 페이지의 전체 페이지를 새로고침 하지 않고, 자바스크립트를 이용하여 페이지의 일부분만 서버에서 불러와 웹페이지 화면을 동적으로 변경하는 방식을 말한다.

Ajax안의 Asynchronous(비동기식)은 서버의 응답이 올 때까지 기다리지 않고, 서버의 데이터가 준비되는 동안에도 사용자가 웹페이지에서 다른 작업을 수행할 수 있는 방식을 말한다.

반대로 동기식은 서버의 응답이 돌아올때까지 사용자가 다른 작업을 수행하지 못하고 응답이 돌아와야 다른 처리를 진행할 수 있다.

동적인 웹페이지를 위해서는 Ajax가 필수이다.

데이터 전송 형식에는 XML, JSON이 있는데, 이 중 XML형식은 html처럼 태그형식으로 데이터를 표현하는데 열고 닫는 태그들 때문에 구조가 복잡해지고, 용량이 커진다.

json은 자바스크립트 객체 데이터 형식으로, XML 형식보다 구조가 간단하여 가독성이 뛰어나기에 AJAX 표준으로 사용된다.

 

 

---

AJAX을 통하여 서버에 조회수 증가 요청을 보내는 방식

<script>
	const params = {};
	params.id = parseInt('${param.id}');
</script>

<script>
	function ArticleDetail__doIncreaseHitCount() {
		$.get('../article/doIncreaseHitCountRd', {
			id : params.id,
			ajaxMode : 'Y'
		}, function(data) {
			console.log(data);
			console.log(data.data1);
			$('.article-detail__hit-count').empty().html(data.data1);
		}, 'json')
	}

	$(function() {
		setTimeout(ArticleDetail__doIncreaseHitCount, 2000);
	})
</script>

변수인 params를 생성하고 그 안에 id 라는 속성을 추가, ${params.id}는 서버에서 전달된 (전달된 파라미터의)id값을 의미하며, 이 값은 문자열 형태로 나타난다. 그렇기에 parseInt() 함수로 문자열을 숫자로 변환 되고, params.id에 저장

 

 

1. 요청

$.get은 jQuery의 get 메서드를 사용하여 서버에 데이터를 요청한다.

$.get('../article/doIncreaseHitCountRd', {
			id : params.id,
			ajaxMode : 'Y'
		},

'../article/doIncreaseHitCountRd'는 서버에 요청할 URL을 말한다. id : params.id는 위에서 파라미터에서 받아온 id값을 요청할 url과 같이 서버에 보낸다.

ajaxMode의 Y는 서버에 보내는 요청이 AJAX 요청이라는 것!

 

2. 응답

 function(data) {
			console.log(data);
			console.log(data.data1);
			$('.article-detail__hit-count').empty().html(data.data1);
		}, 'json')

 

서버로부터 받은 데이터를 data라는 변수로 받아오고 이 data와 data.dat1(최신 조회수)를 표시한다.

html에서 class가 article-detail__hit-count를 선택하여 기존의 내용을 모두 지우고, data.dat1 값을 새롭게 넣는다. 즉, 최신 조회수를 계속 업데이트 해주는 것!

$(function() {
	setTimeout(ArticleDetail__doIncreaseHitCount, 2000);
})

 

페이지가 새로고침된 후 2초후에 ArticleDetail__doIncreaseHitCount 함수를 호출하여 조회수를 증가시킨다.

 

---

 

하지만 위의 방법까지는 새로고침만 하면 조회수가 올라가는 식이다. 그렇다면 문제는 같은 회원이여도 새로고침할 때마다 끊임없이 오르고 비회원도 조회수가 올라가게 된다.
위 페이지에서는 회원만 해당 페이지를 보고 이후에는 새로고침하거나 같은 페이지를 다시 방문해도 조회수가 중복으로 올라가지 않도록 하고싶다.

const localStorageKey = 'article__' + params.id + '__alreadyOnView';
		if (localStorage.getItem(localStorageKey)) {
			return;
		}
		localStorage.setItem(localStorageKey, true);

 

회원이 이 페이지를 처음 보면, 이 정보 즉 id를 localStorage에 기록해 두고, 다음에 다시 방문할 때 아무 일도 하지 않도록했다.

 

localStroage는 JavaScript에서 제공하는 객체로, 웹브라우저에 데이터를 저장하고 관리하는 기능을 제공한다.

1. localStorage.setItem(key, value)

• 지정된 키와 값을 저장한다.
• localStorage.setItem(localStorageKey, true);

2. localStorage.getItem(key)

• 지정된 키에 저장된 값을 반환
• localStorage.getItem(localStorageKey)

3. localStorage.removeItem(key)

• 지정된 키에 해당하는 데이터를 삭제

4. localStorage.clear()

• localStorage에 저장된 모든 데이터를 삭제