AJAX (Asynchronous JavaScript And XML)

1. AJAX 개념

2. AJAX 동작 원리

3. AJAX 사용 예시

---

1. AJAX 개념

[그림 1] AJAX

AJAX는 Asynchronous JavaScript And XML의 약자로, 직역하면 비동기 자바스크립트와 XML이다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다.

 

JavaScript를 이용하여 서버로 보내는 HTTP Request를 만들기 위해서는 그에 맞는 기능을 제공하는 Object가 필요하다. XMLHttpRequest가 그러한 Object의 예이다.

 

JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함하여 다양한 포맷을 주고 받을 수 있다.

 

AJAX의 강력한 특징은 웹 페이지 전체를 리프레시 하지 않고서도 수행되는 "비동기성"이다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다.

 

AJAX는 아래의 작업을 할 수 있게 해준다.

• 페이지 새로고침 없이 서버에 요청
• 서버로부터 데이터를 받고 작업을 수행

 

 

2. AJAX 동작 원리

[그림 2] 기존 웹 응용 프로그램의 동작 원리

기존의 웹 응용 프로그램에서는 이벤트가 발생할 때 마다 웹 서버에 HttpRequest를 보내서 응답을 받은 후 웹 페이지 전체를 다시 로딩해야 했다.

 

[그림 3] AJAX를 이용한 웹 응용 프로그램의 동작 원리

AJAX를 이용한 웹 응용 프로그램은 자바스크립트 코드를 통해 웹 서버와 통신을 하게 된다. 따라서 사용자의 동작에는 영향을 주지 않으면서도 백그라운드에서 지속해서 서버와 통신할 수 있다.

 

<AJAX를 이용한 웹 응용 프로그램 동작 원리>

1. 사용자에 의한 요청 이벤트가 발생한다.
2. 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출된다.
3. 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보낸다. 이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있다.
4. 서버는 전달받은 XMLHttpRequest 객체를 가지고 AJAX 요청을 처리한다.
5. 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달한다. 이때 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달한다.
6. 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출한다.
7. 결과적으로 웹 페이지의 일부분만이 다시 로딩되어 표시된다.

 

 

3. AJAX 사용 예시

[그림 4] 비동기 통신을 이용한 로그인 화면 구축

xhr을 XMLHttpRequest 객체로 정의하고, open(), setRequestHeader(), send() 메소드를 사용하였다.

 

open() 메소드의 파라미터

• 첫 번째 파라미터는 HTTP request method (GET, POST, HEAD) 중 하나이다. 이 파라미터는 HTTP 표준에 따라 모두 대문자로 표기해야 한다. 그렇지 않으면 파이어폭스와 같은 특정 브라우저는 요구를 처리하지 않을 수도 있다.
• 두 번째 파라미터는 요구하고자 하는 URL이다. 보안상의 이유로 서드 파티 도메인 상의 URL은 기본적으로 호출할 수 없다. 요구하는 모든 페이지에 정확한 도메인 네임을 사용해야 한다. 그렇지 않으면 open() 메소드를 호출할 때 'permission denied' 에러가 발생할 수 있다.
• 세 번째 파라미터는 요구가 비동기식으로 수행될 지를 결정하며, 생략이 가능하다. 만약 이 파라미터가 true(디폴트)로 설정된 경우에는 자바스크립트 함수가 지속적으로 수행될 수 있어 서버로부터 응답을 받기 전에도 유저와 페이지의 상호작용이 계속 진행된다. false로 설정된 경우 동기적으로 작동한다. 즉, send() 함수에서 서버로부터 응답이 올 때까지 기다린다.

 

send() 메소드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능하다. 데이터는 서버에서 쉽게 parse할 수 있는 형식(format)이어야 한다. 예를 들면 아래와 같다.

 

"userid=admin&name=jenny"

 

만약 POST 형식으로 데이터를 보내려 한다면, request에 MIME type을 먼저 설정해야 한다. 예를 들어, send()를 호출하기 전에 아래와 같은 형태로 send()로 보낼 쿼리를 이용해야 한다.

 

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

 

위에서 생성한 xhr의 onreadystatechange property에 특정 함수를 할당하면 요청에 의한 상태가 변화할 때 그 함수가 불리게 된다.

 

readyState가 가질 수 있는 값은 아래와 같다.

• 0 (uninitialized) - request가 초기화되지 않음
• 1 (loading) - 서버와의 연결이 성사됨
• 2 (loaded) - 서버가 request를 받음
• 3 (interactive) - request를 처리하는 중
• 4 (complete) - request에 대한 처리가 끝났으며 응답할 준비가 완료됨