xmlhttprequest는 JavaScript가 HTTP (S) 통신을 수행 할 수있는 브라우저 인터페이스입니다.
처음에 Microsoft는 IE 5 에서이 인터페이스를 도입했습니다. 매우 유용하기 때문에 다른 브라우저가 모방 및 배포되었으므로 Ajax 작업이 탄생했습니다.
그러나이 인터페이스는 표준화되지 않았으며 각 브라우저의 구현은 다소 다릅니다. HTML 5의 개념이 형성된 후, W3C는이 인터페이스 표준화를 고려하기 시작했다. 2008 년 2 월, XMLHTTPREQUEST 레벨 2 초안이 제안되었습니다.
이 새로운 버전의 XMLHTTPREQUEST는 인터넷 혁신을 크게 촉진하는 많은 유용한 새로운 기능을 제안합니다. 이 기사는이 새로운 버전을 자세히 소개합니다.
1. XMLHTTPREQUEST 객체의 오래된 버전
새 버전을 소개하기 전에 이전 버전의 사용법을 검토해 봅시다.
먼저 XMLHTTPREQUEST의 새 인스턴스를 만듭니다.
var xhr = 새로운 xmlhttprequest ();
그런 다음 HTTP 요청이 원격 호스트에 발행됩니다.
코드 사본은 다음과 같습니다.
xhr.open ( 'get', 'example.php');
xhr.send ();
그런 다음 원격 호스트가 응답 할 때까지 기다립니다. 현재 XMLHTTPREQUEST 객체의 상태 변경을 모니터링하고 콜백 함수를 지정해야합니다.
xhr.onreadystatechange = function () {if (xhr.readystate == 4 && xhr.status == 200) {alert (xhr.responsetext); } else {alert (xhr.statUstext); }};위의 코드에는 XMLHTTPREQUEST의 이전 버전의 주요 속성이 포함되어 있습니다.
코드 사본은 다음과 같습니다.
* xhr.readystate : xmlhttprequest 객체의 상태는 4와 같습니다. 데이터가 수신되었음을 의미합니다.
* XHR.STATUS : 서버에서 반환 한 상태 코드는 200과 동일하면 모든 것이 정상임을 의미합니다.
* xhr.responsetext : 서버에서 반환 한 텍스트 데이터
* xhr.responsexml : xml 형식 데이터는 서버에서 반환합니다
* XHR.StatUSTEXT : 서버에서 반환 한 상태 텍스트.
2. 이전 버전의 단점
xmlhttprequest의 이전 버전에는 다음과 같은 단점이 있습니다.
* 텍스트 데이터 전송 만 지원되며 이진 파일을 읽고 업로드하는 데 사용할 수 없습니다.
* 데이터를 전송 및 수신 할 때 데이터가 없으므로 완료되었는지 여부에 관계없이 프롬프트 할 수 있습니다.
* "동일한 원산지 정책"으로 인해 도메인 이름이 동일한 서버에서만 데이터를 요청할 수 있습니다.
3. 새 버전의 기능
xmlhttprequest 객체의 새 버전은 이전 버전의 단점을 크게 개선했습니다.
코드 사본은 다음과 같습니다.
* HTTP 요청의 시간 제한을 설정할 수 있습니다.
* FormData 객체를 사용하여 양식 데이터를 관리 할 수 있습니다.
* 파일을 업로드 할 수 있습니다.
* 다른 도메인 이름 (Cross-Domain 요청)에 따라 데이터를 요청할 수 있습니다.
* 서버 측에서 이진 데이터를 얻을 수 있습니다.
* 데이터 전송의 진행 정보를 얻을 수 있습니다.
다음 으로이 새로운 기능을 하나씩 소개하겠습니다.
4. HTTP 요청의 시간 제한
때로는 Ajax 운영이 시간이 많이 걸리며 시간이 얼마나 걸리는지 예측하는 것은 불가능합니다. 인터넷 속도가 매우 느리면 사용자는 오랫동안 기다려야 할 수도 있습니다.
xmlhttprequest 객체의 새 버전은 시간 초과 속성을 추가하여 HTTP 요청의 시간 제한을 설정할 수 있습니다.
xhr.timeout = 3000;
위의 명령문은 최대 대기 시간을 3000 밀리 초로 설정합니다. 이 시간 제한이 전달되면 HTTP 요청이 자동으로 중지됩니다. 콜백 함수를 지정하는 타임 아웃 이벤트도 있습니다.
코드 사본은 다음과 같습니다.
xhr.ontimeout = function (event) {
경고 ( '요청 시간 초과!');
}
현재 Opera, Firefox 및 IE 10 은이 속성을 지원합니다. IE 8과 IE 9 의이 속성은 XdomainRequest 객체에 속하며 Chrome과 Safari는이를 지원하지 않습니다.
5. FormData 객체
Ajax 작업은 종종 양식 데이터를 전달하는 데 사용됩니다. 양식 처리를 용이하게하기 위해 HTML 5는 모의 양식에 FormData 객체를 추가했습니다.
먼저 새 FormData 객체를 만듭니다.
var formdata = new FormData ();
그런 다음 양식 항목을 추가하십시오.
formdata.append ( 'username', 'Zhang San');
formdata.append ( 'id', 123456);
마지막 으로이 FormData 객체를 직접 전송하십시오. 이것은 웹 양식을 제출하는 것과 정확히 동일합니다.
xhr.send (formdata);
FormData 객체를 사용하여 웹 양식의 값을 얻을 수도 있습니다.
코드 사본은 다음과 같습니다.
var form = document.getElementById ( 'myform');
var formdata = 새로운 formdata (form);
formdata.append ( '비밀', '123456'); // 양식 항목을 추가합니다
xhr.open ( 'post', form.action);
xhr.send (formdata);
6. 파일 업로드
XMLHTTPREQUEST의 새 버전은 텍스트 정보뿐만 아니라 파일을 업로드 할 수 있습니다.
파일이 "파일 선택"의 양식 요소 (입력 [type = "file"])이라고 가정하면 FormData 객체에로드합니다.
코드 사본은 다음과 같습니다.
var formdata = new FormData ();
for (var i = 0; i <files.length; i ++) {
formdata.append ( 'files []', files [i]);
}
그런 다음이 FormData 객체를 보내십시오.
xhr.send (formdata);
7. 크로스 도메인 자원 공유 (CORS)
XMLHTTPREQUEST의 새 버전은 도메인 이름이 다른 서버에 HTTP 요청을 발행 할 수 있습니다. 이것을 "CORS (Cross-Origin Resource Sharing”(CORS)이라고합니다.
"크로스 도메인 리소스 공유"를 사용하기위한 전제 조건은 브라우저 가이 기능을 지원해야하며 서버는이 "크로스 도메인"에 동의해야한다는 것입니다. 위의 조건을 충족 할 수있는 경우 코드는 Cross-Domain 요청과 정확히 동일하게 작성됩니다.
xhr.open ( 'get', 'http : //other.server/and/path/to/script');
현재 IE 8 및 IE 9 외에도 주류 브라우저는 CORS를 지원하며 IE 10 도이 기능을 지원합니다. 서버 측 설정의 경우 "서버 측 액세스 제어"를 참조하십시오.
8. 이진 데이터 수신 (메소드 A : 미세 유형을 다시 작성)
XMLHTTPREQUEST의 이전 버전은 서버에서 텍스트 데이터 만 검색 할 수 있으며 (그렇지 않으면 이름은 XML로 시작하지 않음) 새 버전은 이진 데이터를 검색 할 수 있습니다.
다음은 두 가지 방법이 있습니다. 구형 접근법은 데이터의 모방 유형을 무시하고 서버가 텍스트 데이터로 반환 한 바이너리 데이터를 위장하고 브라우저에 사용자 정의 문자 세트임을 알려주는 것입니다.
XHR.OverRidemImeType ( "Text/Plain; charset = x-user-defined");
그런 다음 ResponseText 속성을 사용하여 서버에서 반환 한 이진 데이터를 수신하십시오.
var binst = xhr.responsetext;
브라우저는 현재 텍스트 데이터로 취급하므로 이진 데이터로 하나씩 복원해야합니다.
코드 사본은 다음과 같습니다.
for (var i = 0, len = binst.length; i <len; ++ i) {
var c = binst.charcodeat (i);
var byte = c & 0xff;
}
마지막 줄의 비트 작동 "C & 0xff"는 각 문자의 두 바이트 중에서 다음 바이트 만 유지되고 이전 바이트가 버려 져야한다는 것을 의미합니다. 그 이유는 브라우저가 문자를 해석 할 때 문자를 자동으로 유니 코드의 0xf700-0xf7ff 섹션으로 자동 해석하기 때문입니다.
8. 이진 데이터 수신 (메소드 B : ResponseType 속성)
서버에서 이진 데이터를 검색하는 최신 방법은 새로 추가 된 responseType 속성을 사용하는 것입니다. 서버가 텍스트 데이터를 반환하는 경우이 속성의 값은 "텍스트"이며, 이는 기본값입니다. 최신 브라우저는 다른 값, 즉 다른 형식의 데이터를 수신 할 수 있습니다.
응답 장치를 Blob으로 설정할 수 있습니다. 즉, 서버가 이진 객체를 다시 전송하고 있음을 의미합니다.
코드 사본은 다음과 같습니다.
var xhr = 새로운 xmlhttprequest ();
xhr.open ( 'get', '/path/to/image.png');
xhr.responseType = 'blob';
데이터를 수신 할 때는 브라우저와 함께 제공되는 Blob 객체를 사용하십시오.
var blob = new Blob ([xhr.response], {type : 'image/png'});
xhr.responsetext가 아닌 xhr.response를 읽는 것입니다.
ArrayBuffer로 ResponseType을 설정하고 배열에 이진 데이터를 설치할 수도 있습니다.
코드 사본은 다음과 같습니다.
var xhr = 새로운 xmlhttprequest ();
xhr.open ( 'get', '/path/to/image.png');
xhr.responsetype = "arraybuffer";
데이터를 수신 할 때는이 배열을 가로 질러야합니다.
코드 사본은 다음과 같습니다.
var arraybuffer = xhr.response;
if (arraybuffer) {
var bytearray = new uint8array (Arraybuffer);
for (var i = 0; i <bytearray.bytelength; i ++) {
// 무언가를합니다
}
}
자세한 내용은 이진 데이터 보내기 및 수신을 참조하십시오.
9. 진행 정보
XMLHTTPREQUEST의 새 버전에는 데이터를 전송할 때 진행 상황이 있으며 진행 상황 정보를 반환하는 데 사용됩니다.
업로드 및 다운로드의 두 가지 상황으로 나뉩니다. 다운로드 된 진행 상황은 XMLHTTPREQUEST 객체에 속하며 업로드 된 진행 상황은 XMLHTTPREQUEST.UPLOAD 객체에 속합니다.
먼저 진행 상황의 콜백 함수를 정의합시다.
코드 사본은 다음과 같습니다.
xhr.onprogress = updateprogress;
xhr.upload.onprogress = UpdateProgress;
그런 다음 콜백 함수 에서이 이벤트의 일부 속성을 사용하십시오.
코드 사본은 다음과 같습니다.
함수 updateprogress (이벤트) {
if (event.lengthcomputable) {
var % complete = event.loaded / event.total;
}
}
위의 코드에서 event.total은 전송 해야하는 총 바이트이며 이벤트는 전송 된 바이트입니다. event.lengthcomputable이 사실이 아닌 경우, event.total은 0입니다.
진행 이벤트와 관련된 5 가지 이벤트가 있으며, 이는 콜백 함수를 별도로 지정할 수 있습니다.
*로드 이벤트 : 전송이 성공적으로 완료되었습니다.
* 중단 이벤트 : 사용자가 전송을 취소했습니다.
* 오류 이벤트 : 전송 중에 오류가 발생했습니다.
*로드 스타트 이벤트 : 전송이 시작됩니다.
*로드 엔드 이벤트 : 전송이 종료되지만 성공 여부는 모르겠습니다.
10. 독서 자료
1. XMLHTTPREQUEST 레벨 2 : 새로운 기능에 대한 포괄적 인 소개.
2. XMLHTTPREQUEST 2의 새로운 트릭 : 일부 사용법 소개.
3. xmlhttprequest 사용 : 일부 고급 사용법, 주로 Firefox 브라우저를 대상으로합니다.
4. HTTP 액세스 제어 : CORS 개요.
5. 크로스 오리핀 리소스 공유를 사용한 DOM 액세스 제어 : 9 유형의 HTTP 헤더 정보 CORS 정보
6. 서버 측 액세스 제어 : 서버 측 CORS 설정.
7. CORS : Server Cors 설정을 활성화합니다.