4. 비동기 자바스크립트

1. Ajax, Asynchronous JavaScript and XML

JavaScript 기반의 비동기 방식의 정보 교환 기법에 사용되는 기술을 통칭하는 표현

대표적인 차이는 브라우저 상에서 사용자의 동작에 따라 웹 페이지가 새로고침이 진행되는지 여부

💡

Tip

ActiveX

웹 개발툴 대표주 ‘AJAX’ 떠오른다
네이버, 개방형 신기술 지도서비스 개시

2. XHR, XMLHttpRequest API

대부분의 사용자의 동작(마우스 클릭, 키보드로 텍스트 입력 후 전송)은 서버로부터 특정 데이터에 대한 조회를 요청하는 것인데, XMLHttpRequest API 를 사용하면 별도의 새로고침 없이 페이지 내 데이터가 지속적으로 갱신됨

약 10~20년 전에는 웹 페이지의 새로고침이 당연한 것이었으나, 보다 높은 수준의 사용자 경험(UX), 인터랙션(Interaction)과 기능에 따른 웹 사이트의 고도화로 인해 점차 대부분의 동작을 비동기적인 방식으로 구현하는 편

Google Maps or Naver 지도 페이지 내 Network 탭에서 확인해보기

2-1. 핵심 코드

app.js


// 1. 생성자 함수를 통해 XMLHttpRequest 인스턴스(객체) 생성
const xhr = new XMLHttpRequest();
 
// 2. onload 이벤트 프로퍼티에 서버로부터의 응답이 완료되었는지 확인하는 코드 작성
xhr.onload = () => {
    if (xhr.readyState === xhr.DONE && xhr.status === 200) {
        const responseData = xhr.responseText; // responseText: 서버로부터 받은 응답 데이터
        const result = JSON.parse(responseData); // JSON 역직렬화
        console.log(result); 
    }
}
 
// 3. 요청 준비(open(method, url, async, ..))
const url = 'https://jsonplaceholder.typicode.com/users/1';
xhr.open('GET', url);
 
// 4. 요청 실제 전송
xhr.send();

2-2. 주요 인스턴스 메서드

메서드명	설명
open()	새로운 요청을 위한 초기화 처리
send()	실제 요청 전송 처리

2-3. 주요 이벤트 핸들러 프로퍼티

이벤트명	설명
onload	요청이 완료되었을 경우
error	요청이 실패하여 응답이 제대로 처리되지 않았을 경우
onprogress	요청에 따라 주기적으로 데이터를 받아올 경우
onreadystatechange	readyState 프로퍼티의 값이 변경될 경우

2-4. 주요 프로퍼티

프로퍼티명	설명
status	HTTP 상태 코드를 숫자(정수값)로 표현
readyState	현재 요청의 처리 상태 - UNSENT(0), OPENED(1), HEADERS + RECEIVE(2),LOADING(3), DONE(4)
statusText	HTTP 상태 코드를 문자열로 표현 - OK(200)
responseType	응답 객체의 타입 ex) JSON, text, document …
response	HTTP 응답 몸체(body)
responseText	문자열화된 응답 객체