JQuery Ajax - Ajax 호출 시 네트워크 연결 오류를 감지하는 방법

JQuery Ajax - Ajax 호출 시 네트워크 연결 오류를 감지하는 방법

5분마다 서버에 대한 Ajax 호출을 하는 Javascript JQuery 코드가 있습니다.서버 세션을 활성화하고 사용자를 로그인시키기 위해서입니다.사용하고 있다$.ajax()메서드(JQuery 。이 함수는 KeepAlive 스크립트가 계속 실행되도록 사용자의 인터넷 연결이 끊겼을 때 사용하려는 '오류' 속성을 가지고 있는 것 같습니다.다음 코드를 사용하고 있습니다.

var keepAliveTimeout = 1000 * 10;

function keepSessionAlive()
{
    $.ajax(
    {
        type: 'GET',
        url: 'http://www.mywebapp.com/keepAlive',
        success: function(data)
        {
            alert('Success');

            setTimeout(function()
            {
                keepSessionAlive();
            }, keepAliveTimeout);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown)
        {
            alert('Failure');

            setTimeout(function()
            {
                keepSessionAlive();
            }, keepAliveTimeout);
        }
    });
}

실행 시 10초마다 알림창에 '성공' 팝업이 뜨는데 괜찮습니다.그러나 네트워크 케이블을 분리해도 아무것도 표시되지 않습니다.에러 함수가 호출되어 「Failure」경보 박스가 표시될 것으로 예상했지만, 아무 일도 일어나지 않습니다.

에러 함수는 서버로부터 반환된 200 이외의 상태 코드만을 대상으로 하고 있는 것이 맞습니까?Ajax 콜을 발신할 때 네트워크 접속 문제를 검출하는 방법이 있습니까?

// start snippet
error: function(XMLHttpRequest, textStatus, errorThrown) {
        if (XMLHttpRequest.readyState == 4) {
            // HTTP error (can be checked by XMLHttpRequest.status and XMLHttpRequest.statusText)
        }
        else if (XMLHttpRequest.readyState == 0) {
            // Network error (i.e. connection refused, access denied due to CORS, etc.)
        }
        else {
            // something weird is happening
        }
    }
//end snippet

다음과 같이 추가합니다.timeout: <number of miliseconds>,안쪽 어딘가에$.ajax({}).또한.cache: false,몇 가지 시나리오에서 도움이 될 수 있습니다.

$.120은 잘 문서화되어 있습니다.옵션 체크는 이쪽에서 해주시면 도움이 될 것 같습니다.

행운을 빕니다.

문제를 재현할 수 없기 때문에 Ajax 콜에 타임아웃을 설정하는 것밖에 제안할 수 없습니다.jQuery에서는 $.ajax Setup(및 모든 $.ajax 콜에 대해 글로벌)을 사용하여 설정할 수도 있고 다음과 같이 콜에 대해 설정할 수도 있습니다.

$.ajax({
    type: 'GET',
    url: 'http://www.mywebapp.com/keepAlive',
    timeout: 15000,
    success: function(data) {},
    error: function(XMLHttpRequest, textStatus, errorThrown) {}
})

JQuery는 콜에 15초의 타임아웃을 등록합니다.그 후 서버 jQuery에서http 응답 코드가 없으면 textStatus 값이 timeout으로 설정된 상태에서 오류 콜백을 실행합니다.이를 통해 적어도 Ajax 콜을 중지할 수 있지만 실제 네트워크 문제와 연결 끊김을 구분할 수 없습니다.

이 경우 클라이언트머신의 네트워크 케이블을 뽑아 콜을 발신하면 Ajax 성공 핸들러가 호출되고(왜인지 모르겠지만), 데이터 파라미터는 빈 문자열이 됩니다.따라서 실제 오류 처리를 제외하면 다음과 같은 작업을 수행할 수 있습니다.

function handleError(jqXHR, textStatus, errorThrown) {
    ...
}

jQuery.ajax({
    ...
    success: function(data, textStatus, jqXHR) {
        if (data == "") handleError(jqXHR, "clientNetworkError", "");
    },
    error: handleError
});

크로스 도메인을 작성하는 경우는, Use Jsonp 에 문의해 주세요.그렇지 않으면 오류가 반환되지 않습니다.

사용하다

xhr.onerror = function(e){
    if (XMLHttpRequest.readyState == 4) {
        // HTTP error (can be checked by XMLHttpRequest.status and XMLHttpRequest.statusText)
        selFoto.erroUploadFoto('Erro HTTP: '+XMLHttpRequest.statusText);
    }
    else if (XMLHttpRequest.readyState == 0) {
        // Network error (i.e. connection refused, access denied due to CORS, etc.)
        selFoto.erroUploadFoto('Erro de rede:'+XMLHttpRequest.statusText);
    }
    else {
        selFoto.erroUploadFoto('Erro desconhecido.');
    }

};

(아래 코드 추가 - 이미지 업로드 예시)

var selFoto = {
   foto: null,

   upload: function(){
        LoadMod.show();

        var arquivo = document.frmServico.fileupload.files[0];
        var formData = new FormData();

        if (arquivo.type.match('image.*')) {
            formData.append('upload', arquivo, arquivo.name);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'FotoViewServlet?acao=uploadFoto', true);
            xhr.responseType = 'blob';

            xhr.onload = function(e){
                if (this.status == 200) {
                    selFoto.foto = this.response;
                    var url = window.URL || window.webkitURL;
                    document.frmServico.fotoid.src = url.createObjectURL(this.response);
                    $('#foto-id').show();
                    $('#div_upload_foto').hide();           
                    $('#div_master_upload_foto').css('background-color','transparent');
                    $('#div_master_upload_foto').css('border','0');

                    Dados.foto = document.frmServico.fotoid;
                    LoadMod.hide();
                }
                else{
                    erroUploadFoto(XMLHttpRequest.statusText);
                }

                if (XMLHttpRequest.readyState == 4) {
                     selFoto.erroUploadFoto('Erro HTTP: '+XMLHttpRequest.statusText);
                }
                else if (XMLHttpRequest.readyState == 0) {
                     selFoto.erroUploadFoto('Erro de rede:'+XMLHttpRequest.statusText);                             
                }

            };

            xhr.onerror = function(e){
            if (XMLHttpRequest.readyState == 4) {
                // HTTP error (can be checked by XMLHttpRequest.status and XMLHttpRequest.statusText)
                selFoto.erroUploadFoto('Erro HTTP: '+XMLHttpRequest.statusText);
            }
            else if (XMLHttpRequest.readyState == 0) {
                 // Network error (i.e. connection refused, access denied due to CORS, etc.)
                 selFoto.erroUploadFoto('Erro de rede:'+XMLHttpRequest.statusText);
            }
            else {
                selFoto.erroUploadFoto('Erro desconhecido.');
            }
        };

        xhr.send(formData);
     }
     else{
        selFoto.erroUploadFoto('');                         
        MyCity.mensagens.push('Selecione uma imagem.');
        MyCity.showMensagensAlerta();
     }
  }, 

  erroUploadFoto : function(mensagem) {
        selFoto.foto = null;
        $('#file-upload').val('');
        LoadMod.hide();
        MyCity.mensagens.push('Erro ao atualizar a foto. '+mensagem);
        MyCity.showMensagensAlerta();
 }
 };

네트워크가 다운되거나 페이지 업데이트에 실패했을 때 사용자에게 경고하기 위해 다음과 같이 했습니다.

1. 현재 시간을 입력하고 10초마다 이 태그를 업데이트하는 페이지에 div-tag가 있습니다. 있어요.<div id="reloadthis">22:09:10</div>

2. div-tag에 시간을 갱신하는 javascript 함수의 마지막에 다음과 같이 입력합니다(AJAX로 시간이 갱신된 후).

   var new_value = document.getElementById('reloadthis').innerHTML;
   var new_length = new_value.length;
   if(new_length<1){
       alert("NETWORK ERROR!");
   }
   

바로 그거야!물론 경보 부품을 원하는 모든 부품으로 교체할 수 있습니다.이게 도움이 됐으면 좋겠다.

이거 먹어봤어?

$(document).ajaxError(function(){ alert('error'); }

이것으로 모든 AjaxErrors를 처리할 수 있습니다.여기서 찾았어요.또한 이러한 오류를 firebug 콘솔에 기록할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/1730692/jquery-ajax-how-to-detect-network-connection-error-when-making-ajax-call