Ajax 기초개념

 : Ajax? 

   'Asynchronous JavaScript +XML'의 약자이며 JavaScript를 사용한 비동기 통신으로 

   클라이언트와 서버 간에 XML 데이터를 주고받는 통신기술을 말한다. 

   Ajax를 이용하면 페이지 전환 없이 웹 브라우저 화면을 동적으로 변경할 수 있다. 

   Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.

   즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.

->클라이언트와 서버 간에 XML 데이터를 비동기적으로 주고 받는 통신기술

http://tcpschool.com/ajax/ajax_intro_basic

: 주요 구성요소

   - Javascript : Ajax의 프로그램 언어로 Javascript 사용

   - XMLHttpRequest : 웹 서버와 통신을 담당한다.

   - DOM(Document Object Model) : HTML 태그 요소 하나하나를 처리 대상(object)으로 다루기 위한 구조

   - CSS : 태그 요소의 모양을 정의하기 위한 정의형 언어

   - XML : 데이터를 전달하기위한 언어

:코딩 방법

1. XMLHttpRequest 객체

Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체입니다.

Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용됩니다.

XMLHttpRequest은 웹 브라우저에 내장 객체 입니다.

1-1. XMLHttpRequest 객체의 생성

현재 대부분의 주요 웹 브라우저는 XMLHttpRequest 객체를 내장하고 있습니다.

이러한 XMLHttpRequest 객체를 생성하는 방법은 브라우저의 종류에 따라 다음과 같이 나눠집니다.

1. XMLHttpRequest 객체를 이용한 방법(익스플로러 7과 그 이상의 버전, 크롬, 파이어폭스, 사파리, 오페라)

2. ActiveXObject 객체를 이용한 방법(익스플로러5, 6 구형버전)]

var httpRequest;

function createRequest() {

    if (window.XMLHttpRequest) { // 익스플로러 7과 그 이상의 버전, 크롬, 파이어폭스, 사파리, 오페라 등

        return new XMLHttpRequest();

    } else {                     // 익스플로러 6과 그 이하의 버전

        return new ActiveXObject("Microsoft.XMLHTTP");

    }

}

 : HTML5과 Ajax차이점

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

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

장점

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

단점

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

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