Ajax 시작하기

Ajax 시작하기

웹 브라우저는 정적인 시스템입니다. 내용이 바뀌면 새로고침을 해서 새롭게 변경해야 했습니다. 그러나 구글이 만든 Ajax 개념이 도입되면서 모든 것이 바뀌었습니다. Ajax 라는 용어는 말하는 사람마다 조금씩 다르게 정의되고 있습니다. 어떤 사람은 클라이언트와 서버간의 연동을 다루는 것을 Ajax라고 내리고 어떤 사람은 데이터 통신은 물론 클라이언트의 UI를 동작하는 것을 포함하여 Ajax라고 하고 있습니다.

Ajax(Asynchrononus JavaScript and XML) 이란 ?

서버와 비동기 데이터 통신을 통해 데이터 주고받는 방식을 의미합니다. 이 때 사용하는 API가 XMLHttpRequest입니다.

Ajax의 핵심 API XMLHttpRequest

Ajax의 핵심입니다. 클라이언트와 서버 간의 통신을 담당하는 객체입니다. 또한 클라이언트와 서버 간에 통신할 때 가장 먼저 생성해야 하는 객체입니다.

IE5,6 에서는 XMLHttpRequest 객체 대신 ActiveXObject("Msxml2.XMLHTTP.6.0")을 사용해야 합니다.

기존 방식과 AJAX의 차이

기존방식

• 웹 브라우저가 웹 서버에 전송을 요청
• 웹 서버는 어플리케이션을 사용해 사용자의 요청 처리 후 결과를 HTML로 생성하여 웹 브라우저에 전송
• 웹 브라우저는 응답으로 받은 HTML을 분석한 뒤 그 내용을 화면에 그림
• 결과적으로 웹 브라우저가 웹 서버와 통신을 하고 요청 결과는 HTML로 생성되고 사용자 입장에서는 페이지 이동이 발생한다.

Ajax방식

• 사용자가 이벤트를 발생시켜 자바스크립트는 DOM을 사용해서 필요한 정보를 구한 뒤, XMLHttpRequest 객체를 통해서 웹 서버에 요청을 전달.
• 웹 서버는 XMLHttpRequest로부터의 요청을 알맞게 처리 후 결과를 XML이나 단순 Text를 생성해서 XMLHttpRequest에 전송
• 서버로부터 응답이 도착하면 XMLHttpRequest 객체는 자바스크립트에 도착 사실을 알고 자바스크립트는 응답데이터와 DOM을 이용해 사용자 화면에 반영
• 결과적으로 사용자 입장에서는 페이지 이동이 발생하지 않고 페이지 내부 변화만 일어난다.

XMLHttpRequestd의 객체 생성

window.onload = function() {                                                                
    var xmlHttp = createXMLHTTPObject();
};

// 1. 브라우저에 따른 XMLHttpRequest 생성
function createXMLHTTPObject() {

    var xhr = null;

    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest(); //IE 5,6을 제외한 브라우저는 XMLHttpRequest 객체를 제공합니다.
    } else {
 //IE 5,6 일 경우 XMLHttpRequest 객체를 생성해야 합니다.
        xhr = new ActiveXObject('Microsoft.XMLHTTP'); 
    }
    return xhr;
}

XMLHttpRequest의 주요 메소드

open(method, url, [async true,false])




첫번째 파라미터는 HTTP 요구 방식(request method) - GET, POST을 나타냅니다.

이 파라미터는 HTTP 표준에 따라 모두 대문자로 표기해야 합니다. 그렇지 않으면 특정 브라우저에서 처리하지 못할 수 있습니다.

두번째 파라미터는 요구할 페이지의 URL 입니다. 보안을 위해 서드 파티 도메인 상의 페이지를 호출할 수는 없습니다. 

세번째 파라미터는 요구가 비동기식(Asynchronous)으로 수행될 지를 결정합니다. 만약 이 파라미터가 TRUE 로 설정된 경우에는 자바스크립트 함수의 수행은 서버로부터 응답을 받기 전에도 계속 진행됩니다.

send(data)

send 메서드가 실행되야 요청이 서버에 전달됩니다.

get방식으로 호출할 경우 data를 생략하여 send(); 호출을 합니다.

XMLHttpRequest의 주요 프로퍼티

readyState

요청 상태를 나타냅니다.

주요 상태 정보는 아래와 같습니다.

• 0 (uninitialized) - 초기화 되지 않음.
• 1 (loading) - 로드되지 않은 상태 즉 send가 호출되지 않은 상태
• 2 (loaded) - 로드된 상태. 헤더와 상태는 받았으나 아직 응답을 받지 못하였음.
• 3 (interactive) - 데이터의 일부분만 받은 상태.
• 4 (complete) - 모든 데이터를 받아 완료

onreadystatechange

요청 상태가 변경될 때 발생하는 이벤트.

responseText

서버 응답에 반환된 본문 컨텐츠.

reponseXML

서버 응답이 XML인 경우 이 프로퍼티에 XML 본문 콘텐츠로 채워집니다.

status

서버 응답을 나타냅니다.

statusText

응답으로 반환된 상태 메시지 입니다.