javascript شرح JQuery Ajax-كيفية اكتشاف خطأ اتصال الشبكة عند إجراء مكالمة Ajax




jquery ajax json (7)

إذا كنت تصنع عبر النطاقات ، استخدم Use Jsonp. آخر لا يتم إرجاع الخطأ.

لدي بعض كود JQuery Javascript الذي يقوم باستدعاء Ajax إلى الخادم كل 5 دقائق ، هو الحفاظ على جلسة عمل الخادم على قيد الحياة والحفاظ على دخول المستخدم. أنا $.ajax() طريقة $.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 ثوانٍ على ما يرام. ومع ذلك ، بمجرد أن أقوم بإلغاء توصيل كابل الشبكة ، لم أحصل على شيء ، كنت أتوقع استدعاء وظيفة الخطأ ورؤية مربع تنبيه "فشل" ، ولكن لا يحدث شيء.

هل أقوم بتصحيح أن وظيفة "الخطأ" هي فقط لرموز الحالة غير "200" التي يتم إرجاعها من الخادم؟ هل هناك طريقة للكشف عن مشاكل اتصال الشبكة عند إجراء مكالمة أجاكس؟


هل جربت هذا؟

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

يجب التعامل مع جميع AjaxErrors. وجدتها here . هناك تجد أيضا إمكانية لكتابة هذه الأخطاء إلى وحدة تحكم firebug الخاص بك.


إليك ما فعلت لتنبيه المستخدم في حالة تعطل الشبكة أو عند فشل تحديث الصفحة:

  1. لدي علامة div على الصفحة حيث أضع الوقت الحالي وأحدث هذه العلامة كل 10 ثوانٍ. يبدو شيء مثل هذا: <div id="reloadthis">22:09:10</div>

  2. في نهاية وظيفة javascript التي تقوم بتحديث الوقت في div-tag ، أضع هذا (بعد تحديث الوقت مع AJAX):

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

هذا هو! يمكنك استبدال جزء التنبيه بأي شيء تريده ، بالطبع. أتمنى أن يساعدك هذا.


نظرًا لأنني لا أستطيع تكرار المشكلة ، لا يمكنني اقتراح سوى تجربة المهلة على مكالمة ajax. في jQuery يمكنك تعيينه مع $ .ajaxSetup (وسيكون عالميًا لجميع المكالمات $ .ajax) أو يمكنك تعيينه خصيصًا لمكالمتك على النحو التالي:

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

jQuery سوف يسجل مهلة مدتها 15 ثانية على مكالمتك ؛ بعد ذلك دون رمز استجابة HTTP من خادم jQuery سوف تنفيذ استدعاء الخطأ مع قيمة textStatus لتعيين "مهلة". مع هذا يمكنك على الأقل إيقاف مكالمة ajax لكنك لن تكون قادرًا على التمييز بين مشاكل الشبكة الحقيقية وفقدان الاتصالات.


يجب عليك فقط إضافة: timeout: <number of miliseconds>, somewhere within $.ajax({}) . أيضًا ، cache: false, قد تساعد في بعض السيناريوهات.

$ .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

استعمال

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

};

(رمز أكثر أدناه - UPLOAD IMAGE EXAMPLE)

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




jquery