[펌] AJAX 기초설명

1.AJAX(Asynchronous Javascript + XML)란?

 

AJAX는 독립적이고 구체적인 하나의 특정 기술이 아닌 웹에 이미 존재하고 있는

 

DHTML,CSS,XML,XMLHttpRequest등의 기술들을 합친 이용 형태를 나타낸다.

 

AJAX의 장점은  기존 웹 애플리케이션의 비효율성,동기적인 액션의 단점을 해결할 수 있는 웹 페이지의 부분적인

 

변화 적용과 비동기성에 있다.

 

기존 애플리케이션에서는 사용자가 서버 측에 요청을 보내면 서버에서 응답이 클라이언트로 모두 전송되고

 

관련 리소스가 전부 로딩된 후에 다른 행동을 취할 수 있었지만 AJAX는 서버 측에 보내는 요청이 비동기적으로

 

이루어 지기 때문에 요청을 보낸 이후에도 응답이 완료 되기를 기다리지 않고 또 다른 요청을 보내거나 그 이외의

 

액션을 취할 수 있다.

 

2.AJAX의 구성 요소들

 

①XMLHttpRequest

 

XMLHttpRequest는 웹 서버와 통신하기 위한 AJAX의 핵심 컴포넌트이다.이미 IE에서는 5.0버젼에서부터

 

웹 서버와 통신하기 위한 AJAX의 핵심 컴포넌트이다. 이미 IE에서는 5.0 버젼에서부터 엑티브X 오브젝트 형태로

 

제공되고 있고 그 이외의 브라우저에서는 XMLHttpRequest라는 윈도우 객체에 속해 있는 객체의 형태로 제공된다.

 

AJAX를 이용하여 스크립트를 작성할 때 가장 큰 차이를 보이는 부분이 XMLHttpRequest 객체를 가져오는

 

부분이다.

 

XMLHttpRequest 객체 얻어오기

 

◆인터넷 익스플로어

 

var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")

 

◆그 이외의 브라우저

 

var xmlhttp = new XMLHttpRequest()

 

좀 더 일반적인 방법으로는 다음과 같이 XMLHttpRequest 객체를 얻어올 수 있다.

 

var xmlhttp = false

if(window.XMLHttpRequest(){

 xmlhttp = new XMLHttpRequest()

}else{

  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")

}

 

XMLHttpRequest의 이용

 

AJAX에서 가장 매력 있는 부분이 바로 비동기성이다.XMLHttpRequest는 동기적,비동기적으로 이용할 수

 

있는데 AJAX에서는 비동기적인 부분이 주로 이용된다.비동기 모드로 XMLHttpRequest를 사용할 경우 send()가

 

호출된 후 웹 서버로부터 응답이 오기를 기다리며 브라우저가 멈춰있지 않고 웹 서버로 부터 결과를 모두 받아낸

 

다음 콜백 핸들러에 정의된 코드가 실행되기 때문에 사용자는 계속 브라우저를 이용할 수 있게 된다.

 

◆XMLHttpRequest의 동기적 이용 예제

 

xmlhttp.open("GET","test.html",false);

xmlhttp.send(null);

if(xmlhttp.status == 200)

{

   alert(xmlhttp.responseText);

}

 

◆XMLHttpRequest의 비동기적 이용 예제

 

xmlhttp.open("GET","test.html",true);

xmlhttp.onreadystatechange = function(){

 if(xmlhttp.readyState == 4){

  alert(xmlhttp.status == 200){

     alert(xmlhttp.responseText();

  }

 }

}

 

xmlhttp.send(null);

 

XMLHttpRequest를 동기적으로 이용할 때는 XMLHttpRequest의 send()를 호출한 뒤 response의 status code를

 

체크하고 responseText에서 결과를 꺼내오면 된다.

 

XMLHttpRequest를 비동기적으로 이용할 때는 send()를 호출하기 전에 XMLHttpRequest의 onready state change

 

프로퍼티에 XMLHttpRequest의 상태가 변할 때 마다 실행될 핸들러를 function reference 형태로 줘야 한다.

 

②DOM

③DHTML

④XML,XSLT

⑤JavaScript