如何使用ajax的進(jìn)度事件

今天就跟大家聊聊有關(guān)如何使用ajax的進(jìn)度事件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

一般地，使用readystatechange事件探測HTTP請求的完成。XHR2規(guī)范草案定義了進(jìn)度事件Progress Events規(guī)范，XMLHttpRequest對象在請求的不同階段觸發(fā)不同類型的事件，所以它不再需要檢査readyState屬性。這個草案定義了與客戶端服務(wù)器通信有關(guān)的事件。這些事件最早其實只針對XHR操作，但目前也被其他API(如File API)借鑒。本文將詳細(xì)介紹進(jìn)度事件

基礎(chǔ)

有以下6個進(jìn)度事件

loadstart:在接收到響應(yīng)數(shù)據(jù)的第一個字節(jié)時觸發(fā)

progress:在接收響應(yīng)期間持續(xù)不斷地觸

error:在請求發(fā)生錯誤時觸發(fā)

abort:在因為調(diào)用abort()方法而終止連接時觸發(fā)

load:在接收到完整的響應(yīng)數(shù)據(jù)時觸發(fā)

loadend:在通信完成或者觸發(fā)error、abort或load事件后觸發(fā)

timeout:超時發(fā)生時觸發(fā)

[注意]IE9-瀏覽器不支持以上事件(IE9瀏覽器僅支持load事件)

每個請求都從觸發(fā)loadstart事件開始，接下來，通常每隔50毫秒左右觸發(fā)一次progress事件，然后觸發(fā)load、error、abort或timeout事件中的一個，最后以觸發(fā)loadend事件結(jié)束

對于任何具體請求，瀏覽器將只會觸發(fā)load、abort、timeout和error事件中的一個。XHR2規(guī)范草案指出一旦這些事件中的一個發(fā)生后，瀏覽器應(yīng)該觸發(fā)loadend事件

load
響應(yīng)接收完畢后將觸發(fā)load事件，因此也就沒有必要去檢查readyState屬性了。但一個完成的請求不一定是成功的請求，例如，load事件的處理程序應(yīng)該檢查XMLHttpRequest對象的status狀態(tài)碼來確定收到的是“200 OK”而不是“404 Not Found”的HTTP響應(yīng)

<button id="btn">獲取信息</button>
<p id="result"></p>
<script>
btn.onclick = function(){
//創(chuàng)建xhr對象
var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//進(jìn)度事件
xhr.onload = function(){
    if(xhr.status == 200){
        result.innerHTML += xhr.responseText;
    }
}
//發(fā)送請求
xhr.open('get','message.xml',true);
xhr.send();
}
</script>

progress

progress事件會在瀏覽器接收新數(shù)據(jù)期間周期性地觸發(fā)。而onprogress事件處理程序會接收到一個event對象，其target屬性是XHR對象，但包含著三個額外的屬性：lengthComputable、loaded和total。其中，lengthComputable是一個表示進(jìn)度信息是否可用的布爾值，loaded表示已經(jīng)接收的字節(jié)數(shù)，total表示根據(jù)Content-Length響應(yīng)頭部確定的預(yù)期字節(jié)數(shù)。有了這些信息，就可以為用戶創(chuàng)建一個進(jìn)度指示器了

<button id="btn">獲取信息</button>
<p id="result"></p>
<p id="music"></p>
<script>
btn.onclick = function(){
//創(chuàng)建xhr對象
var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//進(jìn)度事件
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('audio');
        audio.onload = function(){
            URL.revokeObjectURL(audio.src);
        }
        audio.src = URL.createObjectURL(data);
         console.log(audio);
        audio.setAttribute('controls','');
        if(!music.innerHTML){
            music.appendChild(audio);
        }
    }
};
//發(fā)送請求
xhr.open('get','myocean.mp3',true);
xhr.responseType = 'blob';
xhr.send();
}
</script>

上傳進(jìn)度
　　除了為監(jiān)控HTTP響應(yīng)的加載定義的這些有用的事件外，XHR2也給出了用于監(jiān)控HTTP請求上傳的事件。在實現(xiàn)這些特性的瀏覽器中，XMLHttpRequest對象將有upload屬性。upload屬性值是一個對象，它定義了addEventListener()方法和整個progress事件集合，比如onprogress和onload(但upload對象沒有定義onreadystatechange屬性，upload僅能觸發(fā)新的事件類型)

　　能僅僅像使用常見的progress事件處理程序一樣使用upload事件處理程序。對于XMLHttpRequest對象，設(shè)置XHR.onprogress以監(jiān)控響應(yīng)的下載進(jìn)度，并且設(shè)置XHR.upload.onprogress以監(jiān)控請求的上傳進(jìn)度

<input type="file" name="file1" id="file1" style="display:none">
<button id="btn">上傳文件</button>
<p id="pro"></p>
<p id="result"></p>
<script>
btn.onclick = function(){
file1.click();
pro.innerHTML = result.innerHTML = '';
}

file1.onchange = function(){
//創(chuàng)建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 = "上傳進(jìn)度為：" + 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;
    }
};
//發(fā)送請求
xhr.open('post','pp.php',true);
xhr.setRequestHeader("content-type",data.type);
xhr.send(data);
}
</script>

<?php
error_reporting(E_ALL & ~E_NOTICE);
touch($file);
if(preg_match('/image/',apache_request_headers()['content-type'])){
$file = 'photo/test.jpg'; 
binary_to_file($file);
echo '文件上傳成功!';
}else{
echo '文件格式不正確，請選擇圖片文件';
}
function binary_to_file($file){
$content = $GLOBALS['HTTP_RAW_POST_DATA'];  // 需要php.ini設(shè)置
if(empty($content)){
    $content = file_get_contents('php://input'); //不需要php.ini設(shè)置，內(nèi)存壓力小
}
$ret = file_put_contents($file, $content, true);
return $ret;
};
?>

其他事件

HTTP請求無法完成有3種情況，對應(yīng)3種事件。如果請求超時，會觸發(fā)timeout事件。如果請求中止，會觸發(fā)abort事件。最后，像太多重定向這樣的網(wǎng)絡(luò)錯誤會阻止請求完成，但這些情況發(fā)生時會觸發(fā)error事件

可以通過調(diào)用XMLHttpRequest對象的abort()方法來取消正在進(jìn)行的HTTP請求。調(diào)用abort()方法在這個對象上觸發(fā)abort事件

調(diào)用abort()的主要原因是完成取消或超時請求消耗的時間太長或當(dāng)響應(yīng)變得無關(guān)時。假如使用XMLHttpRequest為文本輸入域請求自動完成推薦。如果用戶在服務(wù)器的建議達(dá)到之前輸入了新字符，這時等待請求不再有用，應(yīng)該中止

XHR對象的timeout屬性等于一個整數(shù)，表示多少毫秒后，如果請求仍然沒有得到結(jié)果，就會自動終止。該屬性默認(rèn)等于0，表示沒有時間限制

如果請求超時，將觸發(fā)ontimeout事件

var xhr = new XMLHttpRequest();
btn.onclick = function(){
xhr.abort();
};
xhr.ontimeout = function(){
console.log('The request timed out.');
}
xhr.timeout = 100;
xhr.onabort = function(){
console.log("The transfer has been canceled by the user.");
}
xhr.onerror = function(){
console.log("An error occurred while transferring the file.");    
}
xhr.onloadend = function(){
console.log("請求結(jié)束");    
}

看完上述內(nèi)容，你們對如何使用ajax的進(jìn)度事件有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。