Ajax(1) - 기본 개념 소개와 동작 원리

1. Ajax란?

Ajax(Asynchronous Javascript and xml)

자바스크립트의 라이브러리중 하나이며, 비동기식 자바스크립트와 xml을 뜻한다.

Ajax를 사용하면 페이지 새로고침 없이 페이지 일부의 데이터를 바꿀 수 있게 된다.

데이터 로드를 위해 XMLHttpRequest 객체를 이용하는 것이 특징이다.

 

 

2. Ajax의 동작 원리

사용자에 의해 이벤트가 발생하면 핸들러에 의해 바로 자바스크립트를 불러온다.

그 후 자바스크립트에서는 XmlHttpRequest 객체를 이용하여 서버로 요청을 보내는데, 그동안 웹 브라우저는 응답을 기다릴 필요 없이 다른 작업을 수행할 수 있다(비동기 방식).

 

서버측에서 처리를 마치고 XmlHttpRequest 객체를 전달 받으면 이를 토대로 Ajax요청을 처리하게 되는 것이다.

클라이언트가 직접 원하는 정보를 서버에게 요청하여 얻는 방식을 client pooling 방식이라고 하는데 Ajax가 이 방식을 사용한다. 반면, 푸시 알림같은 server push방식의 서비스를 만들 수는 없다.

 

 

3. XmlHttpRequest

웹 브라우저가 서버와 데이터를 교환할 때 사용하는 객체. Explorer 7이상의 버전, 크롬, 사파리, 오페라, 파이어폭스에서 사용함.

 

1) XmlHttpRequest 객체의 생성

var xhr = new XMLHttpRequest();

 

2) XmlHttpRequest 객체의 주요 메소드

(1) open(method, url, async) : 서버로 보낼 Ajax 요청의 형식을 결정하는 메소드

<인자>

- method : 전달방식("POST" or "GET"), Ajax에서는 주로 POST 방식을 이용함

- url : 처리할 서버의 파일 주소

- async : 비동기화 여부(true가 비동기화)

 

(2) setRequestHeader(header, value) : Post 방식으로 요청할 때, HTTP요청 헤더의 값을 설정하는 메소드. open 메소드와 send 메소드 사이에 호출함

<인자>

- header : 헤더의 이름

- value : 헤더의 본문(body)에 설정될 값

 

※ HTTP 헤더

클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해주는 것. 헤더 이름, 콜론(:), 공백, 헤더 값의 순서로 구성됨.

꼭 짚고 넘어가야 할 헤더가 있는데, Context-Type이라는 헤더이다. Context-Type 헤더는 MIME 타입 및 문자 인코딩 방식을 지정하는 타입이며, 기본값은 "text/html" 로 자동 설정되어있다. 즉, 서버와의 통신을 한다면 text/html 대신에 요청 및 응답에 맞는 타입을 따로 명시 해주는 것이 좋다.

<응답 메소드>

- getAllResponseHeaders() : 모든 헤더를 문자열로 반환한다.

- getResponseHeader(headerName) : 인수로 전달받은 header이름에 해당하는 header값을 문자열로 반환한다.

 

(3) send() : Ajax 요청을 서버로 전송하는 메소드

- Get 방식일 경우에는 인자를 넣지 않고, Post 방식일 경우에는 querystring인자를 넣는다.

- querystring은 서버로 데이터를 전달하기 위해 url뒤에 첨부되는 데이터이다.

 

(4) abort() : Ajax 요청에 대한 응답이 도착하기 전에 readyState를 0으로 바꿔줌으로써 요청을 취소하는 메소드

 

 

3) XmlHttpRequest 객체의 프로퍼티

(1) readyState : XMLHttpRequest 객체의 현재 상태를 나타낸다.

- XMLHttpRequest.UNSENT : XMLHttpRequest 객체가 생성됨, 숫자 0으로도 표기 가능

- XMLHttpRequest.OPENED : open 메소드가 성공적으로 실행됨, 숫자 1로도 표기 가능

- XMLHttpRequest.HEADERS_RECEIVED : 모든 요청에 대한 응답이 도착함, 숫자 2로도 표기 가능

- XMLHttpRequest.LOADING : 요청한 데이터를 처리 중임, 숫자 3으로도 표기 가능

- XMLHttpRequest.DONE : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨, 숫자 4로도 표기 가능

 

(2) status : 서버의 문서 상태를 나타내며, 값이 200일 경우에는 요청한 문서가 서버에 존재한다는 의미고 값이 404일 경우에는 요청한 문서가 서버에 없다는 의미이다.

 

(3) onreadystatechange : readyState 값이 변할 때마다 자동으로 호출할 함수. 요청에서 응답까지 모든 과정이 정상적으로 이루어졌다면 총 5번이 호출될 것이다. 따라서, 이 메소드 내부에서 readyState값에 따라 알맞게 처리해줄 수 있다.

xhr.onreadystatechange = function(){...} //콜백함수

 

(4) responseText : 서버로부터의 응답을 텍스트 형식으로 받는다.

 

(5) responseXML : 서버로부터의 응답을 XML DOM 객체로 받는다. 이 객체를 대상으로 특정 element를 tag, class, id 등의 조건으로 처리하는 작업을 수행할 수 있게 된다.

 

간단한 사용 예시를 포스팅해두었다. 주기적인 Ajax 요청 방법도 작성해두었다.

kimcoder.tistory.com/111

JavaScript와 php와의 통신

 

4. 관련 용어

• DOM(Document Object Model) : 웹페이지에 대한 인터페이스, 구조화된 문서를 표현하는 형식
• node : 계층 단위

 

다음 포스팅에서는 jQuery로 Ajax를 이용하는 방법을 소개할 것이다.

jQuery에는 Ajax를 이용하여 개발을 손쉽게 할 수 있는 여러가지 기능들이 포함되어 있다.

 

자료 참고 : www.tcpschool.com/ajax/intro