Ajax 시작하기

  • 리비전 슬러그: AJAX/Getting_Started
  • 리비전 제목: Ajax 시작하기
  • 리비전 아이디: 176360
  • 제작일시:
  • 만든이: Sebuls
  • 현재 리비전인가요? 아니오
  • 댓글 /* AJAX란? */

리비전 내용

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

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)그리고 다른 브라우저에서는 마이크로소프트의 엑티브엑스 오브젝트의 특성과 메소드를 지원하기 위해 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 헤더가 없을 경우 모질라 계열 브라우져 일부는 버전에 따라 잘 작동하지 않을 수 있습니다. 이 경우, 서버로 부터 받은 헤더가 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() 함수를 호출합니다.

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

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

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

Note 2: if you are sending a request to a piece of code that will return XML, rather than to a static XML file, you must set some response headers if your page is to work in Internet Explorer in addition to Mozilla. If you do not set header Content-Type: application/xml, IE will throw a Javascript error 'Object Expected' after the line where you try to access an XML element. If you do not set header Cache-Control: no-cache the browser will cache the response and never re-submit the request, making debugging 'challenging'.

Note 3: if the http_request variable is used globally, competing functions calling makeRequest() may overwrite each other, causing a race condition. Declaring the http_request variable local to the function and passing it to the alertContent() function prevents the race condition.

Note 4: To register the call back function onreadystatechange, you cannot have any argument:

http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (simultaneous request)
http_request.onreadystatechange = alertContents(http_request); //2 (does not work)
http_request.onreadystatechange = alertContents;  //3 (global variable)

Method 1 allows to have several requests done in simultaneously, method 2 will not work, method 3 is used if http_request is a global variable

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

앞의 예제에서 HTTP 요구(request)에 대한 응답을 받은후에 리퀘스트 오브젝트(request object)중 reponseText 프로퍼티를 사용했습니다. 그리고 reponseTexttest.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 문서를 확인하십시오.

{{ wiki.languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }}

리비전 소스

