AJAX 란?

AJAX는 Asynchronous JavaScript And XML을 뜻하며, 기존에 존재하는 기술들을 사용하여 라이브러리화한 기법이다. 기본적으로 AJAX는 서버와 통신하여 데이터를 가져와 웹 페이지 재로드 없이 해당 데이터 기반으로 UI를 업데이트한다.

역사

AJAX가 없던 시절에는 클라이언트~서버 간의 통신을 설정하기가 어려웠다. 개발자는 숨겨진 iframe을 사용하여 클라이언트 측에 서버 데이터를 채웠다.

2005년, James Garrett은 웹 애플리케이션에 대한 새로운 접근 방식인 AJAX라는 기사를 작성했다. AJAX에서 사용되는 핵심 기술은 XMLHttpRequest(XHR)이며, 서버 측에서 데이터를 검색하고 클라이언트 측에서 채울 수 있는 기능이 있다.

XHR (XMLHttpRequest)

xhr.open(method:string,url:string,asynchronous:boolean)

XMLHttpRequest 객체로 시작하려면 먼저 XHR의open() 메서드를 호출해야 한다. 해당 함수에는 세 가지 인수가 존재 한다.

1. method (GET, POST, DELETE)
2. url (requested URL)
3. true (asynchronous, synchronous)

xhr.open("get", "data.json", true);

1. XHR 객체의 open() 메서드를 호출하여 request만 전송되도록 준비한다. open() 메서드만 사용하여 XHR request를 호출 할 수 없다.

2. 이 메소드에서 첫 번째 parameter는 GET, PUT, POST, DELETE 등과 같은 Http request 메소드에 대한 것이다. Http 표준에 따라 대문자로 표기해야 한다.

3. open() 메소드의 두 번째 parameter는 URL이다. 동일한 도메인 URL을 사용하면 통신이 원활하고, 교차 도메인 URL을 사용하면 cross-domain 이슈가 발생한다.

4. 마지막 parameter는 request가 비동기 또는 동기 type으로 진행되도록 결정한다. 기본은 비동기이다.

이제 XHR request 전송을 위해 send() 메서드를 사용한다.

xhr.send(null);

send() 메소드에서 parameter로 데이터를 보낼 수 있다. 보낼 데이터가 없는 경우, 인수를 null로 설정하면 된다.

xhr.open("get", "data.json", true);
xhr.send(null);

비동기 request에 대한 관련 response 속성이 있다.

1. responseText

responseText에는 response body로 반환된 텍스트 값이 있다.

2. responseXML

content-type이 text/xml 또는 application/xml로 설정된 경우 responseXML은 값을 반환하고, 그렇지 않으면 null로 반환한다.

3. status

이 속성은 response의 HTTP 상태를 보낸다.

4. statusText

이 속성은 response의 HTTP 상태 텍스트를 보낸다.

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json",true);
xhr.send(null);

if((xhr.status>= 200 && xhr.status<300) || xhr.status === 304){
  alert(xhr.responseText);
}else{
  alert("Some problem "+ xhr.status);
}

Request/Response 순환 단계 (readyState)

1. Uninitialized — open() 미호출
2. Open — open() 호출, send() 미호출
3. Send — send() 메서드 respnse 대기
4. Receiving — respnse 데이터 수신
5. Completed — 모든 response 데이터 수신 및 사용가능

readyState Event

readyState의 단계가 한 단계에서 다른 단계로 변경되면 readystatechange 이벤트가 발생한다. onreadystatechange 이벤트 핸들러를 사용하여 readyState의 단계를 처리 할 수 있다.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
     if((xhr.status>= 200 && xhr.status<300) || xhr.status === 304){
        alert(xhr.responseText);
      }else{
        alert("Some problem "+ xhr.status);
      }
  }
};

xhr.open("GET", "data.json",true);
xhr.send(null);

XMLHttpRequest 중단

response 전에abort() 메서드를 사용하여 비동기 XMLHttpRequest를 취소 할 수 있다.

xhr.abort();

AJAX 장점

1. 웹페이지 속도향상

2. 비동기적 처리가능

3. 코드 사이즈 감소

4. 페이지 새로고침이 불필요해짐에 따라, 보다 다양한 UI/UX 구현 가능

AJAX 단점

1. 히스토리 관리의 어려움

2. 요청의 자유도가 높아짐에 따라 부하 증가 가능성