xmlhttprequest는 HTTP 요청을 매우 쉽게 보내줍니다. 요청 객체의 인스턴스를 작성하고 URL을 열고 요청을 보내면됩니다. 전송이 완료된 후 결과 HTTP 상태 및 반환 된 응답 내용도 요청 오브젝트에서 얻을 수 있습니다.
xmlhttprequest에 의해 생성 된 요청은 비동기 모드 또는 동기 모드의 두 가지 방식으로 얻을 수 있습니다. 요청 유형은이 xmlhttprequest 객체의 Open () 메소드의 세 번째 매개 변수 인 Async의 값에 의해 결정됩니다. 이 매개 변수의 값이 False 인 경우 XMLHTTPREQUEST 요청은 동기 모드에서 수행됩니다. 그렇지 않으면 프로세스가 비동기 모드로 완료됩니다.
두 가지 통신 모드 : 동기 및 비동기 요청 :
요청을 동기화합니다
메인 스레드의 동기화 요청은 페이지를 차단하고 사용자 경험이 좋지 않아 일부 최신 브라우저의 기본 스레드의 동기화 요청이 더 이상 사용되지 않았습니다. 드문 경우, 동기 모드를 사용하는 xmlhttprequests는 비동기 모드를 사용하는 것보다 더 적합합니다.
1. 작업자에서 xmlhttprequest를 사용할 때 동기 요청이 비동기 요청보다 더 적합합니다.
홈페이지의 코드 :
<script type = "text/javaScript"> var omyworker = new Worker ( "mytask.js"); omyworker.onmessage = function (oevent) {alert ( "Worker said :" + oevent.data); }; omyworker.postmessage ( "hello"); </script> myfile.txt (요청 된 xmlhttprequest 객체와 동기화하는 파일) : Hello World !!작업자 코드 포함 : Mytask.js
self.onmessage = function (oevent) {if (oevent.data === "hello") {var oreq = new xmlhttprequest (); oreq.open ( "get", "myfile.txt", false); // 동기 요청 oreq.send (null); self.postmessage (oreq.responsetext); }};참고 : 작업자가 사용되기 때문에 요청은 실제로 비동기식입니다.
유사한 방법을 사용하여 스크립트가 백그라운드에서 서버와 상호 작용하고 특정 컨텐츠를 예압 할 수 있습니다. 자세한 내용은 웹 작업자 사용을 확인하십시오.
2. 동기 요청을 사용해야하는 상황
드문 경우, 동기 모드 xmlhttprequest 요청 만 사용할 수 있습니다. 예를 들어, 창에서. 페이지의 언로드 이벤트 핸들러 기능에서 비동기 XMLHTTPREQUEST를 사용하면 문제가 발생합니다. 응답이 반환되면 페이지가 더 이상 존재하지 않으며 모든 변수 및 콜백 함수가 파괴되었습니다. 결과는 "함수가 정의되지 않은"오류 만 유발할 수 있습니다. 솔루션은 요청이 완료 될 때까지 페이지가 닫히지 않도록 여기에서 동기화 모드에서 요청을 사용하는 것입니다.
window.onbeforeunload = function () {var oreq = new xmlhttprequest (); oreq.open ( "get", "logout.php? nick =" + Escape (myname), false); // 동기 요청 oreq.send (null); if (oreq.responsetext.trim ()! == "exited"); {// "Exited"는 반환 된 데이터 반환 "출구가 실패 했습니까? 종료를 수동으로 실행 하시겠습니까?"; }};비동기 요청
비동기 모드를 사용하면 데이터가 완전히 요청되면 지정된 콜백 기능이 실행됩니다. 요청을 실행하는 동안 브라우저는 일반적으로 다른 트랜잭션을 실행할 수 있습니다.
3. 예 : 외부 파일을 읽는 표준 메소드 생성
일부 요구 사항에서 여러 외부 파일을 읽어야합니다. 이것은 표준 기능입니다. 이 기능은 비동기 요청에 XMLHTTPREQUEST 객체를 사용합니다. 또한 각 파일 읽기가 완료된 후 다른 콜백 함수를 지정할 수 있습니다.
함수 loadFile (SURL, TimeOut, FCALLBACK / *, PARMETER 1의 PASS, PARMETER 1의 PASS, PARSOR PARAMETER 2 등. oreq.ontimeout = function () {console.log ( "요청 시간 초과"); } oreq.onreadyStateChange = function () {if (oreq.readystate === 4) {if (oreq.status == 200) {fcallback.apply (oreq, apassargs); } else {console.log ( "error", oreq.statustext); }}}; oreq.open ( "get", surl, true); oreq.timeout = 시간 초과; oreq.send (null);}로드 파일 기능 사용 :
함수 showmessage (smsg) {alert (smsg + this.responsetext);} loadfile ( "message.txt", 200, showmessage, "new Message! // n");1 행 1은 함수를 정의합니다. 파일을 읽은 후 FCallback 함수는 세 번째 매개 변수 다음에 자체 매개 변수로 모든 매개 변수로 호출됩니다.
3 행은 타임 아웃 설정을 사용하여 코드가 읽기 요청의 반환 데이터의 장기 실행을 실행하는 것을 피합니다. XMLHTTPREQUEST 오브젝트의 타임 아웃 속성에 값을 할당하여 타임 아웃 속성에
여섯 번째 동작 OnreadyStateChange 이벤트 핸들은 콜백 함수를 지정합니다. 함수가 실행될 때마다 요청이 종료되는지 확인합니다 (요청 상태는 4). 그렇다면 요청이 성공했는지 여부를 결정합니다 (HTTP 상태는 200). 그렇다면 페이지 소스 코드를 출력합니다. 오류가 발생하면 오류 메시지가 출력됩니다.
15 행은 세 번째 매개 변수가 true임을 지정하여 요청이 비동기 모드로 실행되어야 함을 나타냅니다.
4. 예 : 비동기 요청을 사용하면 폐쇄가 사용되지 않습니다.
함수 switchxhrstate () {switch (this.readystate) {case 0 : console.log ( "Open () 메소드는 아직 호출되지 않았습니다."); break; case 1 : console.log ( "send () 메소드는 아직 호출되지 않았습니다."); break; case 2 : console.log ( "send () 메소드가 호출되고 응답 헤더 및 응답 상태가 반환되었습니다."); break; case 3 : console.log ( "다운로드, 응답 엔티티의 일부가 얻어졌습니다."); break; case 4 : console.log ( "요청 완료!"); this.callback.apply (this, this.arguments); }}; 함수 loadFile (surl, fcallback / *, 매개 변수 1에서 Pass, Passer 2 등을 전달합니다. * /) {var oreq = new xmlhttprequest (); oreq.callback = fcallback; oreq.arguments = array.prototype.slice.call (Arguments, 2); oreq.onreadystatechange = switchxhrstate; oreq.open ( "get", surl, true); oreq.send (null);}바인드 사용 :
함수 switchxhrstate (fcallback, aarguments) {switch (this.readystate) {case 0 : console.log ( "Open () 메소드가 호출되지 않았습니다."); break; case 1 : console.log ( "send () 메소드가 호출되지 않았습니다."); break; case 2 : console.log ( "send () 메소드가 호출되고 응답 헤더 및 응답 상태가 반환되었습니다."); break; case 3 : console.log ( "다운로드 중에 부분 응답 엔티티가 얻어졌습니다."); break; case 4 : console.log ( "요청 완료!"); fcallback.apply (this, aarguments); }}; 함수 loadFile (surl, fcallback / *, 매개 변수 1에서 Pass, Passer 2 등을 전달합니다. * /) {var oreq = new xmlhttprequest (); Oreq.onreadyStateChange = SwitchXhrstate.bind (Oreq, fcallback, array.prototype.slice.call (Arguments, 2)); oreq.open ( "get", surl, true); oreq.send (null);}위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.