Ajax 진행 이벤트에 대한 심층 분석(예제 포함)

이 기사는 Ajax 진행 이벤트에 대한 심층 분석을 제공합니다(예시 포함). 필요한 친구가 참고할 수 있기를 바랍니다.

일반적으로 Readystatechange 이벤트를 사용하여 HTTP 요청 완료를 감지합니다. XHR2 사양 초안은 Progress Events 사양을 정의합니다. XMLHttpRequest 객체는 요청의 여러 단계에서 다양한 유형의 이벤트를 트리거하므로 더 이상 ReadyState 속성을 확인할 필요가 없습니다. 이 초안은 클라이언트-서버 통신과 관련된 이벤트를 정의합니다. 이러한 이벤트는 실제로 처음에는 XHR 작업만을 대상으로 했지만 이제는 다른 API(예: File API)에서도 사용됩니다. 이 글에서는 진행 이벤트에 대해 자세히 소개하겠습니다

기본

다음과 같은 6가지 진행 이벤트가 있습니다

loadstart: 응답 데이터의 첫 번째 바이트가 수신될 때 트리거됩니다.

progress: 응답을 수신하는 동안 지속적으로 트리거됩니다

error : 요청에 오류가 발생했을 때 트리거

abort: abort() 메소드 호출로 인해 연결이 종료되었을 때 트리거

load: 완전한 응답 데이터를 수신했을 때 트리거

loadend: 통신이 완료되거나 오류가 발생했을 때 트리거 , abort 또는 로드 이벤트가 트리거됨

timeout 이후 트리거됨: 타임아웃이 발생할 때 트리거됨

[참고] IE9-browser는 위 이벤트를 지원하지 않습니다. (IE9 브라우저는 로드 이벤트만 지원합니다.)

각 요청은 loadstart 이벤트를 트리거하여 시작됩니다. 그런 다음 일반적으로 매 50밀리초마다 진행 이벤트가 트리거되고 로드, 오류, 중단 또는 시간 초과 이벤트 중 하나가 트리거되고 마지막으로 로드 엔드 이벤트가 트리거되면서 끝납니다. 로드, 중단, 시간 초과 및 오류 이벤트를 트리거합니다. XHR2 사양 초안에는 이러한 이벤트 중 하나가 발생하면 브라우저가 loadend 이벤트

load

를 트리거해야 한다고 명시되어 있습니다. 로드 이벤트는 응답이 수신된 후에 트리거되므로 ReadyState 속성을 확인할 필요가 없습니다. 그러나 완료된 요청이 반드시 성공적인 요청은 아닙니다. 예를 들어 로드 이벤트 핸들러는 XMLHttpRequest 객체의 상태 코드를 확인하여 "404 Not Found" HTTP 응답이 아닌 "200 OK"를 수신했는지 확인해야 합니다.

<button>获取信息</button>
<p></p>
<script>
btn.onclick = function(){
//创建xhr对象
var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
}
//进度事件
xhr.onload = function(){
    if(xhr.status == 200){
        result.innerHTML += xhr.responseText;
    }
}
//发送请求
xhr.open(&#39;get&#39;,&#39;message.xml&#39;,true);
xhr.send();
}
</script>

Progress

progress 이벤트는 브라우저가 새 데이터를 수신하는 동안 주기적으로 트리거됩니다. onprogress 이벤트 핸들러는 대상 속성이 XHR 객체이지만 lengthComputable,loaded 및 total이라는 세 가지 추가 속성을 포함하는 이벤트 객체를 수신합니다. 이 중 lengthComputable은 진행 정보가 있는지 여부를 나타내는 Boolean 값이고,loaded는 수신된 바이트 수를 나타내며, total은 Content-Length 응답 헤더를 기반으로 결정된 예상 바이트 수를 나타냅니다. 이 정보를 사용하여 사용자를 위한 진행률 표시기를 생성할 수 있습니다.

