By aPOST in 자바스크립트 —

AJAX 비동기 통신 기초(XMLHttpRequest)

비동기 웹 어플리케이션 제작을 위해 개발된 자바스크립트 기술입니다.

AJAX 는 Asynchronous Javascript and XML 의 약자입니다. 최초에는 XML/XLST 포맷 데이터를 서버와 비동기로 주고받기 위해 고안된 자바스크립트 기술이었으나, 서버와 주고받는 데이터가 JSON 포맷으로 사실상 표준화 되면서 현재는 JSON 데이터를 주로 주고받는 웹 비동기 기술로 정착했습니다.

AJAX는 HTML, XML, JSON 등의 다양한 데이터를 주고받을 수 있습니다.

AJAX 를 위해서는 XMLHttpRequest 객체를 사용합니다.

자바스크립트의 내장 객체로 비동기 통신 구현을 위한 객체이며, 대부분의 최신 브라우저에서 동일한 방식으로 지원합니다.

단, 인터넷 익스플로러는 지원 객체 구조가 달라 인터넷 익스플로러를 지원하려면 예외처리를 별도로 해야합니다.

XMLHttpRequest 객체는 서버로 요청을 보내고 요청을 받은 결과를 비동기로 처리합니다. 따라서 요청을 보낸 후 사용자든 UI 상호 작용이나 다른 AJAX 요청을 추가로 보낼 수 있습니다.

서버에서 응답이 오면 콜백 함수를 통해 결과 데이터 처리를 하게 됩니다.

XMLHttpRequest 객체를 이용해 AJAX 요청을 보내고 콜백 함수에서 받은 결과를 콘솔에 출력하는 간단한 예를 만들어봅니다.

const ajax = new XMLHttpRequest();
const url = 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json\?key=430156241533f1d058c603178cc3ca0e&targetDt=20120101';
ajax.onload = function(){
    if(ajax.status >= 200 && ajax.status < 300){
        successCallback(ajax.response);
    }else{
        errorCallback(new Error(ajax.statusText));
    }
};
ajax.onerror = errorCallback;
ajax.open('GET', url);
ajax.setRequestHeader('Accept', 'application/json');
ajax.send();

function successCallback(response){
    console.log('response:'+response);
}

function errorCallback(err){
    console.log('error:'+err.message);
}

하나씩 차근차근 알아봅니다.

1. XMLHttpRequest 객체를 생성합니다.

const ajax = new XMLHttpRequest();

2. 접속할 원격 URL을 담은 변수를 하나 만듭니다. 예제의 URL은 영화진흥위원회의 영화정보 API 서비스 중 JSON 예제에 접근하는 URL이며, 아무나 접속해서 JSON 정보를 볼 수 있습니다.

const url = 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json\?key=430156241533f1d058c603178cc3ca0e&targetDt=20120101';

3. AJAX 요청에 대한 응답(onload) 을 처리하는 콜백 함수를 작성해 XMLHttpRequest 객체의 onload 이벤트에 적용합니다.

함수에서는 XMLHttpRequest의 상태 정보를 기준으로 응답 상태값이 200 ~ 299 이면 정상 결과값이 돌아온 것으로 판단해 성공시 처리하는 함수를 호출 합니다.

그렇지 않으면 에러 객체를 생성해 에러 처리 함수로 넘깁니다.

ajax.onload = function(){
  if(ajax.status >= 200 && ajax.status < 300){
    successCallback(ajax.response);
  }else{
    errorCallback(new Error(ajax.statusText));
  }
};

4. 에러 이벤트 발생시 처리할 에러 콜백 함수명을 적용합니다. 에러 처리용 공통 함수를 만들어서 같은 함수를 적용하면 됩니다.

ajax.onerror = errorCallback;
//에러 처리 콜백 함수
function errorCallback(err){
  console.log('error:'+err.message);
}

5. 비동기 연결을 오픈합니다. URL로 접속하면 바로 JSON 결과를 표시하기 때문에 GET 방식으로 연결합니다.

ajax.open('GET', url);

6. 요청 헤더값을 설정합니다. 받은 데이터 포맷이 JSON 이므로 "application/json" 을 수신 포맷으로 설정합니다.

ajax.setRequestHeader('Accept', 'application/json');

7. send() 메서드를 호출해 전송합니다.

ajax.send();

8. 콘솔창에 응답 JSON 데이터가 뿌려지는지 확인합니다.

결과가 성공일 경우 XMLHttpRequest 객체의 response 에 응답 데이터가 담겨서 돌아옵니다. 응답 성공시 처리하는 함수 인자로 ajax.response를 넘깁니다.

//성공 처리 함수
function successCallback(response){
  console.log('response:'+response);
}

AJAX로 받은 응답을 기초로 HTML 페이지에 태그를 생성해 붙여넣을 경우 DOM이 생성된 후 실행해야 합니다.

document.addEventListener('DOMContentLoaded', function(){
  //AJAX 요청 및 응답 처리
});

!주의할 점

XMLHttpRequest 객체를 이용한 비동기 통신은 서버쪽에서 원격 요청에 대한 허용을 한 경우에만 요청에 대한 응답 데이터를 받을 수 없습니다.

서버에서 원격 요청에 대한 차단 정책을 사용하는 경우 아래와 같은 CORS(Cross Origin Resours Sharing) 에러를 발생시키고, 접속이 차단됩니다.

자바스크립트 관련글
글 196 개 모두보기 →