it-swarm.com.de

JQuery Ajax - Erkennen eines Netzwerkverbindungsfehlers beim Aufruf von Ajax

Ich habe einen Javascript-JQuery-Code, der alle 5 Minuten einen Ajax-Aufruf an den Server durchführt. Es dient dazu, die Serversitzung am Leben zu halten und den Benutzer angemeldet zu lassen. Ich verwende die $.ajax()-Methode in JQuery. Diese Funktion scheint eine 'error' -Eigenschaft zu haben, die ich versuche zu verwenden, falls die Internetverbindung des Benutzers ausfällt, so dass das KeepAlive-Skript weiterhin ausgeführt wird. Ich verwende den folgenden Code:

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);
        }
    });
}

Wenn ich es starte, bekomme ich in einem Warnfeld alle 10 Sekunden ein Popup-Fenster "Success" (Erfolg), was in Ordnung ist. Sobald ich das Netzwerkkabel abziehe, bekomme ich jedoch nichts. Ich habe erwartet, dass die Fehlerfunktion aufgerufen wird und ein Warnfeld angezeigt wird, aber es passiert nichts.

Bin ich richtig, wenn ich davon ausgehe, dass die 'Fehler'-Funktion nur für nicht' 200 'Statuscodes gilt, die vom Server zurückgegeben werden? Gibt es eine Möglichkeit, Netzwerkverbindungsprobleme zu erkennen, wenn Sie einen Ajax-Anruf tätigen?

77
Sunday Ironfoot
// 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
83
Craneum

Sie sollten einfach Folgendes hinzufügen: timeout: <number of miliseconds>, irgendwo in $.ajax({}). Außerdem kann cache: false, in einigen Szenarien hilfreich sein.

$ .ajax ist gut dokumentiert , Sie sollten die Optionen dort überprüfen, vielleicht etwas Nützliches finden.

Viel Glück!

13
Krule

Da ich das Problem nicht duplizieren kann, kann ich nur vorschlagen, mit einem Timeout beim Ajax-Aufruf zu versuchen. In jQuery können Sie es mit $ .ajaxSetup festlegen (und es wird für alle Ihre $ .ajax-Anrufe global sein) oder Sie können es speziell für Ihren Anruf wie folgt festlegen:

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

JQuery registriert bei Ihrem Anruf ein Timeout von 15 Sekunden. jQuery führt dann ohne einen http-Antwortcode vom Server den Fehlerrückruf aus, wobei der Wert für textStatus auf "timeout" gesetzt ist. Damit können Sie den Ajax-Anruf zumindest stoppen, aber Sie können die Probleme des realen Netzwerks nicht vom Verbindungsverlust unterscheiden.

9
Marco Z

Was ich in diesem Fall sehe, ist, dass wenn ich das Netzwerkkabel des Client-Computers ziehe und den Anruf tätige, der ajax-Erfolgs-Handler aufgerufen wird (warum, ich weiß es nicht) und der Datenparameter eine leere Zeichenfolge ist. Wenn Sie also die eigentliche Fehlerbehandlung ausfiltern, können Sie Folgendes tun:

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

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

Wenn Sie domänenübergreifend sind, rufen Sie Use Jsonp an. Andernfalls wird der Fehler nicht zurückgegeben.

1
Swapnil Rebello

BENUTZEN 

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.');
    }

};

(mehr Code unten - BILDBEISPIEL UPLOAD)

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();
 }
 };
0
MalucOJonnes