ajax - xmlhttprequest

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

출처 - https://developer.mozilla.org/ko/docs/XMLHttpRequest