<button>获取信息</button>
<p></p>
<p></p>
<script>
btn.onclick = function(){
//创建xhr对象
var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
}
//进度事件
xhr.onprogress = function(e){
    e = e || event;
    if (e.lengthComputable){
        result.innerHTML = "Received " + e.loaded + " of " + e.total + " bytes";
    }
};
xhr.onload = function(e){
    var data = xhr.response;
    e = e || event;
    if(xhr.status == 200){
        var audio = document.createElement(&#39;audio&#39;);
        audio.onload = function(){
            URL.revokeObjectURL(audio.src);
        }
        audio.src = URL.createObjectURL(data);
         console.log(audio);
        audio.setAttribute(&#39;controls&#39;,&#39;&#39;);
        if(!music.innerHTML){
            music.appendChild(audio);
        }
    }
};
//发送请求
xhr.open(&#39;get&#39;,&#39;myocean.mp3&#39;,true);
xhr.responseType = &#39;blob&#39;;
xhr.send();
}
</script>

업로드 진행률

HTTP 응답 로드를 모니터링하기 위해 정의된 이러한 유용한 이벤트 외에도 XHR2는 HTTP 요청 업로드를 모니터링하기 위한 이벤트도 제공합니다. 이러한 기능을 구현하는 브라우저에서는 XMLHttpRequest 객체에 업로드 속성이 있습니다. 업로드 속성 값은 addEventListener() 메소드와 onprogress 및 onload와 같은 전체 진행 이벤트 컬렉션을 정의하는 객체입니다(그러나 업로드 객체는 onreadystatechange 속성을 정의하지 않으며 업로드는 새로운 이벤트 유형만 트리거할 수 있습니다)

　할 수 있습니다 그냥 공통을 사용하세요. 진행 이벤트 핸들러는 업로드 이벤트 핸들러도 사용합니다. XMLHttpRequest 객체의 경우 XHR.onprogress를 설정하여 응답의 다운로드 진행률을 모니터링하고 XHR.upload.onprogress를 설정하여 요청의 업로드 진행률을 모니터링하세요

<input>
<button>上传文件</button>
<p></p>
<p></p>
<script>
btn.onclick = function(){
file1.click();
pro.innerHTML = result.innerHTML = &#39;&#39;;
}</script>

file1.onchange = function(){
//创建xhr对象
var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
var data = file1.files[0];
//上传事件
xhr.upload.onprogress = function(e){
    e = e || event;
    if (e.lengthComputable){
        pro.innerHTML = "上传进度为：" + e.loaded + " of " + e.total + " bytes" + '；百分比为：' + e.loaded/e.total;
    }
}
xhr.onload = function(e){
    var data = xhr.responseText;
    e = e || event;
    if(xhr.status == 200){
        result.innerHTML =  data;
    }
};
//发送请求
xhr.open('post','pp.php',true);
xhr.setRequestHeader("content-type",data.type);
xhr.send(data);
}

<?php error_reporting(E_ALL & ~E_NOTICE);
touch($file);
if(preg_match(&#39;/image/&#39;,apache_request_headers()[&#39;content-type&#39;])){
$file = &#39;photo/test.jpg&#39;; 
binary_to_file($file);
echo &#39;文件上传成功!&#39;;
}else{
echo &#39;文件格式不正确，请选择图片文件&#39;;
}
function binary_to_file($file){
$content = $GLOBALS[&#39;HTTP_RAW_POST_DATA&#39;];  // 需要php.ini设置
if(empty($content)){
    $content = file_get_contents(&#39;php://input&#39;); //不需要php.ini设置，内存压力小
}
$ret = file_put_contents($file, $content, true);
return $ret;
};
?>

기타 이벤트

HTTP 요청이 불가능한 3가지 상황이 있습니다. 3개의 이벤트에 해당하여 완료됩니다. 요청 시간이 초과되면 시간 초과 이벤트가 트리거됩니다. 요청이 중단되면 중단 이벤트가 트리거됩니다. 마지막으로 너무 많은 리디렉션과 같은 네트워크 오류로 인해 요청이 완료되지 않을 수 있지만, 이러한 상황이 발생하면 진행 중인 HTTP 요청이 XMLHttpRequest 객체의 abort() 메서드를 호출하여 취소될 수 있습니다. abort() 메서드를 호출하면 이 객체에서 중단 이벤트가 트리거됩니다. abort()를 호출하는 주된 이유는 취소되거나 시간 초과된 요청이 완료되는 데 너무 오래 걸리거나 응답이 관련성이 없게 되는 경우입니다. XMLHttpRequest를 사용하여 텍스트 입력 필드에 대한 자동 완성 권장 사항을 요청한다고 가정해 보겠습니다. 서버의 제안에 도달하기 전에 사용자가 새 문자를 입력하면 요청을 기다리는 것이 더 이상 유용하지 않으며 XHR 개체의 시간 초과 속성은 요청이 여전히 몇 밀리초인지 나타내는 정수와 같습니다. 결과를 얻지 못하면 자동으로 종료됩니다. 이 속성은 기본적으로 0과 같습니다. 이는 시간 제한이 없음을 의미합니다. 요청 시간이 초과되면 ontimeout 이벤트가 트리거됩니다.

위 내용은 Ajax 진행 이벤트에 대한 심층 분석(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!