JQuery Ajax - Cara Mendeteksi kesalahan Koneksi Jaringan saat melakukan panggilan Ajax

Saya memiliki beberapa kode JQuery Javascript yang melakukan panggilan Ajax ke server setiap 5 menit, itu untuk menjaga sesi server tetap hidup dan membuat pengguna tetap masuk. Saya menggunakan $.ajax()metode di JQuery. Fungsi ini tampaknya memiliki properti 'error' yang saya coba gunakan jika koneksi internet pengguna terputus sehingga skrip KeepAlive terus berjalan. Saya menggunakan kode berikut:

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

Ketika saya menjalankannya, saya akan mendapatkan popup 'Sukses' di layar dalam kotak peringatan setiap 10 detik yang tidak masalah. Namun, segera setelah saya mencabut kabel jaringan, saya tidak mendapatkan apa-apa, saya mengharapkan fungsi kesalahan dipanggil dan melihat kotak peringatan 'Kegagalan', tetapi tidak ada yang terjadi.

Apakah saya benar dalam mengasumsikan bahwa fungsi 'kesalahan' hanya untuk kode status non '200' yang dikembalikan dari server? Apakah ada cara untuk mendeteksi masalah koneksi jaringan saat melakukan panggilan 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

Anda harus menambahkan: di timeout: <number of miliseconds>,suatu tempat di dalam $.ajax({}). Juga, cache: false,mungkin membantu dalam beberapa skenario.

$ .ajax didokumentasikan dengan baik , Anda harus memeriksa opsi di sana, mungkin menemukan sesuatu yang berguna.

Semoga berhasil!

Karena saya tidak dapat menduplikasi masalah, saya hanya dapat menyarankan untuk mencoba dengan batas waktu pada panggilan ajax. Di jQuery Anda dapat mengaturnya dengan $ .ajaxSetup (dan ini akan global untuk semua panggilan $ .ajax Anda) atau Anda dapat mengaturnya secara khusus untuk panggilan Anda seperti ini:

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

JQuery akan mendaftarkan batas waktu 15 detik pada panggilan Anda; setelah itu tanpa kode respons http dari server, jQuery akan menjalankan panggilan balik kesalahan dengan nilai textStatus disetel ke "batas waktu". Dengan ini Anda setidaknya dapat menghentikan panggilan ajax tetapi Anda tidak akan dapat membedakan masalah jaringan yang sebenarnya dari hilangnya koneksi.

Apa yang saya lihat dalam kasus ini adalah jika saya menarik kabel jaringan mesin klien dan membuat panggilan, penangan sukses ajax dipanggil (mengapa, saya tidak tahu), dan parameter datanya adalah string kosong. Jadi jika Anda memfaktorkan penanganan kesalahan yang sebenarnya, Anda dapat melakukan sesuatu seperti ini:

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

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

Jika Anda membuat panggilan lintas domain gunakan Jsonp. kalau tidak kesalahan tidak dikembalikan.

MENGGUNAKAN

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

};

(lebih banyak kode di bawah - UPLOAD GAMBAR CONTOH)

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

inilah yang saya lakukan untuk memberi tahu pengguna jika jaringan mereka mati atau setelah pembaruan halaman gagal:

1. Saya memiliki div-tag di halaman tempat saya memasukkan waktu saat ini dan memperbarui tag ini setiap 10 detik. Ini terlihat seperti ini:<div id="reloadthis">22:09:10</div>

2. Di akhir fungsi javascript yang memperbarui waktu di tag-div, saya meletakkan ini (setelah waktu diperbarui dengan AJAX):

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

Itu dia! Anda dapat mengganti bagian peringatan dengan apapun yang Anda inginkan, tentu saja. Semoga ini membantu.

Sudahkah kamu mencobanya?

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

Itu harus menangani semua AjaxErrors. Saya menemukannya di sini . Di sana Anda juga dapat menemukan kemungkinan untuk menulis kesalahan ini ke konsol firebug Anda.