Ajax 進行状況イベントの詳細な分析 (例付き)

この記事の内容は、ajax の進行状況イベントの詳細な分析 (例付き) です。一定の参考価値があります。必要な友人は参照できます。お役に立てれば幸いです。

通常、HTTP リクエストの完了を検出するには、readystatechange イベントを使用します。 XHR2 仕様ドラフトでは Progress Events 仕様が定義されており、XMLHttpRequest オブジェクトはリクエストのさまざまな段階でさまざまなタイプのイベントをトリガーするため、readyState 属性をチェックする必要がなくなりました。このドラフトでは、クライアントとサーバーの通信に関連するイベントを定義します。これらのイベントは、実際には最初は XHR 操作のみを対象としていましたが、現在は他の API (ファイル API など) でも使用されています。この記事では、進行状況イベントについて詳しく紹介します。

基本事項

次の 6 つの進行状況イベントがあります。

loadstart: 応答データの最初のバイトを受信したときにトリガーされます

progress: 応答の受信中に継続的にトリガーされます

error: リクエストでエラーが発生したときにトリガーされます

abort: abort() メソッドの呼び出しにより接続が終了したときにトリガーされます

load: 完全な応答データを受信したときにトリガーされます

loadend: 通信が完了するか、エラー、中止、またはロード イベントがトリガーされた後にトリガーされます

timeout: タイムアウトが発生したときにトリガーされます

[注意] IE9 ブラウザは上記のイベントをサポートしていません (IE9 ブラウザはロード イベントのみをサポートしています)

各リクエストは、loadstart イベントをトリガーすることによって開始され、次に、通常、進行状況が 50 ミリ秒程度ごとにトリガーされます。イベントに続いて、load、error、abort、timeout イベントのいずれかをトリガーし、最後にloadend イベントをトリガーして終了します。

特定のリクエストに対して、ブラウザーは、load、error、abort、timeout のいずれかのイベントのみをトリガーします。イベント。 XHR2 仕様草案では、これらのイベントのいずれかが発生すると、ブラウザーはloadend イベントをトリガーする必要があると述べています。

load
load イベントは応答の受信後にトリガーされるため、 ReadyState 属性。ただし、完了したリクエストは必ずしも成功リクエストであるとは限りません。たとえば、ロード イベントのハンドラーは XMLHttpRequest オブジェクトのステータス コードをチェックして、「404 Not Found」HTTP 応答ではなく「200 OK」を受信したかどうかを判断する必要があります

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

progress

progress イベントは、ブラウザーが新しいデータを受信して​​いる間、定期的にトリガーされます。 onprogress イベント ハンドラーは、ターゲット属性が XHR オブジェクトであるイベント オブジェクトを受け取りますが、そこには 3 つの追加属性 (lengthComputable、loaded、total) が含まれています。このうち、lengthComputable は進捗情報が利用可能かどうかを示すブール値、loaded は受信したバイト数を示し、total は Content-Length 応答ヘッダーに基づいて決定される予想バイト数を示します。この情報を使用して、ユーザーの進行状況インジケーターを作成できます。

<button id="btn">获取信息</button>
<p id="result"></p>
<p id="music"></p>
<script>
btn.onclick = function(){
//创建xhr对象
var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//进度事件
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);
        }
    }
};
//发送请求
xhr.open('get','myocean.mp3',true);
xhr.responseType = 'blob';
xhr.send();
}
</script>

Upload Progress
HTTP 応答の読み込みを監視するために定義された便利なイベントに加えて、XHR2 は HTTP 要求によってアップロードされたイベントも提供します。 。これらの機能を実装するブラウザでは、XMLHttpRequest オブジェクトにアップロード属性があります。アップロード属性値は、addEventListener() メソッドと、onprogress や onload などの進行状況イベント コレクション全体を定義するオブジェクトです (ただし、アップロード オブジェクトは onreadystatechange 属性を定義しません。アップロードでトリガーできるのは新しいイベント タイプのみです)

通常の進行状況イベント ハンドラーと同様に、アップロード イベント ハンドラーのみを使用できます。 XMLHttpRequest オブジェクトの場合、応答のダウンロードの進行状況を監視するように XHR.onprogress を設定し、リクエストのアップロードの進行状況を監視するように XHR.upload.onprogress を設定します。 #HTTP リクエストを完了できませんでした 3 種類のイベントに対応する 3 つの状況があります。リクエストがタイムアウトすると、タイムアウト イベントがトリガーされます。リクエストが中止されると、中止イベントがトリガーされます。最後に、リダイレクトが多すぎるなどのネットワーク エラーによりリクエストが完了しないことがありますが、これらの状況が発生するとエラー イベントがトリガーされます。XMLHttpRequest オブジェクトの abort() メソッドを呼び出すことで、進行中の HTTP リクエストをキャンセルできます。 abort() メソッドを呼び出すと、このオブジェクトで abort イベントがトリガーされます。

abort() を呼び出す主な理由は、キャンセルまたはタイムアウトしたリクエストの完了に時間がかかりすぎる場合、または応答が無関係になった場合です。 XMLHttpRequest を使用して、テキスト入力フィールドのオートコンプリートの推奨事項を要求するとします。サーバーの提案に達する前にユーザーが新しい文字を入力した場合、リクエストを待つのは無駄なので、中止する必要があります。

XHR オブジェクトの timeout 属性は、何ミリ秒後かを示す整数と等しくなります。 、それでも結果が得られない場合、リクエストは自動的に終了します。この属性のデフォルトは 0 で、時間制限がないことを意味します。

リクエストがタイムアウトすると、ontimeout イベントがトリガーされます

<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 = '';
}

この記事はここにすべてあります。その他の興味深い内容については、コンテンツについては、PHP 中国語 Web サイトの

JavaScript ビデオ チュートリアル

列を参照してください。

以上がAjax 進行状況イベントの詳細な分析 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。