ajax 란?

Ajax(Asynchronous Javascript and Xml)

XMLHttpRequest를  사용하여  페이지 전체가 아닌 필요한 부분만 갱신할 수있도록 함.
json, xml, html 등 다양한 형식의 정보를 주고 받음 

장점

• 페이지 이동없이 고속으로 화면을 전환할 수 있다.
• 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

단점

• Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
• HTTP 클라이언트의 기능이 한정되어 있다.
• 페이지 이동없는 통신으로 인한 보안상의 문제
• 지원하는 Charset이 한정되어 있다.
• 스크립트로 작성되므로 디버깅이 용이하지 않다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있음.
• 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.

기존방식과 AJAX의 차이

1) 기존방식

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

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

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

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

2) AJAX방식

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

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

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

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

AJAX의 주요 구성 요소

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

차이 출처
출처: http://hieroglyph.tistory.com/13 [컴퓨터 이야기]

장단점 출처

https://ko.wikipedia.org/wiki/Ajax