HTTP 진행 이벤트

1666 단어 JavaScript
진행 이벤트
XML HttpRequest 대상 은 요청 한 단계 에 따라 다양한 종류의 이 벤트 를 출발 합 니 다.
진도 사건 은 이렇게 보편적 이지 만 사실은 다른 규범 에서 제 기 된 것 이다. 이 사건 들 은 전문 적 으로 데이터 의 전송 과정 을 보 여주 기 위해 설 계 된 것 이다.예 를 들 어 FileReader 를 사용 합 니 다. 서버 나 하 드 디스크 에서 데 이 터 를 읽 는 과정.
여섯 개의 진도 사건 은 다음 과 같다.
loadstart – 진도 시작 을 밝히다.이것 은 첫 번 째 촉발 사건 이다.
progress – 데이터 로드 과정 에서 불만 족 스 럽 습 니 다.
error – 데이터 로드 실패 트리거.
abort –호출 abort()데이터 불 러 올 때 실행 취소 (XML HttpRequest 와 FileReader 가 공통).
load – 모든 데 이 터 를 성공 적 으로 불 러 왔 습 니 다.
loadend – 로 딩 이 끝 났 을 때 error 든, abort, 혹은 load 가 모두 촉발 되 었 습 니 다.
진도 추적
progress 로 사건 은 진 도 를 추적 할 수 있다.이 이 벤트 는 세 개의 데이터 전송 과정의 속성 값 을 가지 고 있 습 니 다:
lengthComputable – 불 값 은 현재 브 라 우 저가 완전한 데 이 터 를 전송 할 수 있 는 지 를 나타 낸다.
loaded – 읽 은 바이트 수 입 니 다.
total – 읽 을 바이트 의 갯 수 입 니 다.
이 값 들 은 진도 표시 줄 에 표 시 된 진도 정보 에 사용 할 수 있 습 니 다.예 를 들 어 HTML 5 의를 사용 해 야 합 니 다. 요 소 는 파일 을 읽 는 진행 값 을 즉시 표시 합 니 다.진도 치 에 맞 춰 이렇게 사용 할 수 있 습 니 다:
var xhr= new XMLHttpRequest (),
 
xhr.onprogress = function(event) {
   var divStatus = document.getElementById("status");
    if (event.lengthComputable) {
      divStatus.innerHTML = "Recived" + event.position + " of " + event.totalSize + " bytes";
    }
};
 
xhr.onloadend = function(event) {
    var contents = event.target.result,
        error    = event.target.error;
 
    if (error != null) {
        console.error("File could not be read! Code " + error.code);
    } else {
     //...
    }
};

이것 은 Gmail 의 드래그 파일 업로드 기능 과 같 습 니 다.즉,파일 하 나 를 메 일 에 끌 어 다 놓 은 후의 효 과 는 파일 이 얼마나 많은 서버 를 전 송 했 는 지 보 여 줍 니 다.

좋은 웹페이지 즐겨찾기