😲 시작하기에 앞서
비동기 통신을 통해 데이터를 가져온 후 웹 페이지에 적용하는 방법과
비동기 통신이 이루어지는 순서와 기본 개념을 정확히 이해하고싶어서
정리하고자 한다. 자바스크립트 파워북이라는 책의 내용을 참고하였다.
1. AJAX란
비동기 방식으로 데이터를 주고 받기 위해 개발된 자바스크립트 기술이다.
AJAX는 "Asynchronous Javascript and XML"의 약자로
최초에는 XML/XLST 포맷 데이터를 서버, 또는 원격의 PC와 비동기로
주고받기 위해 고안된 자바스크립트 기술이었으나, 서버와 주고받는 데이터가 JSON 포맷이 주가 되면서 현재는 JSON데이터를 주로 주고받는
웹 비동기 기술로 완전히 정착됐다.
AJAX는 HTML, XML, JSON등의 다양한 데이터를 주고 받을 수 있다.
AJAX 구현에는 여러 가지 복잡한 기술들이 유기적으로 엮여서 동작하므로
동작의 흐름을 이해하는 것이 중요하다.
다음의 코드예제를 통하여 흐름을 정확히 이해해보자.
2. AJAX 기초 예제
코드
결과
하나하나씩 차근차근 알아보자.
1.먼저 XMLHttpRequest 객체를 생성한다.
const ajax = new XMLHttpRequest();
- 접속할 원격 URL을 담은 변수를 하나 만든다.
const url = 'https://jsonplaceholder.typicode.com/todos/1';
((위 URL은 공개 JSON데이터 REST API데모 서비스를 제공하는 JSONPlaceholder 사이트의 URL 중 하나이다. ))
3.AJAX 요청에 대한 응답(onload) 을 처리하는 콜백 함수를 작성해
XMLHttpRequest 객체의 onload 이벤트에 적용한다.
ajax.onload = function(){
if(ajax.status >= 200 && ajax.status < 300){
successCallback(ajax.response);
}else{
errorCallback(new Error(ajax.statusText));
}
};
(함수에서는 XMLHttpRequest의 상태 정보를 기준으로 응답 상태 값이
200 ~ 299 이면 정상 결과 값이 돌아 온것으로 판단해 성공 시 처리하는
함수를 호출한다.
그렇지 않으면 에러 정보를 담은 객체를 생성해 에러 처리 함수의 파라메터로 넘긴다.)
- 에러 이벤트 발생시 처리할 에러 콜백 함수명을 적용한다. 에러 처리용 공통 함수를 만들어서 같은 함수를 적용하면 된다.
ajax.onerror = errorCallback;
//에러 처리 콜백 함수
function errorCallback(err){
console.log('error:'+err.message);
}
- open()메서드로 비동기 연결을 시작한다. 소스의 URL로 접속하면
바로 JSON 결과가 표시되기 때문에 GET 방식으로 연결한다.
ajax.open('GET', url);
- 요청 헤더 값을 설정한다. 받은 데이터 포맷이 JSON 이므로
"application/json" 을 수신 포맷으로 설정한다.
ajax.setRequestHeader('Accept', 'application/json');
- send()메서드를 호출해 전송을 한다. 서버에 응답 요청이 전달되고
서버의 응답(결과 JSON데이터)이 회신된다.
ajax.send();
- 콘솔창에 응답 JSON 데이터가 표시되는지 확인한다.
결과가 성공일 경우 XMLHttpRequest 객체의 response 에 응답 데이터가 답겨서 돌아온다. 응답 성공시 처리하는 콜백 함수 파라메터로 응답 객체
ajax.response 를 넘긴다.
//성공 처리 함수
function successCallback(response){
console.log('response: '+response);
}
- AJAX로 받은 응답을 기초로 HTML 페이지에 태그를 생성해 붙여 넣거나 하는 경우 HTML DOM이 생성된 후 실행되어야 한다.
다음 코드의 이벤트 리스너(Event listener)안에 AJAX 요청 및
응답 처리를 하면 된다!!
document.addEventListener('DOMContentLoaded', function(){
//AJAX 요청 및 응답 처리
)};
