XMLHttpRequest(2) 응답 속성, 이진 데이터, 업로드/다운로드 진행 모니터링

responseXML 속성을 분석하고操作합니다　

RequestXML을 사용하여 원격 XML 문서의 내용을 가져올 때, responseXML 속성은 XML 문서를 파싱한 DOM 객체로 되어 있으며, 이는操作과 분석이 어렵습니다. XML 문서를 분석하는 주요 방법이 다섯 가지 있습니다：
　1. XPath를 사용하여 문서의 특정 부분으로定位합니다.
　2. JXON을 사용하여 JavaScript 객체 트리로 변환합니다.
　3. XML을 문자열이나 객체로 수동으로 파싱하고 시리얼라이즈합니다.
　4. XMLSerializer 를 사용하여 DOM 트리를 문자열이나 파일로 시리얼라이즈합니다.
　5.XML 문서의 내용을 미리 알고 있다면 RegExp를 사용할 수 있습니다. RegExp를 사용할 때 개행 문자에 의해 영향을 받는다면 모든 개행 문자를 제거하고 싶을 수도 있습니다. 그러나 이 방법은 "최후의 수단"입니다. 왜냐하면 XML 코드가 약간 변했다면 이 방법이 실패할 수 있기 때문입니다.　

HTML 문서를 포함한 responseText 속성을 분석하고 처리합니다　

주의: W3C XMLHttpRequest 규격에서 HTML은 XMLHttpRequest.responseXML 속성을 통해 분석될 수 있습니다. 더 많은 자세한 내용은 HTML in XMLHttpRequest을 참조하세요.
　XMLHttpRequest을 통해 원격에서 HTML 페이지를 가져올 때, 모든 HTML 태그는 responseText 속성에 문자열로 저장되어 있어서 이 태그를 처리하고 분석하는 것이 어려워집니다. 이 HTML 태그를 분석하는 방법은 주로 세 가지가 있습니다:
　1.XMLHttpRequest.responseXML 속성을 사용합니다.
　2.content를 문서 단편에 주입하고 단편의 DOM을 순회합니다.
　3.HTML 문서의 내용을 미리 알고 있다면 RegExp를 사용할 수 있습니다. RegExp를 사용할 때 개행 문자에 의해 영향을 받는다면 모든 개행 문자를 제거하고 싶을 수도 있습니다. 그러나 이 방법은 "최후의 수단"입니다. 왜냐하면 HTML 코드가 약간 변했다면 이 방법이 실패할 수 있기 때문입니다.　

Handling binary data　

XMLHttpRequest은 일반적으로 텍스트 데이터를 보내고 받는 데 사용되지만, 이진 내용을 보내고 받을 수도 있습니다. XMLHTTPRequest을 이진 데이터로 보내는 데 사용할 수 있는 여러 가지 테스트된 방법이 있습니다. XMLHTTPRequest의 .overrideMimeType() 메서드를 사용하는 것은 하나의 솔루션입니다. 그러나 이 메서드는 표준 메서드가 아니라는 점을 고려해야 합니다.

 var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
// retrieve data unprocessed as a binary string
oReq.overrideMimeType("text/plain; charset=x-user-defined");
/* ... */

XMLHttpRequest Level 2 규격에 새로 추가된 responseType 속성이 있어서 이진 데이터를 보내고 받는 것이 더 쉬워졌습니다.

 var oReq = new XMLHttpRequest();
oReq.onload = function(e) {
 var arraybuffer = xhr.response; // not responseText
 /* ... */
}
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.send();

使用JavaScript类型数组接受二进制数据　

可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer", "blob", "document", 和 "text". response属性的值会根据responseType属性的值的不同而不同, 可能会是一个 ArrayBuffer, Blob, Document, string,或者为NULL(如果请求未完成或失败)
　下例读取了一个二进制图像文件,并且由该文件的二进制原生字节创建了一个8位无符号整数的数组.

 var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
 var arrayBuffer = oReq.response; // 注意:不是oReq.responseText
 if (arrayBuffer) {
  var byteArray = new Uint8Array(arrayBuffer);
  for (var i = 0; i < byteArray.byteLength; i++) {
   // 对数组中的每个字节进行操作
  }
 }
};
oReq.send(null);

