Ajax(Asynchronous Javascript And XML)
Ajax는 자바스크립트를 사용하여 비동기적으로 서버와 통신하여 데이터를 교환할 수 있는 방식을 의미한다.
- Ajax를 사용한다면 화면 전체를 리로드하지 않고 갱신이 필요한 일부만을 리로드하기 때문에 시간을 아낄 수 있는 장점이 있다.
브라우저에서 이러한 Ajax 요청을 하고 싶다면,XMLHttpRequest 객체를 사용하면 된다.
XMLHttpRequest
요청
XMLHttpRequest 객체를 생성하고open() 메서드를 이용하여 서버에게 보낼 요청을 정의할 수 있다.
// 서버에게 보낼 요청을 정의
const request = new XMLHttpRequest();
request.open(method, url);- 요청을 정의하고나면 이제
send() 메서드를 통해 서버에게 전달 할 수 있다.
// 서버에게 전송
request.send();
open() 메서드의 세번째 파라미터로 false를 주게되면 비동기 방식이 아닌 동기 방식으로 동작하게 된다.
요청시에 header를 설정하고 싶다면 setRequestHeader() 메서드 이용.
응답
- 서버에 Request를 요청하면 서버로부터 Response를 받게 되는데 비동기적으로 받아와지는 Response를 받기 위해서는
onreadystatechange이벤트또는load이벤트를 사용하면 된다.
XMLHttpRequest 객체에는 readyState 속성이 존재하는데 readyState가 0일 때는 open() 메서드 호출 전, 3일 때는 요청한 데이터를 처리중과 같은 객체의 현재상태를 추적할 수 있는데
onreadystatechange이벤트는 이러한 readyState 속성 값이 변화할 때마다 호출되기 때문에 서버로 부터 응답을 받을 때만 반응하고 싶다면 load이벤트를 사용하면 된다.
request.onload = function(e){
console.log(request.responseText);
}
responseText속성에는 서버로부터 받은 데이터가 존재하는데
보통 최근에는 데이터 포맷으로 많이 사용하는 JSON 형식으로 저장되어 있기 때문에 객체로 변환하여 사용해야 한다.
데이터 포맷
서버와 데이터를 주고받을 때 데이터 포맷으로 사용되는 대표적인 것들은 XML, JSON등이 존재한다.
하지만 보통 가독성과 용량, 특정언어에 종속되지 않는다는 장점 때문에 JSON 형식을 많이 사용한다고 한다.
서버에게 데이터를 보낼 때
객체 형식 -> JSON 형식
JSON.stringify({title: 'title', body: 'body is ...'})서버로부터 데이터를 받을 때
서버로부터 받은 데이터는 JSON 형식이기 때문에 객체로 변환하는 작업이 필요하다.
JSON 형식 -> 객체 형식
const text = request.responseText;
const obj = JSON.parse(text);
fetch, axios
좀 더 편리하게 사용하고 싶다면 fetch나 axios를 이용하는 것이 좋다.