<p>이 글은 당신이 AJAX 기본을 헤쳐가는 것을 이끌고, 두 가지 간단한 훈련용 예제를 제공합니다.
</p>
<h3 name="AJAX.EB.9E.80.3F"> AJAX란? </h3>
<p>AJAX (Asynchronous JavaScript and XML)는 강력한 브라우저 특징 두가지를 가리키는 신조어입니다. 개발된지는 몇 년 됐지만 많은 개발자들은 그냥 보고 지나치다가 최근 Gmail, Google의 추천검색어, 그리고 Google 지도가 나오면서 널리 알려졌습니다.
</p><p>여기서 말하는 두 가지 특징이란 다음과 같습니다:
</p>
<ul><li> 웹 페이지를 다시 불러들이지 않고 서버에 요구할 수 있음.
</li><li> XML문서와 작업을 하거나 파싱할 수 있음.
</li></ul>
<h3 name="1.EB.8B.A8.EA.B3.84_.E2.80.93_say_.22Please.21.22_or_How_to_Make_an_HTTP_Request"> 1단계 – say "Please!" or How to Make an HTTP Request </h3>
<p>자바스크립트를 써서 서버에 HTTP 요구를 하기위해서, 이런 기능을 제공하는 클래스 인스턴스가 필요합니다. 그런 클래스는 인터넷익스플로러(Internet Explorer)에서 <code>XMLHTTP</code>라고 불리우는 엑티브엑스(ActiveX) 오브젝트로 처음으로 도입되었습니다. 모질라(Mozilla), 사파리(Safari)그리고 다른 브라우저에서는 마이크로소프트의 엑티브엑스 오브젝트의 특성과 메소드를 지원하기 위해 <code>XMLHttpRequest</code>클레스를 구현합니다.
</p><p>따라서, 다음과 같이 하면 모든 브라우저에서 사용할 수 있는 인스턴스를 만들 수 있습니다.
</p>
<pre>if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
</pre>
<p>(XMLHTTP인트턴스를 만드는 위의 간단한 코드는 이해를 돕기 위한 것입니다. 실제 사용예를 보려면 이 글의 단계3을 보십시오.)
</p><p>서버의 응답에 XML mime-type 헤더가 없을 경우 모질라 계열 브라우져 일부는 버전에 따라 잘 작동하지 않을 수 있습니다. 이 경우, 서버로 부터 받은 헤더가 <code>text/xml</code>이 아닐 경우 서버에게서 받은 헤더를 무시하기 위한 메소드를 호출할 수 있습니다.
</p>
<pre>http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
</pre>
<p>요구(request)에 의해서 서버로부터 받은 내용을 어떻게 할것인가를 결정하는것이 다음에 할 일입니다. 이번 단계에서는 자바스크립트로 서버로부터 받은 응답을 처리하는 HTTP request에 대해 말할 필요가 있습니다. 이것은 아래와 같은 당신이 사용하고 싶은 자바스크립트 함수 이름(nameOfTheFunction)을 <code>onreadystatechange</code> 프로퍼티로 설정하면 됩니다. :
</p><p><code>http_request.onreadystatechange = nameOfTheFunction;</code>
</p><p>함수 이름뒤에 괄호와 넘어갈 파라미터가 없습니다. 또, 함수 이름을 넘기는 대신에 파라미터를 넘길 때 함수 정의에 관한 자바스크립트 기술 사용할 수 있습니다. 그렇게 하면 아래와 같이 응답을 바로 처리할 수 있는 액션을 정의 할 수 있습니다. :
</p>
<pre>http_request.onreadystatechange = function(){
    // do the thing
};
</pre>
<p>다음으로 응답을 받은 즉시 어떤 것을 할것인지 정의한 후, 당신은 실제적인 요구(request;서버에 대한 요구)를 보내야 합니다. 아래와 같이 <code>open()</code>와 <code>send()</code>와 같은 HTTP request 클래스 메소드를 불러내야 합니다. :
</p>
<pre>http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);
</pre>
<ul><li> <code>open()</code> 메소드의 첫번째 파라미터는 HTTP 요구 방식(request method) - GET, POST, HEAD 중의 하나이거나 당신의 서버에서 지원하는 다른 방식- 입니다. 이 파라미터는 HTTP 표준에 따라 모두 대문자로 표기하십시오; 그렇지 않으면 (파이어폭스와 같은) 특정 브라우저는 이 요구를 처리하지 않을 수도 있습니다. 가능한 HTTP 요구 방식에 대한 정보는 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C 명세</a>를 참고하기 바랍니다.
</li><li> 두번째 파라미터는 당신이 요구할 페이지의 URL 입니다. 보안을 위해 서드 파티 도메인 상의 페이지를 호출할 수는 없습니다. 당신이 요구하는 모든 페이지에 정확한 도메인 네임을 사용하십시오. 그렇지 않으면 <code>open()</code> 메소드를 호출할 때 'permission denied' 에러가 발생할 수 있습니다. 일반적인 오류는 당신의 사이트에 domain.tld 와 같은 형태로 접근하는 것 입니다. 이러한 경우 www.domain.tld 와 같은 형태로 페이지를 요구하기 바랍니다.
</li><li> 세번째 파라미터는 요구가 비동기식(Asynchronous)으로 수행될 지를 결정합니다. 만약 이 파라미터가 <code>TRUE</code> 로 설정된 경우에는 자바스크립트 함수의 수행은 서버로부터 응답을 받기 전에도 계속 진행됩니다. 이것이 AJAX 의 첫번째 A입니다.
</li></ul>
<p><code>send()</code> 메소드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능합니다. 데이터는 아래와 같은 쿼리 문자열 형식이 되어야 합니다:
</p><p><code>name=value&amp;anothername=othervalue&amp;so=on</code>
</p><p>참고로 POST 방식을 사용하여 데이터를 보내려면 다음과 같은 방법으로 요구의 MIME 형식을 변경해야만 합니다:
</p>
<pre>http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
</pre>
<p>그렇지 않으면 서버는 이 데이터를 무시할 것 입니다.
</p>
<h3 name="2.EB.8B.A8.EA.B3.84_.E2.80.93_.22There_you_go.21.22_or_Handling_the_Server_Response"> 2단계 – "There you go!" or Handling the Server Response </h3>
<p>요구를 보냈을 때 당신은 이미 응답을 처리하기 위한 자바스크립트 함수의 이름을 지정했었다는 것을 기억하기 바랍니다.
</p><p><code>http_request.onreadystatechange = nameOfTheFunction;</code>
</p><p>이제 이 함수가 어떤 일을 하는지 보기로 합시다. 먼저, 해당 함수에서는 요구의 상태값을 검사할 필요가 있습니다. 만약 상태값이 4 라면, 서버로부터 모든 응답을 받았으며 이를 처리할 준비가 되었다는 것을 뜻합니다.
</p>
<pre>if (http_request.readyState == 4) {
    // 이상 없음, 응답 받았음
} else {
    // 아직 준비되지 않음
}
</pre>
<p><code>readyState</code> 가 가질 수 있는 모든 값의 목록은 아래와 같습니다:
</p>
<ul><li> 0 (uninitialized)
</li><li> 1 (loading)
</li><li> 2 (loaded)
</li><li> 3 (interactive)
</li><li> 4 (complete)
</li></ul>
<p>(<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">원문</a>)
</p><p>다음으로 검사할 것은 HTTP 서버 응답의 상태 코드입니다. 가능한 모든 코드 값의 목록은 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C 사이트</a>에서 확인할 수 있습니다. 여기서는 단지 정상적으로 처리된 상태를 나타내는 200 의 경우 만을 검사합니다.
</p>
<pre>if (http_request.status == 200) {
    // 이상 없음!
} else {
    // 요구를 처리하는 과정에서 문제가 발생되었음
    // 예를 들어 응답 상태 코드는 404 (Not Found) 이거나
    // 혹은 500 (Internal Server Error) 이 될 수 있음
}
</pre>
<p>이제 당신의 요구와 그에 대한 응답에 대한 상태 코드를 검사했으므로, 당신은 서버에서 받은 데이터를 통해 원하는 작업을 수행할 수 있다. 응답 데이터에 접근하기 위한 2 가지 옵션이 있다:
</p>
<ul><li> <code>http_request.responseText</code> – 서버의 응답을 텍스트 문자열로 반환할 것이다.
</li><li> <code>http_request.responseXML</code> – 서버의 응답을 <code>XMLDocument</code> 객체로 반환하며 당신은 자바스크립트의 DOM 함수들을 통해 이 객체를 다룰 수 있을 것이다.
</li></ul>
<h3 name="3.EB.8B.A8.EA.B3.84_.E2.80.93_.22All_together_now.21.22_-_A_Simple_Example"> 3단계 – "All together now!" - A Simple Example </h3>
<p>이제 이들을 한데 모아서 간단한 HTTP 요구를 수행해보겠습니다. 우리가 작성할 자바스크립트는 "I'm a test." 라는 문장이 적힌 <code>test.html</code> 이라는 HTML 문서를 요구해서 문서의 내용을
파라미터로 <code>alert()</code> 함수를 호출할 것입니다.
</p>
<pre>&lt;script type="text/javascript" language="javascript"&gt;

    

    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.');
            }
        }

    }
