[Vue.js] Vue.js Ajax 통신
VueJS Ajax 통신
VueJS 에는 자체적으로 구현된 Ajax 통신 방법이 있지만 대세인 axios 라이브러리를 사용하는 예제를 연습했다.
Ajax는 Asynchronous JavaScript and XML 약자로 동적인 웹 페이지를 만들기 위한 개발 기법이다. 웹 페이지 전체를 다시 로딩하지 않고 웹 페이지 일부분만을 갱신할 수 있도록 돕는다. 이런 통신 형태로 주고 받는 데이터 형태는 JSON, XML, HTML, TEXT 등이 있다.
Ajax 장점은 아래와 같다.
- 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신
- 웹 페이지가 로드된 후에 서버로 데이터 요청 가능
- 웹 페이지가 로드된 후에 서버로부터 데이터 수신 가능
- 백그라운드 영역에서 서버로 데이터 전송 가능
반면 Ajax 의 한계는 아래와 같다. 서버 푸시(서버가 자동으로 특정 정보를 연결된 클라이언트에 제공하는 방식)와는 다르게 클라이언트 풀링 방식을 사용하기 때문에 업데이트가 어렵다는 한계가 있다고 한다. 이번 스터디에서 해당 문제를 해결한(?) 사례가 하나 있는데 나중에 정리할 예정.
- Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없음
- Ajax로는 바이너리 데이터를 보내거나 받을 수 없음
- Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없음
- 클라이언트의 PC로 Ajax 요청을 보낼 수는 없음
간단한 예제를 아래 남겼다. 주의할 점으로 axios.get().then(){} 내부에서 this 를 사용하면 axios 객체로 인지하기 때문에 Vue 객체를 선언해 사용할 것!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
data1 : '',
data2 : ''
},
methods : {
getData : function(){
axios.get('./data.json').then(function(response){
vm1.data1 = response.data.data1
vm1.data2 = response.data.data2
})
}
}
})
}
</script>
</head>
<body>
<div id='test1'>
<h3>data1 : </h3>
<h3>data2 : </h3>
<button type='button' @click='getData'>데이터 불러오기</button>
</div>
</body>
</html>
Leave a comment