최근에 코딩애플 유튜브를 보는데 제가 처음 자바스크립트 코드를 짜고 비동기 방식으로 데이터를 가져오면서 헷갈렸던 ajax, json 등의 개념을 쉽게 잘 설명해 주셔서 영상으로 봤던 내용들을 정리해 보려고 합니다.
ajax는 Asynchronous Javascript And XML 의 약자로 자바스크립트와 XML을 이용해 서버와 비동기적으로 테이터를 주고받는(서버와 통신하는) 방법을 말합니다. 최근에는 XML보다 JSON을 더 많이 사용합니다. 그렇다면 여기에서 말하는 xml과 json이란.. 데이터 포맷으로 서버에 데이터를 요청하면 xml 혹은 json등의 형식으로 데이터를 담아 보내줍니다.
데이터 포맷에는 언급된 xml과 json 말고 매우 다양한 형식이 존재합니다. 그중에서 세 가지 입니다.
<데이터이름>값</데이터이름>
<name>kim</name>
<age>20</age>
html과 유사한 위 형식으로 데이터를 담는 방식입니다. 자바스크립트를 사용하면 object자료로 쉽게 변환이 가능합니다. 하지만 괄호등의 기호 등을 사용하여 보기에 좋지 않고 용량을 많이 차지한다는 단점이 있습니다.
name, age, color
kim, 20, black
kang, 44, orange
표 모양으로 만든 데이터 포맷으로 데이터베이스에 있던 데이터를 변환하기 쉽다는 장점이 있습니다. 하지만 고차원데이터는 담아내기가 힘듭니다.
{ "name": "kim",
"age": "20" }
위 포맷의 단점들을 보완하여 현재 많이 쓰이고 있는 방식으로, key-value형태로 데이터를 저장합니다. 자바스크립트 object와는 달리 문자로 취급하여 서버에서 가져온 json데이터는 JSON.parse(json)
을 통해 js객체로 변환(파싱)하여 사용하고 js객체를 서버로 전송할 때는 json.stringify(obj)
로 문자열로 변환 후 전송해야 합니다.
주소창에 원하는 url을 입력하면 가져온 데이터를 확인할 수 있습니다.
<form action='원하는 url' method='get'>
<button type='submit' />
</form>
form태그를 이용해 원하는 데이터를 가져올 수 있습니다. 하지만 버튼이 실행되면 페이지 전체가 새로고침 된다는 단점이 있습니다.
js코드로 데이터를 요청하기 때문에 페이지의 새로고침없이 일부 데이터만 가져와 수정할 수 있다는 장점을 활용해 SPA 웹어플리케이션 만들기에 적합합니다. ajax로 get요청하는 방법은 크게 아래 세가지 방법이 있습니다.
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
console.log(ajax.reponseText)
}
};
ajax.open('GET', '원하는 url', true);
ajax.send();
fetch('원하는 url')
.then(res => {
return res.json()
})
.then(res => {
console.log(res)
})
axios.get('원하는 url')
.then(res =>
console.log(result.data)
).catch(error =>
console.log(error)
)