&lt;/script&gt;
&lt;span
    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest('test.html')"&gt;
        Make a request
&lt;/span&gt;
</pre>
<p><br>
이 예제에서:
</p>
<ul><li> 사용자는 브라우저 상의 "Make a request" 라는 링크를 클릭합니다;
</li><li> 그러면 같은 디렉토리 내의 HTML 파일의 이름인 <code>test.html</code> 를 파라미터로 하여 <code>makeRequest()</code> 함수를 호출합니다;
</li><li> 브라우저는 서버로 요구를 보내고 <code>onreadystatechange</code> 에 설정된 <code>alertContents()</code> 함수가 수행됩니다;
</li><li> <code>alertContents()</code> 함수는 서버로부터 응답을 받았는지와 정상적으로 처리된 응답인지를 검사하여 그 경우 <code>test.html</code> 파일의 내용을 파라미터로 <code>alert()</code> 함수를 호출합니다.
</li></ul>
<p>이 예제는 <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test.html">여기</a>에서 테스트 할 수 있으며 테스트 파일의 내용은 <a class="external" href="http://www.w3clubs.com/mozdev/test.html">여기</a>에 있습니다.
</p><p><b>주의</b>: 위의 <code>                http_request.overrideMimeType('text/xml');</code> 부분은 
XMLHttpRequest 에 의해 호출된 페이지가 올바른 XML 문서가 아닌 경우(즉, 일반 텍스트인 경우) https://bugzilla.mozilla.org/show_bug.cgi?id=311724 에 언급된 대로 파이어폭스 1.5b 에서 자바스크립트 콘솔 에러를 발생시킬 것입이다.
</p><p>만약 브라우저 상에서 Syntax Error 혹은 Not Well Formed Error 가 발생하고 당신이 XMLHttpRequest 에서 XML 페이지를 로드하려고 하지 않는다면 당신의 코드에서 저 부분을 삭제하십시오.
</p><p><b>Note 2</b>: if you are sending a request to a piece of code that will return XML, rather than to a static XML file, you must set some response headers if your page is to work in Internet Explorer in addition to Mozilla. If you do not set header <code>Content-Type: application/xml</code>, IE will throw a Javascript error 'Object Expected' after the line where you try to access an XML element. If you do not set header <code>Cache-Control: no-cache</code> the browser will cache the response and never re-submit the request, making debugging 'challenging'.
</p><p><b>Note 3</b>: if the http_request variable is used globally, competing functions calling makeRequest() may overwrite each other, causing a race condition.  Declaring the http_request variable local to the function and passing it to the alertContent() function prevents the race condition.
</p><p><b>Note 4</b>: To register the call back function onreadystatechange, you cannot have any argument:
</p>
<pre>http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (simultaneous request)
http_request.onreadystatechange = alertContents(http_request); //2 (does not work)
http_request.onreadystatechange = alertContents;  //3 (global variable)
</pre>
<p>Method 1 allows to have several requests done in simultaneously, method 2 will not work, method 3 is used if http_request is a global variable
</p>
<h3 name="4.EB.8B.A8.EA.B3.84_.E2.80.93_.22The_X-Files.22_or_Working_with_the_XML_Response"> 4단계 – "The X-Files" or Working with the XML Response </h3>
<p>앞의 예제에서 HTTP 요구(request)에 대한 응답을 받은후에 리퀘스트 오브젝트(request object)중 <code>reponseText</code> 프로퍼티를 사용했습니다. 그리고 <code>reponseText</code>은 <code>test.html</code>파일의 내용을 가지고 있습니다. 이제 <code>responseXML</code>를 사용해 봅시다.
</p><p>첫째로,  나중에 서버에 요구할 수 있는 유효한 XML문서를 만들어 봅시다. 이 문서(test.xml)은 아래와 같은 내용을 담고 있습니다. :
</p>
<pre>&lt;?xml version="1.0" ?&gt;
&lt;root&gt;
    I'm a test.
&lt;/root&gt;
</pre>
<p>실행 스크립트에서 서버에 대해 요청하는 라인을 아래와 같이 바꿔줘야 합니다. :
</p>
<pre>...
onclick="makeRequest('test.xml')"&gt;
...
</pre>
<p>그 다음에 <code>alertContents()</code>함수에서, <code>alert()</code>함수를 실행하는 라인, 즉, <code>alert(http_request.responseText);</code>을 아래와 같이 바꿔줘야 합니다. :
</p>
<pre>var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
</pre>
<p>이 방법은 <code>responseXML</code>에 의한 <code>XMLDocument</code>오브젝트를 가져왔습니다. 그리고 XML문서에 포함된 데이터를 가져오기 위해서 DOM methods를 사용했습니다. <code>test.xml</code>는 <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">여기</a>에서 볼 수 있으며 갱신된 테스트 스크립트는 <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">여기</a>에서 볼 수 있습니다.
</p><p>DOM methods에 대한 더 자세한 사항은 <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a> 문서를 확인하십시오.
</p>{{ wiki.languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }}
Revert to this revision