Ajax(Asynchronus JavaScript and XML)

빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도

웹 페이지의 일부를 갱신할 수 있고

백 그라운드 영역에서 서버와 통신하여

그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

이 때 서버와 아래와 같은 데이터를 주고 받을 수 있다.

• JSON
• XML
• HTML
• 텍스트 파일 등

(1) Ajax의 장점

• 페이지 전체를 다시 로딩하지 않고도 일부부만의 갱신이 가능
• 페이지가 로드된 후 서버로 데이터 요청을 보내거나 받을 수 있음
• 다양한 UI(동적 페이지) 구현이 가능

(2) Ajax의 단점

• 페이지 이동이 없기 때문에 히스토리 관리가 안됨
• 반복적인 데이터를 요청하면 느려지거나 작동하지 않는다.
• 페이지 이동이 없으므로 보안상 문제가 발생할 수도 있음

(3) Ajax의 구성 요소

• 웹 페이지 표현을 위한 HTML, CSS
• 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위한 DOM
• 데이터 교환을 위한 JSON, XML
• 웹 서버와 비동기식 통신을 위한 XMLHttpRequest 객체
• 위에서 언급한 모든 기술을 결합하여 작업 흐름을 제어하는 데 사용하는 Javascript

(4) XMLHttpRequest 객체

Ajax의 핵심

Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터 교환시 사용한다.

웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 이 객체를 사용하기 때문

(5) XMLHttpRequest 객체 생성

var 객체명 = new XMLHttpRequest();

(6) 서버에 요청(request)하기

Ajax에서는 객체 생성 후 open(), send() 메서드를 사용하여 요청을 보낼 수 있다.

(7) open()

서버로 보낼 Ajax 요청의 형식을 결정

open(전달방식, URL주소, 동기 여부);

전달방식 : GET, POST 등 선택 URL주소 : 요청을 처리할 서버의 파일 주소 동기 여부 : 요청을 동기식으로 전달 또는 비동기식으로 전달 선택

(8) send()

작성된 Ajax 요청을 서버로 전달 전달 방식에 따라 인수를 가질 수도 있고 그렇지 않을 수도 있다.

send(); // GET 방식 send(문자열); //POST 방식

(9) XMLHttpRequest의 readyState

처음에는 readtState가 0(객체명.UNSENT, 보내지 않음) open 메서드를 호출하는 순간 1(객체명. OPENED) send 메서드를 호출하면 순차적으로 2(객체명.HEADERS_RECCEIVED), 3(객체명.LOADING), 4(객체명.DONE) 최종적으로 readyState가 4가 되면 상태코드(객체명.status)가 200, 201일 때 응답을 확인