web-dev-qa-db-ja.com

XHRエラーの検出は、ブラウザーの停止またはクリックして新しいページが原因である

ページがXHRを介してコンテンツをロードしているときに、ユーザーが停止ボタンをクリックするか、クリックして別のページに移動すると、XHR error（）関数が呼び出されます。これは、ページに多くの（赤い）エラーメッセージが表示されるというユーザーショックを除いて、通常は大した問題ではありません。

メッセージは有効です-実際にコンテンツの取得中にエラーが発生しました-これはユーザーの操作が原因であり、システム障害が原因ではありません。

（404 | 500 |タイムアウトエラー）と、ユーザーがブラウザーの停止ボタンを押したことによって発生したエラーを区別する方法はありますか？

編集：私はDojo（したがってエラー関数参照）を使用していますが、これはどのXHR実装でも一般的な状況であると思います。 error（）が呼び出されたときにxhrオブジェクトのreadyStateを調べます

javascriptbrowserxmlhttprequest
23
olore

HTTPエラー（404、401、403、500など。）およびリクエストの中止エラー（つまり、ユーザーがEscキーを押すか、他のページに移動した）の場合、XHR.statusプロパティを確認できます。リクエストが中止された場合、ステータスメンバーはゼロになります。

document.getElementById('element').onclick = function () { 
  postRequest ('test/', null, function (response) { // success callback
    alert('Response: ' + response); 
  }, function (xhr, status) { // error callback
    switch(status) { 
      case 404: 
        alert('File not found'); 
        break; 
      case 500: 
        alert('Server error'); 
        break; 
      case 0: 
        alert('Request aborted'); 
        break; 
      default: 
        alert('Unknown error ' + status); 
    } 
  }); 
};

簡単なpostRequest関数：

function postRequest (url, params, success, error) {  
  var xhr = XMLHttpRequest ? new XMLHttpRequest() : 
                             new ActiveXObject("Microsoft.XMLHTTP"); 
  xhr.open("POST", url, true); 
  xhr.onreadystatechange = function(){ 
    if ( xhr.readyState == 4 ) { 
      if ( xhr.status == 200 ) { 
    success(xhr.responseText); 
      } else { 
    error(xhr, xhr.status); 
      } 
    } 
  }; 
  xhr.onerror = function () { 
    error(xhr, xhr.status); 
  }; 
  xhr.send(params); 
}

上記のスニペット here を実行します。

40
CMS