ajax 기본 개념 정리

★ AJAX : Asynchronous JavaScript + XML

  JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술

1. AJAX 장점

-페이지 이동 없이 고속으로 화면 전환

-서버 처리를 기다리지 않고 비동기 요청이 가능

-서버 측 처리를 각 PC에 분산 가능

-수신하는 데이터의 양을 줄임  

 

 

2. AJAX 단점

-크로스 브라우저화의 노하우 필요

-AJAX를 사용하지 못하는 브라우저

-오픈 소스이므로 차별화가 어려움

-보안에 더욱 신경을 써야 함  

 

3. 기존방식과 AJAX의 차이 

 1) 기존방식

 - 웹 브라우저가 웹 서버에 요청 전송

- 웹 서버는 JSP 등의 서버 어플리케이션을 사용해 사용자의 요청 처리 후 결과를 HTML로 생성해서 웹 브라우저에 전송

- 웹 브라우저는 응답으로 받은 HTML을 분석한 뒤 그 내용을 화면에 그림 

- 결과적으로 웹 브라우저가 웹 서버와 통신을 하고 요청 결과는 HTML로 생성되고 사용자 입장에서는 페이지 이동이 발생함

 

 

 

2) AJAX방식 

- 사용자가 이벤트를 발생 > 자바스크립트는 DOM을 사용해서 필요한 정보를 구한 뒤, XMLHttpRequest 객체를 통해서 웹 서버에 요청을 전달

- 웹 서버는 XMLHttpRequest로부터의 요청을 알맞게 처리후 결과를 XML이나 단순 Text을 생성해서 XMLHttpRequest에 전송

- 서버로부터 응답이 도착하면 XMLHttpRequest 객체는 자바스크립트에 도착 사실을 알고 자바스크립트는 응답 데이터와 DOM을 이용해 사용자 화면에 반영 

- 결과적으로 사용자 입장에서는 페이지 이동이 발생되지 않고 페이지 내부 변화만 일어남 

 

 

 

 

4. AJAX의 주요 구성 요소 

 - XMLHttprequest : 웹서버와 통신을 담당함. 사용자의 요청을 웹서버에 전송 및 웹서버로부터 받은 결과를 웹브라우저에 전달함
- DOM : 문서의 구조를 나타냄, 폼 등의 정보나 화면 구성을 조작할때 사용함
- CSS : 글자색,배경색,위치,투명도 등 UI관련 부분을 담당
- 자바스크립트 : 사용자가 마우스를 드래그하거나 버튼을 클릭하면 XMLHttpRequest객체를 사용해 웹서버에 요청을 전송함.
XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS등을 사용해 화면을 조작함.

 

 

 

 

 

 

 

 

 

 

 

 

 

* 공부한책 : 최범균의 Ajax Programming 기초부터 중급까지