[JavaScript] AJAX : Asynchronous JavaScript and XML

[JavaScript] AJAX : Asynchronous JavaScript and XML

AJAX란 JavaScript를 이용해서 비동기식으로 서버와 통신하는 방식, 비동기 JavaScript와 XML을 말한다. 

간단히 말해서, 서버측 Script와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다.

Ajax란 하나의 특정한 기술이 아니라 함께 사용하는 기술의 묶음을 지칭 

서버측 다양한 형식 (JSON, XML, HTML 및 일반 Text 형식 등)의 정보를 주고 받을 수 있다. 

AJAX의 특징은 page 전체를 리프레쉬 하지 않고서도 수행 되는 '비동기성' 이다.

이러한 비동기성을 통해 사용자가 Event 가 있으면 전체 페이지가 아닌 일부분만을 업데이트할 수 있게 해준다.

[참고] https://developer.mozilla.org/ko/docs/AJAX/Getting_Started

$.ajax(settings)

• jQuery를 이용한 ajax통신의 가장 기본적인 API
• 주요속성
  • data : 서버에 전송할 데이터, key/value 형식의 객체
  • dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)
  • type : 서버로 전송하는 데이터의 타입 (POST, GET)
  • url : 데이터를 전송할 URL
  • success : ajax통신에 성공했을 때 호출될 이벤트 핸들러

[참고] http://opentutorials.org/course/53/49

위 참고 site 내용이 달라서 어떻게 사용하는지는 아직 모르겠다.

생활코딩 내용에서는 jQuery API를 이용한거라는데 우리 과제에 알맞는지는 모르겠다.

기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버에 전달 된다. 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려준다. 이때 최초에 폼을 가지고 있던 페이지와 사용자가 이 폼을 채워 결과물로서 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다. 결과적으로 중복되는 HTML 코드를 다시 한번 전송 받게 되므로써 많은 대역폭을 낭비하게 된다. 대역폭의 낭비는 금전적 손실을 야기할 수 있으며 사용자와 대화(상호 반응)하는 서비스를 만들기 어렵게도 한다.

반면에 Ajax 애플리케이션은 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 보통 SOAP이나 XML 기반의 웹 서비스 프로토콜이 사용되며, 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는 자바스크립트를 쓴다. 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리 되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다. 또한 웹서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 된다.

 

 

<장점>

페이지 이동없이 고속으로 화면을 전환할 수 있다.

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

수신하는 데이터 량을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

 

<단점>

Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.

Http클라이언트의 기능이 한정되어 있다.

페이지 이동없는 통신으로 인한 보안상의 문제

지원하는 Charset이 한정되어 있다.

스크립트로 작성되므로 Debugging이 용이하지 않다.

요청을 남발하면 역으로 서버 부하가 늘 수 있음.