除了上面的方法,还可以使用 BlobBuilder API 直接将arraybuffer数据添加进一个Blob对象中, 由于该API还在试验阶段,所以需要加上特定的前缀:

 var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder || window.BlobBuilder;
var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {
 var blobBuilder = new BlobBuilder();
 blobBuilder.append(oReq.response);
 var blob = blobBuilder.getBlob("image",/png");
 // ...
};
oReq.send();

오래된 브라우저에서 바이너리 데이터를 받는 방법
　아래의 load_binary_resource() 메서드는 지정된 URL에서 바이너리 데이터를 로드하고, 데이터를 호출자에게 반환합니다.

 function load_binary_resource(url) {
 var req = new XMLHttpRequest();
 req.open(\'GET\', url, false);
 //XHR 바이너리 캐릭터셋 옵션 by Marcus Granado 2006 [http://mgran.blogspot.com]
 req.overrideMimeType(\'text/plain; charset=x-user-defined\');
 req.send(null);
 if (req.status != 200) return \'\';
 return req.responseText;
}

가장奇妙한 작업은 다섯 번째 줄에서이며, 기본 MIME 타입을 재쓰고, 브라우저가 응답을 순수 텍스트 파일로 처리하도록 강제하며, 사용자 정의 문자 집합을 사용합니다. 이렇게 하면 브라우저에게 데이터를 해석하지 말고, 원본 바이트 코드를 반환하도록 지시합니다.

 var filestream = load_binary_resource(url);
var abyte = filestream.charCodeAt(x) & 0xff; // 버려진 고위 비트(f7)

이전 예제에서는 요청으로 돌아온 바이너리 데이터에서 x 위치의 바이트를 얻었습니다. 유효한 오프셋 범위는 0에서 filestream.length 사이입니다.-1.
　XMLHttpRequest으로 파일 다운로드에 대한 자세한 내용을 확인하려면, 다운로드 파일을 확인하십시오.

　바이너리 데이터 전송

　XMLHttpRequest 객체의 send 메서드가 강화되었으며, ArrayBuffer, Blob 또는 File 객체를传入하여 바이너리 데이터를 전송할 수 있습니다.
　다음 예제에서는 텍스트 파일을 생성하고 POST 메서드를 사용하여 서버로 보냈습니다. 텍스트 파일 이외의 다른 바이너리 데이터 타입도 사용할 수 있습니다.

 var oReq = new XMLHttpRequest();
oReq.open("POST", url, true);
oReq.onload = function (oEvent) {
 // 업로드가 완료되면.
};
var bb = new BlobBuilder(); // 적절한 프리كس가 필요합니다: window.MozBlobBuilder 또는 window.WebKitBlobBuilder
bb.append(\'abc123\');
oReq.send(bb.getBlob(\'text/plain\'));

타입 배열을 이진 데이터로 전송
　JavaScript 타입 배열을 이진 데이터로 전송할 수 있습니다.

 var myArray = new ArrayBuffer(512);
var longInt8View = new Uint8Array(myArray);
for (var i=0; i< longInt8View.length; i++) {
 longInt8View[i] = i % 255;
}
var xhr = new XMLHttpRequest;
xhr.open("POST", url, false);
xhr.send(myArray);

예를 들어, 새로운512바이트의8정수 배열을 생성하고 그것을 전송합니다, 물론, 어떤 이진 데이터든지 전송할 수 있습니다

　진행 모니터링
　XMLHttpRequest 전송에 대한 DOM의 progress 이벤트 모니터링을 지원하며, Web API 진행 이벤트 규약을 따릅니다. : 이 이벤트는 ProgressEvent 인터페이스를 구현합니다.

 var req = new XMLHttpRequest();
//업로드 리스너
req.addEventListener("progress", updateProgress, false);
req.addEventListener("load", transferComplete, false);
req.addEventListener("error", transferFailed, false);
req.addEventListener("abort", transferCanceled, false);
req.open(...);
...
// 서버에서 클라이언트로 이전하는 진행 상황(다운로드)
function updateProgress(evt) {
 if (evt.lengthComputable) {
  var percentComplete = evt.loaded / evt.total;
  ...
 }
  // 총 크기가 알 수 없기 때문에 진행 정보를 계산할 수 없습니다.
 }
}

주의: open() 호출 전에 이벤트 리스너를 추가해야 합니다. 그렇지 않으면 progress 이벤트가 트리거되지 않습니다.
　이전 예제에서 progress 이벤트는 updateProgress() 함수에 지정되었으며, 전송의 총 바이트 수 total과 이미 전송된 바이트 수 loaded을 받습니다. total은 "Content"에서 시작된 바이트 수입니다.-Length 헤더는 전송된 데이터의 전체 길이(바이트)를 나타냅니다. 그러나 lengthComputable 속성의 값이 false인 경우, 총 바이트 수는 알 수 없으며 total의 값은 0입니다. 길이를 알면 lengthComputable 속성이 true입니다.
　progress 이벤트는 다운로드와 업로드의 전송에 동시에 존재합니다. 다운로드 관련 이벤트는 XMLHttpRequest 객체에서 트리거됩니다. 위의 예제와 같습니다. 업로드 관련 이벤트는 XMLHttpRequest.upload 객체에서 트리거됩니다. 다음과 같이 합니다:

 var req = new XMLHttpRequest();
//다운로드 리스너
req.upload.addEventListener("progress", updateProgress);
req.upload.addEventListener("load", transferComplete);
req.upload.addEventListener("error", transferFailed);
req.upload.addEventListener("abort", transferCanceled);
req.open();

주의: progress 이벤트는 file: 프로토콜의 경우 유효하지 않습니다.
　loadend 이벤트를 사용하여 모든 세 가지 로드 종료 조건(abort, load, error)을 감지할 수 있습니다:
　req.addEventListener("loadend", loadEnd, false);
　주의해야 할 것은 loadend 이벤트가 정보를 받은 원인이 무엇인지 정확히 알 수 있는 방법이 없다는 것입니다; 그러나 모든 전송이 끝날 때 이 이벤트 처리를 사용할 수 있습니다.　

XMLHttpRequest 객체는 요청의 다른 단계에서 다른 유형의 이벤트를 트리거하므로 readyState 속성을 확인할 필요가 없습니다.
　send() 호출 시, 단일 loadstart 이벤트가 트리거됩니다. 서버의 응답을 로드하는 동안 XMLHttpRequest 객체는 progress 이벤트를 발생시킵니다. 일반적으로5약 0밀리초 정도로, 이러한 이벤트를 사용하여 사용자에게 요청의 진행 상황을 피드백할 수 있습니다.
　요청이 빠르게 완료되면, progress 이벤트가 결코 트리거되지 않을 수 있습니다. 이벤트가 완료되면 load 이벤트가 트리거됩니다.
　HTTP 요청이 완료되지 않는 이유3이 상황, 해당3이 이벤트는. 요청이 timeout이 되면 timeout 이벤트가 트리거됩니다. 요청이 중지되면 abort 이벤트가 트리거됩니다. 많은 리디렉션과 같은 네트워크 오류는 요청을 완료하는 것을 방해할 수 있지만, 이러한 상황에서 error 이벤트가 트리거됩니다.
　특정 요청에 대해, 브라우저는 load, abort, timeout 및 error 이벤트 중 하나를 트리거합니다. 또한 progress 이벤트가 있습니다.

 if('onprogress' in (new XMLHttpRequest())){ //progress 이벤트를 지원하는지 검사
  var request = new XMLHttpRequest();
  request.onprogress = function (e) {
    if(e.lengthComputable){
      progress.innerHTML = Math.round(100* e.loaded/ e.total) + %'';
    }
  }
}

이것이 이 문서의 전체 내용입니다. 많은 도움이 되었기를 바랍니다. 또한, 많은 지지를 부탁드립니다. 나아가教程.

선언: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 모두입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반 내용을 발견하면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（이메일을 보내는 경우, #을 @으로 변경하십시오. 신고하고 관련 증거를 제공하시면, 사이트는 즉시 위반 내용을 삭제합니다.

기본 튜토리얼

추천해드립니다