[JavaScript] Ajax

AJAX (XMLHTTPRequest 통신)

Asynchronous JavaScript and XML의 약자로 비동기적인 웹 애플리케이션의 제작을 위한 웹 개발 기법이다.

비동기적으로 화면의 다른 요소에 영향을 주지 않고 데이터를 서버에서 가지고 오는 방법으로, 더 좋은 UX를 제공할 수 있는 기술이다.

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.

즉, Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

이 때, 서버와는 다음과 같은 형태의 데이터를 주고받을 수 있다.

- JSON

- XML

- HTML

- text file 등

JSON(JavaScript Object Notation)

Ajax를 위한 대표적인 포맷으로, key-value의 패턴으로 표현된다.

{
    "이름": "홍길동",
    "나이": 25,
    "성별": "여",
    "주소": "서울특별시 양천구 목동",
    "특기": ["농구", "도술"],
    "가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"},
    "회사": "경기 수원시 팔달구 우만동"
 }

Ajax의 장점

1. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.

2. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다.

3. 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다.

4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

Ajax의 한계

1. Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.

2. Ajax로는 바이너리 데이터를 보내거나 받을 수 없다.

3. Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없다.

4. 클라이언트의 PC로 Ajax 요청을 보낼 수는 없다.

※ 클라이언트 풀링(Client Pooling)

사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식을 의미한다.

이에 반해서 서버 푸시(Server Push)방식이란 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것을 의미한다.

스마트폰에서의 푸시알림이 서버 푸시 방식의 대표적인 예이다.

Ajax 프레임워크

Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발환경을 의미한다.

이러한 Ajax 프레임워크 중에서도 가장 많이 사용되는 프레임워크는 다음과 같다.

- Prototype

- script.aculo.us

- dojo

- jQuery

Ajax 실행코드

아래 방법은 XMLHttpRequest객체를 사용하는 표준방법이다.

Ajax통신을 위해서는 XMLHttpRequest객체를 생성해야 한다.

function ajax(data) {
    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", function() {
        //this는 oReq를 가리킴.
        console.log(this.responseText);
    });
    //parameter를 붙여서 보낼수있음. 
    oReq.open("GET", "http://www.example.org/getData?data=data");
    oReq.send();
}

XMLHttpRequest 객체를 생성해서, open 메서드로 요청을 준비하고, send 메서드로 서버로 보낸다.

요청처리가 완료되면(서버로 응답이 오면) load 이벤트가 발생하고, 콜백함수가 실행된다. 

콜백함수가 실행될 때는 이미 ajax함수는 반환하고 콜스택에서 사라진 상태이다.

이는 setTimeout 함수의 콜백함수의 실행과 유사하게 동작하는 '비동기'로직이다.

참고자료

https://www.edwith.org

http://tcpschool.com

https://ko.wikipedia.org/wiki/JSON

https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest