AJAX 시작하기.

AJAX:Getting Started

이 글은 당신이 AJAX 기본을 헤쳐가는 것을 이끌고, 두 가지 간단한 훈련용 예제를 제공합니다.

목차 [숨기기] 1 AJAX란? 2 1단계 – say "Please!" or How to Make an HTTP Request 3 2단계 – "There you go!" or Handling the Server Response 4 3단계 – "All together now!" - A Simple Example 5 4단계 – "The X-Files" or Working with the XML Response

AJAX란?

AJAX (Asynchronous JavaScript and XML)는 강력한 브라우저 특징 두가지를 가리키는 신조어입니다. 개발된지는 몇 년 됐지만 많은 개발자들은 그냥 보고 지나치다가 최근 Gmail, Google의 추천검색어, 그리고 Google 지도가 나오면서 널리 알려졌습니다.

여기서 말하는 두 가지 특징이란 다음과 같습니다:

• 웹 페이지를 다시 불러들이지 않고 서버에 요구할 수 있음.
• XML문서와 작업을 하거나 파싱할 수 있음.

1단계 – say "Please!" or How to Make an HTTP Request

자바스크립트를 써서 서버에 HTTP 요구를 하기위해서, 이런 기능을 제공하는 클래스 인스턴스가 필요합니다. 그런 클래스는 Internet Explorer에서 XMLHTTP라고 불리우는 ActiveX 오브젝트로 처음으로 도입되었습니다. Mozilla, Safari그리고 다른 브라우저에서는 마이크로소프트의 ActiveX 오브젝트의 특성과 메소드를 지원하기 위해 XMLHttpRequest클래스를 구현합니다.

따라서, 다음과 같이 하면 모든 브라우저에서 사용할 수 있는 인스턴스를 만들 수 있습니다.

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

(XMLHTTP인스턴스를 만드는 위의 간단한 코드는 이해를 돕기 위한 것입니다. 실제 사용예를 보려면 이 글의 3단계를 보십시오.)

서버의 응답에 XML mime-type 헤더가 없을 경우 Mozilla 계열의 일부 브라우저는 버전에 따라 잘 작동하지 않을 수 있습니다. 이 경우, 서버로 부터 받은 헤더가 text/xml 형식이 아닐 경우 서버에게서 받은 헤더를 무시하기 위한 메소드를 호출할 수 있습니다.

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

다음에 할 일은 요구(request)에 의해서 서버로부터 받은 내용을 어떻게 할것인가를 결정하는 것입니다. 이번 단계에서는 자바스크립트로 서버로부터 받은 응답을 처리하는 HTTP request에 대해 말할 필요가 있습니다. 이것은 아래와 같은 당신이 사용하고 싶은 자바스크립트 함수 이름(nameOfTheFunction)을 onreadystatechange 프로퍼티로 설정하면 됩니다. :

http_request.onreadystatechange = nameOfTheFunction;

함수 이름뒤에 괄호와 넘어갈 파라미터가 없습니다. 또, 함수 이름을 넘기는 대신에 파라미터를 넘길 때 함수 정의에 관한 자바스크립트 기술을 사용할 수 있습니다. 그렇게 하면 아래와 같이 응답을 바로 처리할 수 있는 액션을 정의 할 수 있습니다. :

http_request.onreadystatechange = function(){
    // do the thing
};

다음으로 응답을 받은 즉시 어떤 것을 할것인지 정의한 후, 당신은 실제적인 요구(request;서버에 대한 요구)를 보내야 합니다. 아래와 같이 open()와 send()와 같은 HTTP request 클래스 메소드를 불러내야 합니다. :

http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);

• open() 메소드의 첫번째 파라미터는 HTTP 요구 방식(request method) - GET, POST, HEAD 중의 하나이거나 당신의 서버에서 지원하는 다른 방식- 입니다. 이 파라미터는 HTTP 표준에 따라 모두 대문자로 표기하십시오; 그렇지 않으면 (파이어폭스와 같은) 특정 브라우저는 이 요구를 처리하지 않을 수도 있습니다. 가능한 HTTP 요구 방식에 대한 정보는 W3C 명세를 참고하기 바랍니다.
• 두번째 파라미터는 당신이 요구할 페이지의 URL 입니다. 보안을 위해 서드 파티 도메인 상의 페이지를 호출할 수는 없습니다. 당신이 요구하는 모든 페이지에 정확한 도메인 네임을 사용하십시오. 그렇지 않으면 open() 메소드를 호출할 때 'permission denied' 에러가 발생할 수 있습니다. 일반적인 오류는 당신의 사이트에 domain.tld 와 같은 형태로 접근하는 것 입니다. 이러한 경우 www.domain.tld 와 같은 형태로 페이지를 요구하기 바랍니다.
• 세번째 파라미터는 요구가 비동기식(Asynchronous)으로 수행될 지를 결정합니다. 만약 이 파라미터가 TRUE 로 설정된 경우에는 자바스크립트 함수의 수행은 서버로부터 응답을 받기 전에도 계속 진행됩니다. 이것이 AJAX 의 첫번째 A입니다.

send() 메소드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능합니다. 데이터는 아래와 같은 쿼리 문자열 형식이 되어야 합니다:

name=value&anothername=othervalue&so=on

참고로 POST 방식을 사용하여 데이터를 보내려면 다음과 같은 방법으로 요구의 MIME 형식을 변경해야만 합니다:

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

그렇지 않으면 서버는 이 데이터를 무시할 것 입니다.

2단계 – "There you go!" or Handling the Server Response

요구를 보냈을 때 당신은 이미 응답을 처리하기 위한 자바스크립트 함수의 이름을 지정했었다는 것을 기억하기 바랍니다.

http_request.onreadystatechange = nameOfTheFunction;

이제 이 함수가 어떤 일을 하는지 보기로 합시다. 먼저, 해당 함수에서는 요구의 상태값을 검사할 필요가 있습니다. 만약 상태값이 4 라면, 서버로부터 모든 응답을 받았으며 이를 처리할 준비가 되었다는 것을 뜻합니다.

if (http_request.readyState == 4) {
    // 이상 없음, 응답 받았음
} else {
    // 아직 준비되지 않음
}

readyState 가 가질 수 있는 모든 값의 목록은 아래와 같습니다:

• 0 (uninitialized)
• 1 (loading)
• 2 (loaded)
• 3 (interactive)
• 4 (complete)

(원문)

다음으로 검사할 것은 HTTP 서버 응답의 상태 코드입니다. 가능한 모든 코드 값의 목록은 W3C 사이트에서 확인할 수 있습니다. 여기서는 단지 정상적으로 처리된 상태를 나타내는 200 의 경우 만을 검사합니다.

if (http_request.status == 200) {
    // 이상 없음!
} else {
    // 요구를 처리하는 과정에서 문제가 발생되었음
    // 예를 들어 응답 상태 코드는 404 (Not Found) 이거나
    // 혹은 500 (Internal Server Error) 이 될 수 있음
}

이제 당신의 요구와 그에 대한 응답에 대한 상태 코드를 검사했으므로, 당신은 서버에서 받은 데이터를 통해 원하는 작업을 수행할 수 있다. 응답 데이터에 접근하기 위한 2 가지 옵션이 있다:

• http_request.responseText – 서버의 응답을 텍스트 문자열로 반환할 것이다.
• http_request.responseXML – 서버의 응답을 XMLDocument 객체로 반환하며 당신은 자바스크립트의 DOM 함수들을 통해 이 객체를 다룰 수 있을 것이다.

3단계 – "All together now!" - A Simple Example

이제 이들을 한데 모아서 간단한 HTTP 요구를 수행해보겠습니다. 우리가 작성할 자바스크립트는 "I'm a test." 라는 문장이 적힌 test.html 이라는 HTML 문서를 요구해서 문서의 내용을 파라미터로 alert() 함수를 호출할 것입니다.

<script type="text/javascript" language="javascript">

    

    function makeRequest(url) {

        var http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
                // See note below about this line
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = function() { alertContents(http_request); };
        http_request.open('GET', url, true);
        http_request.send(null);

    }

    function alertContents(http_request) {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }

    }
</script>
<span
    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest('test.html')">
        Make a request
</span>

이 예제에서:

• 사용자는 브라우저 상의 "Make a request" 라는 링크를 클릭합니다;
• 그러면 같은 디렉토리 내의 HTML 파일의 이름인 test.html 를 파라미터로 하여 makeRequest() 함수를 호출합니다;
• 브라우저는 서버로 요구를 보내고 onreadystatechange 에 설정된 alertContents() 함수가 수행됩니다;
• alertContents() 함수는 서버로부터 응답을 받았는지와 정상적으로 처리된 응답인지를 검사하여 그 경우 test.html 파일의 내용을 파라미터로 alert() 함수를 호출합니다.

이 예제는 여기에서 테스트 할 수 있으며 테스트 파일의 내용은 여기에 있습니다.

주 1: 위의 http_request.overrideMimeType('text/xml'); 부분은 XMLHttpRequest 에 의해 호출된 페이지가 올바른 XML 문서가 아닌 경우(즉, 일반 텍스트인 경우) https://bugzilla.mozilla.org/show_bug.cgi?id=311724 에 언급된 대로 Firefox 1.5b 에서 자바스크립트 콘솔 에러를 발생시킬 것입이다.

만약 브라우저 상에서 Syntax Error 혹은 Not Well Formed Error 가 발생하고 당신이 XMLHttpRequest 에서 XML 페이지를 로드하려고 하지 않는다면 당신의 코드에서 저 부분을 삭제하십시오.

주 2: 만약 당신이 약간의 코드에 대한 요청?을 보냈다면, 정적 XML 파일이 아닌 XML 원소?가 반환될 것입니다. 이 경우 당신의 페이지가 Internet Explorer 는 물론 Mozilla 에서도 동작하게 하려면 특정 응답 헤더를 설정해야 합니다. 만약 Content-Type: application/xml 헤더를 설정하지 않았다면, IE는 XML 원소에 접근하는 라인에서 'Object Expected'자바스크립트 에러를 발생시킬 것입니다. 만약 Cache-Control: no-cache 헤더를 설정하지 않았다면, 브라우저는 응답을 캐시에 저장하고, 서버로 요청을 다시 보내지 않을 것입니다 - 이는 디버깅을 힘들게 하는 요인이 됩니다.

주 3: 만약 http_request 변수가 전역적으로 사용되면, makeRequest() 함수를 호출하는 여러 함수들 사이에서 경쟁 상태가 발생할 수 있으며, 이 경우 다른 데이터를 덮어쓰게 됩니다. 이를 방지하기 위해서는 http_request 변수를 함수 내의 지역 변수로 선언하여 alertContent() 함수에 넘겨야 합니다.

주 4: onreadystatechange 의 콜백 함수를 등록하기 위해서는, 아무런 인수도 가질 수 없습니다:

http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (동시 요청)
http_request.onreadystatechange = alertContents(http_request); //2 (동작 안함)
http_request.onreadystatechange = alertContents;  //3 (전역 변수)

1번 방식은 여러 요청을 동시에 수행할 수 있으며, 2번 방식은 동작하지 않고, 3번 방식은 http_request 가 전역 변수로 선언된 경우에 사용됩니다.

4단계 – "The X-Files" or Working with the XML Response

앞의 예제에서 HTTP 요구(request)에 대한 응답을 받은후에 리퀘스트 오브젝트(request object)중 reponseText 프로퍼티를 사용했습니다. 그리고 reponseText은 test.html파일의 내용을 가지고 있습니다. 이제 responseXML를 사용해 봅시다.

첫째로, 나중에 서버에 요구할 수 있는 유효한 XML문서를 만들어 봅시다. 이 문서(test.xml)은 아래와 같은 내용을 담고 있습니다. :

<?xml version="1.0" ?>
<root>
    I'm a test.
</root>

실행 스크립트에서 서버에 대해 요청하는 라인을 아래와 같이 바꿔줘야 합니다. :

...
onclick="makeRequest('test.xml')">
...

그 다음에 alertContents()함수에서, alert()함수를 실행하는 라인, 즉, alert(http_request.responseText);을 아래와 같이 바꿔줘야 합니다. :

var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

이 방법은 responseXML에 의한 XMLDocument오브젝트를 가져왔습니다. 그리고 XML문서에 포함된 데이터를 가져오기 위해서 DOM methods를 사용했습니다. test.xml는 여기에서 볼 수 있으며 갱신된 테스트 스크립트는 여기에서 볼 수 있습니다.

DOM methods에 대한 더 자세한 사항은 Mozilla's DOM implementation 문서를 확인하십시오.

원본 주소 "http://developer.mozilla.org/ko/docs/AJAX:Getting_Started"

분류: AJAX

• 이 문서는 02:27, 2007년 12월 22일 (금)에 마지막으로 바뀌었습니다.
• 이 문서는 총 9,323번 읽혔습니다.

• 문서는 these licenses 저작권 하에 있습니다.