[AJAX] Ajax란

오늘은 ajax에 대해 얘기해보는 시간을 가지겠습니다. 

1. AJAX란

웹 2.0을 실현하는 핵심 기능인 AJAX(Asynchronous Javascript And XML) 는 웹 사용자들에게 좀 더 높은 수준의 인터페이스를 제공하여 인간친화적 웹을 구현할 수있도록 도움을 주는 기술입니다.  

AJAX는 그 하나의 특정 기술이 아니라 함께 사용하는 기술을 묶음을 의미합니다. 

* WEB 2.0 : 사용자 위주의 웹, 참여 위주의 웹으로 사용들의 참여와 공유로 데이터가 쌓이고 이렇게 쌓인 데이터를 다시 사용자들이 재사용할 수 있도록 API가 공개 되며,이를 이용할 수 있는 아이디어에 의해 새로운 서비스가 탄생하여 다시 새로운 참여를 유도하는 형태 

2. AJAX 구성요소 

 AJAX(Asynchronous Javascript And XML)는 이름만 본다면 자바스크립트와 XML로 이루어 졌다고 할 수 있으나, 이 세가지 필요소 외에도 다음과 같은 웹 표준 기술을 조합하여 사용합니다. 

-  비동기방식으로 HTTP요청을 보내고 응답 받기 위한 XMLHTTP 

-  정보를 구조적으로 전달하기 위한 XML 

-  정보를 화면에 표시하기 위한 DOM방식을 조작하는 자바스크립트 

-  정보를 화면에 표현하기 위한 HTML, CSS  

* HTML DOM과 XML DOM차이는 

HTMLDOM은 사용자와 반응 할 수 있는 버튼 이나 텍스트 입력상자 같은 특화된 element가지고 있기 때문에 동적으로 조작할 수 있는 속성이나 메서드가 있는 반면 , xml은 문서조작에 더 특화되어있음 

3. ajax 장단점

장점 

- html 데이터가 아닌 필요한 데이터만을 요청하기 때문에 서버와 클라이언트 사이의 데이터 전송량을 줄일 수 있고, 응답성이 빨라진다. 

- 사용자의 요청에 대해 페이지 새로고침을 하지 않고도 응답 결과를 화면에 업데이트 할 수 있어서 사용자의 편의성이 높아진다. 

단점 

- ajax을 남용과 오용하면 서버에 해가 될 수 있다. 

- ajax를 쓸 수없는 브라우저들이 존재한다. ( 과거 이야기임 이제는 ajax를 모든 브라우저가 사용가능하나 단지 방식이 jquery방식인지 prototype방식인지의 차이일 뿐임) 

4. 비동기식과 동기식

간단하게 말하자면 

비동기식이란 예상한 순서대로 일어나지 않은 일을 효율적으로 처리하기 위해 고안한 방법이고 그에 반해 계획적으로 처리하는 방법을 동기식이라고 말할 수 있습니다. 

그림으로 설명하자면 

동기식방법은 

웹브라우저가 웹서버에 전송을 요청하면 웹서버는 jsp,php,ash등의 서버측 어플리케이션을 사용해서 사용자 요청을 처리한뒤 처리 결과를 HTML로 생성해서 웹브라우저에 전송하게 됩니다. 

웹브라우저는 웹서버와 통신을 하고 요청 결과는 HTML로 생성되고 사용자 입장에서는 페이지 이동이 발생하게 됩니다. 

반대로 비동기방법은 AJAX를 예로 들자면 

사용자가 이벤트를 발생하시면 자바스크립트는 DOM을 사용해서 필요한 정보를 구한뒤 XMLHttpRequest객체를 통해서 웹 서버에 요청을 전달하게 된다. 웹서버는 XmlHttpRequest로부터 요청을 알맞게 처리한 후 그 결과를 xml이나 단순 text를 생성해서 xmlhttprequset에 전송한다. 서버로 부터 응답이 도착하면 xmlhttpreques 객체는 자바 스크립트에 도착 사실을 알리고 자바 스크립트는 응답 데이터와 DOM을 조작해서 사용자 화면에 반영한다.