ResponseXML 속성을 분석하고 조작하십시오
원격 XML 문서의 내용을 얻기 위해 XMLHTTPREQUEST를 사용하는 경우 ResponseXML 속성은 XML 문서에서 구문 분석되는 DOM 객체로 조작 및 분석하기가 어렵습니다. 다음은 XML 문서를 분석하는 5 가지 주요 방법입니다.
1. XPath를 사용하여 문서의 공식 부분을 찾으십시오.
2. JXON을 사용하여 JavaScript 객체 트리로 변환하십시오.
3. 수동으로 XML을 문자열 또는 물체로 구문 분석하고 직렬화합니다.
4. xmlserializer를 사용하여 DOM 트리를 문자열 또는 파일로 직렬화하십시오.
5. XML 문서의 내용을 미리 알고 있다면 Regexp를 사용할 수 있습니다. Regexp로 스캔 할 때 Newlines의 영향을받는 경우 모든 Newlines를 삭제할 수 있습니다. 그러나이 접근법은 XML 코드가 약간 변경되면 접근 방식이 실패 할 수 있기 때문에 "직접"입니다.
HTML 문서가 포함 된 responseText 속성을 구문 분석하고 조작합니다
참고 : HTML은 W3C XMLHTTPREQUEST 사양에서 XMLHTTPREQUEST.RESPONSEXML 속성을 통해 구문 분석 할 수 있습니다. 자세한 내용은 xmlhttprequest에서 HTML을 읽으십시오.
XMLHTTPREQUEST를 사용하여 원격 끝에서 HTML 페이지를 가져 오면 모든 HTML 태그는 ResponseText 속성에 문자열로 저장되어 이러한 태그를 조작하고 구문 분석하기가 어렵습니다. 이 HTML 태그를 구문 분석하는 세 가지 주요 방법이 있습니다.
1. xmlhttprequest.responsexml 속성을 사용하십시오.
2. Fragment.body.innerHtml을 통해 문서 조각에 내용을 주입하고 DOM의 조각을 통해 반복하십시오.
3. HTML 문서의 내용을 미리 알고 있다면 Regexp를 사용할 수 있습니다. Regexp로 스캔 할 때 Newlines의 영향을받는 경우 모든 Newlines를 삭제할 수 있습니다. 그러나이 접근법은 HTML 코드가 약간 변경되면 접근 방식이 실패 할 수 있기 때문에 "직접"입니다.
이진 데이터 처리
xmlhttprequest는 일반적으로 텍스트 데이터를 보내고받는 데 사용되지만 실제로 이진 컨텐츠를 보내고 수락 할 수 있습니다. xmlhttprequest를 사용하여 이진 데이터를 전송하도록 강제로 테스트 한 많은 방법이 있습니다. xmlhttprequest의 .overridemimeType () 메소드는 표준 방법이 아니지만 해결책입니다.
var oreq = new xmlhttprequest (); oreq.open ( "get", url, true); // 이진 stringoreq.overridemimeType ( "text/plain; charset = x-user defined");/ * ... */
ResponseType 속성이 Xmlhttprequest 레벨 2 사양에 추가되어 이진 데이터를 더 쉽게 보내고 수신 할 수 있습니다.
var oreq = new xmlhttprequest (); oreq.onload = function (e) {var arraybuffer = xhr.response; // relateetext가 아님/ * ... */} oreq.open ( "get", url, true); oreq.responsetype = "arraybuffer"; oreq.send ();JavaScript 유형 배열을 사용하여 이진 데이터를 수락합니다
xmlhttprequest 객체의 responseType 속성을 설정하여 서버에서 반환 된 응답의 데이터 유형을 변경할 수 있습니다. 사용 가능한 속성 값은 빈 문자열 (기본값), "Arraybuffer", "Blob", "Document"및 "Text"입니다. 응답 속성의 값은 응답 장치 속성의 값에 따라 다릅니다.이 값은 ArrayBuffer, Blob, Document, String 또는 NULL 일 수 있습니다 (요청이 완료되지 않았거나 실패한 경우)
다음 예제는 이진 이미지 파일을 읽고 파일의 이진 기본 바이트에서 8 비트의 설계되지 않은 정수 배열이 생성됩니다.
var oreq = new XmlhttpRequest (); oreq.open ( "get", "/myfile.png", true); oreq.raybuffer = "arraybuffer"; oreq.onload = function (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를 사용하여 Blob 객체에 Arraybuffer 데이터를 직접 추가 할 수도 있습니다. API는 여전히 실험 단계에 있기 때문에 특정 접두사를 추가해야합니다.
var blobbuilder = window.mozblobbuilder || Window.WebKitBloBBuilder || Window.msblobBuilder || wind BlobBuilder.Append (Oreq.Response); var blob = blobbuilder.getBlob ( "image/png"); // ...}; oreq.send ();
오래된 브라우저에서 이진 데이터를 수락합니다
다음 load_binary_resource () 메소드는 지정된 URL에서 이진 데이터를로드하고 데이터를 발신자에게 반환 할 수 있습니다.
함수 load_binary_resource (url) {var req = new xmlhttprequest (); req.open (/'get/', url, false); // XHR 바이너리 숯불 옵트 마커스 Granado 2006 [http://mgran.blogspot.com] req.overridemimeType (/'text/plain; charset = x-user-defined/'); req.send (null); if (req.status! = 200) return /' /'; retur req.responsetext;}가장 멋진 작업은 다섯 번째 라인에 있으며, 기본 MIME 유형을 다시 작성하여 브라우저가 사용자 정의 문자 세트를 사용하여 응답을 일반 텍스트 파일로 처리하도록합니다. 이를 통해 브라우저는 데이터를 구문 분석하지 말고 처리되지 않은 바이트 코드를 직접 반환하지 않도록합니다.
var filestream = load_binary_resource (url); var abyte = filestream.charcodeat (x) & 0xff; // 하이 비트 바이트 (F7)
위의 예는 요청에 의해 반환 된 이진 데이터에서 x에서 바이트를 얻습니다. 유효한 오프셋 범위는 FILESTREAM.LENGTH-1에서 0입니다.
자세한 내용은 xmlhttprequest를 사용하여 다운로드 파일을 확인하고 다운로드 파일을보십시오.
이진 데이터를 보냅니다
XMLHTTPREQUEST 객체의 보내기 메소드가 향상되었으며 ArrayBuffer, Blob 또는 File Object를 전달하여 간단히 이진 데이터를 보낼 수 있습니다.
다음 예제는 텍스트 파일을 생성하고 Post 메소드를 사용하여 파일을 서버로 보냅니다. 텍스트 파일 이외의 다른 바이너리 데이터 유형을 사용할 수도 있습니다.
var oreq = new xmlhttprequest (); oreq.open ( "post", url, true); oreq.onload = function (oevent) {// 업로드 후 완료된 후.}; var bb = new blobbuilder (); // 적절한 접두사가 필요합니다 : Window.MozBloBBuilder 또는 Window.WebKitBloBBuilderBB.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 ", post", post " false); xhr.send (MyArray);위의 예는 512 바이트 8 비트 정수 배열을 생성하여 보냅니다. 물론 이진 데이터를 보낼 수도 있습니다.
진행 상황을 모니터링합니다
DOM을 지원하는 Progress Event Monitoring은 XMLHTTPREQUEST 전송을위한 것이며 Web API 진행 상황 이벤트 사양을 따릅니다.이 이벤트는 진행 상황 인터페이스를 구현합니다.
var req = new xmlhttprequest (); // 업로드 듣기 req.adeventListener ( "progress", updateprogress, false); req.adeventListener ( "load", transferComplete, false); req.addeventListener ( "ERROR", TRANSSFAILED, FALSE); ABBORCELEDERNER ( "TransferFailed); req.AddeventListener (", 송금); false); req.open (...); ... // 서버에서 클라이언트로의 전송 진행 (다운로드) 함수 updateprogress (Evt) {if (evt.lengthcomputable) {var % complete = evt.loaded/ evt.total; ...} else {// 총 크기가 알 수 없으므로 진행 정보를 계산할 수 없습니다}}참고 : Open () 호출을 요청하기 전에 이벤트 청취를 추가해야합니다. 그렇지 않으면 진행 상황이 트리거되지 않습니다.
이전 예제에서 진행 상황은 updateProgress () 함수에 의해 처리되도록 지정되고 총 전송 된 바이트 총계 및 이미 전송 된로드 된 총 전송 된로드된다. 이는 "콘텐츠 길이"헤더에서 전송 된 데이터의 전체 길이 (바이트)입니다. 그러나 길이 컴퓨팅 가능한 속성의 값이 False 인 경우 총 바이트 수는 알 수없고 총 값은 0입니다. 길이가 알려진 경우 길이 컴퓨팅 가능한 속성은 참입니다.
진행 상황은 다운로드 및 업로드 전송 모두에 존재합니다. 다운로드 관련 이벤트는 위의 예와 마찬가지로 XMLHTTPREQUEST 객체에서 트리거됩니다. 관련 이벤트 업로드는 다음과 같은 xmlhttprequest.upload 객체에서 트리거됩니다.
var req = new xmlhttprequest (); // 청취자 req.upload.addeventListener ( "progress", updateprogress); req.upload.addeventListener ( "load", transferComplete); req.upload.addeventListener ( "error", req.upload. 송환); req.open ();
참고 : 파일 : 프로토콜을 사용할 때 진행 상황이 유효하지 않습니다.
로드 엔드 이벤트를 사용하여 세 가지 부하 종료 조건을 모두 감지합니다 (중단,로드, 오류) :
req.addeventListener ( "loadend", loadend, false);
로드 엔드 이벤트가 수신 한 정보가 작업 종료로 인해 어떤 조건인지 정확히 알 수있는 방법이 없다는 점에 유의해야합니다. 그러나이 이벤트를 사용하여 모든 전송이 끝날 때 처리 할 수 있습니다.
xmlhttprequest 객체는 요청의 다른 단계에서 다양한 유형의 이벤트를 트리거하므로 ReadyState 속성을 확인할 필요가 없습니다.
send ()가 호출되면 단일로드 스타트 이벤트가 트리거됩니다. 서버의 응답이로드되면 XMLHTTPREQUEST 객체는 일반적으로 50 밀리 초마다 진행 상황을 경험하므로 이러한 이벤트는 사용자에게 요청 진행 상황에 대한 피드백을 제공 할 수 있습니다.
요청이 빨리 완료되면 진행 상황을 트리거 할 수 없습니다. 이벤트가 완료되면로드 이벤트가 트리거됩니다.
HTTP 요청이 3 개 이벤트에 해당하는 3 가지 사례가 있습니다. 요청 시간 초과가 있으면 타임 아웃 이벤트가 트리거됩니다. 요청이 중단되면 abort 이벤트가 트리거됩니다. 너무 많은 리디렉션과 같은 네트워크 오류는 요청이 완료되는 것을 방지하지만이 경우 오류 이벤트가 트리거됩니다.
특정 요청의 경우 브라우저는로드, 중단, 타임 아웃 및 오류 이벤트 중 하나와 진행 상황 만 트리거됩니다.
if (/'onprogress/'in (new xmlhttprequest ())) {// 진행 상황이 지원되는지 여부 var request = new xmlhttprequest (); request.onprogress = function (e) {if (e.lengthcomputable) {progress.innerhtml = math.round (100* e.loaded/e.total) +/'%/'; }}}위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.