Skip to main content

Visit Mozilla.org

XMLHttpRequest

MDC

XMLHttpRequest는 Microsoft가 만든 JavaScript 개체(object)입니다. 후에 Mozilla도 이것을 받아들였습니다. XMLHttpRequest는 HTTP를 통해서 쉽게 데이터를 받을 수 있게 해줍니다. 이름과는 좀 동떨어지게도 XML 문서 이상의 용도로 쓰일 수 있습니다. Gecko에서 이 개체는 nsIJSXMLHttpRequest와 nsIXMLHttpRequest 인터페이스를 구현한 개체입니다. 최신 버전 Gecko에서 이 개체에 변경 사항이 좀 있었습니다. XMLHttpRequest changes for Gecko1.8을 보십시오.

목차

[편집] 기본 사용

XMLHttpRequest의 사용법은 아주 간단합니다. 이 개체의 인스턴스를 만들고, URL을 열고, 요청을 보내면 됩니다. 그 후에는 인스턴스의 결과 문서와 HTTP 상태 코드를 사용할 수 있게됩니다.

[편집] 예 

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false);
req.send(null);
if(req.status == 200)
  dump(req.responseText);
참고: 이 예제는 동기적으로 동작하므로 이 함수를 JavaScript에서 호출하면 UI가 멈춥니다. 실제 제품 코드에서는 이 코드를 사용하지 마십시오.

[편집] 비동기 사용

XMLHttpRequest를 확장 기능에서 사용하려면 반드시 비동기적으로 동작하도록 해야합니다. 비동기적으로 사용할 때, 데이터가 오면 콜백을 받게 됩니다. 이로써 브라우저가 우리 요청을 처리하는 동안에도 평상시처럼 계속 동작하게 됩니다.

[편집] 예 

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      dump(req.responseText);
     else
      dump("Error loading page\n");
  }
};
req.send(null);

[편집] 프로그레스 모니터링

XMLHttpRequest가 지원하는 nsIJSXMLHttpRequest 인터페이스는 요청이 처리되는 동안 발생할 수 있는 다양한 이벤트를 들을 수 있습니다. 주기적인 진행 상태 알림, 에러 알림 등등이 이에 포함됩니다.

예를 들어, 문서를 받는 동안 사용자에게 진행 상태 정보를 제공하려면 다음과 같은 코드를 사용할 수 있습니다. 

onProgress: function(e) {
  var percentComplete = (e.position / e.totalSize)*100;
  ...
},

onError: function(e) {
  alert("Error " + e.target.status + " occurred while receiving the document.");
},
..
httpRequest = new XMLHttpRequest();
httpRequest.open("GET", url, true);
httpRequest.onprogress = this.onProgress;
httpRequest.onload = this.onLoad;
httpRequest.onerror = this.onError;
httpRequest.send(null);

onprogress의 속성인 position과 totalSize는 받은 데이터가 몇 바이트인지, 데이터의 전체 크기가 몇 바이트인지 각각 나타냅니다.

모든 이벤트는 그에 대응하는 XMLHttpRequest를 target 속성으로 가지고 있습니다.

[편집] 다른 속성과 메소드

위에서 살펴본 특성(property)과 메소드 외에도 요청 개체에는 유용한 특성과 메소드가 있습니다.

[편집] responseXML

XML 문서를 읽어들일 때, responseXML 특성은 XmlDocument 개체인 채로 XML 문서를 포함하고 있습니다. 이 문서는 DOM 메소드를 이용해서 조작할 수 있습니다. 서버가 적격의(well-formed) XML이긴 하지만 XML Content-Type 헤더가 명시되지 않은 문서를 보냈을 때, 브라우저가 문서를 XML로 간주하도록 하기 위해 overrideMimeType() 을 사용할 수 있습니다. 서버가 적격이 아닌 XML 문서를 보냈을 때는 어떤 재정의(override)가 있더라도 상관없이 responseXML은 null이 됩니다.

[편집] overrideMimeType()

이 메소드는 문서를 특정한 content type으로 처리하도록 강제하는데 사용됩니다. 서버가 XML 문서를 보내오지만 Content-Type 헤더를 제대로 설정해서 보내지 않을 때 responseXML를 사용하고 싶다면 이 메소드를 사용하면 됩니다.
참고: 이 메소드는 반드시 send() 보다 먼저 호출되어야 합니다.
var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.overrideMimeType('text/xml');
req.send(null);

[편집] setRequestHeader()

요청을 보내기 전에 요청의 HTTP 헤더를 설정하려면 이 메소드를 사용합니다.
참고: 이 메소드를 사용하기 전에 반드시 open()을 호출해야 합니다.
var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.setRequestHeader("X-Foo", "Bar");
req.send(null);

[편집] getResponseHeader()

서버 응답으로부터 HTTP 헤더를 얻고 싶을 때 이 메소드를 사용합니다. 

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.send(null);
dump("Content-Type: " + req.getResponseHeader("Content-Type") + "\n");

[편집] XPCOM에서 사용하기

참고: JavaScript XPCOM 구성요소(component)에서 XMLHttpRequest를 사용하려면 변경이 필요합니다.

JavaScript XPCOM에서는 XMLHttpRequest() 생성자로 XMLHttpRequest 개체를 생성할 수 없습니다. 구성요소 안에서는 생성자가 정의되지 않고, 코드는 에러를 발생시킵니다. 그러므로 우리는 다른 문법을 사용해야 합니다.

이렇게 쓰는 대신, 

var req = new XMLHttpRequest();
req.onprogress = onProgress;
req.onload = onLoad;
req.onerror = onError;
req.open("GET", url, true);
req.send(null);

이렇게 합니다. 

var request = Components.
              classes["@mozilla.org/xmlextras/xmlhttprequest;1"].
              createInstance();

// 이벤트 핸들러를 설정하기 위해서 nsIDOMEventTarget을 사용

request = request.QueryInterface(Components.interfaces.nsIDOMEventTarget);
request.addEventListener("progress", function(evt) { ... }, false);
request.addEventListener("load", function(evt) { ... }, false);
request.addEventListener("error", function(evt) { ... }, false);

// 요청을 보내기 위해서 nsIXMLHttpRequest를 사용

request = request.QueryInterface(Components.interfaces.nsIXMLHttpRequest);
request.open("GET", "http://www.example.com/", true);
request.send(null);

[편집] References

  1. XMLHttpRequest - REST and the Rich User Experience
  2. XULPlanet documentation
  3. Microsoft documentation
  4. Apple developers' reference
  5. "Using the XMLHttpRequest Object" (jibbering.com)
  6. The XMLHttpRequest Object: W3C Working Draft
원본 주소 "http://developer.mozilla.org/ko/docs/XMLHttpRequest"