code

네트워크 연결 끊김으로 인한 Ajax 호출 실패를 감지하는 방법

starcafe 2023. 10. 15. 17:32
반응형

네트워크 연결 끊김으로 인한 Ajax 호출 실패를 감지하는 방법

jquery ajax method를 사용하여 많은 데이터를 웹서버로 보내고 있고 클라이언트측은 서버로부터 승인을 받은 후에야 응답하는데, 이제 ajax call 도중에 네트워크 연결이 끊겼다고 가정하고 어떻게 이 상황을 탐지할 것인지를 가정해 보겠습니다.

$.ajax({
         url:'server.php',
         data:'lots of data from 200KB to 5MB',
         type:'post',
         success: function(data)
                    {
                        alert('Success');
                      //some stuff on success

                    },
          error: function(XMLHttpRequest, textStatus, errorThrown)
                    {
                        alert('Failure');
                      //some stuff on failure
                    }
        });

이것은 나의 코드이며 인터넷 연결이 끊어지면 ajax call 도중에 에러가 발생하지 않습니다.

참고 : 데이터 크기가 200kb부터 5MB까지 다양하고 서버 응답 시간 계산이 불가능하여 타임아웃을 사용할 수 없습니다.

시도해 보기:

먼저 5초마다 setInterval로 "ping" ajax 호출 만들기

function server_ping()
    {
        $.ajax({
            url:"url to ping",
            type: "POST"
        });
    }
    var validateSession = setInterval(server_ping, 5000);

그런 다음 .ajaxError 트랩을 무장합니다.

$(document).ajaxError(function( event, request, settings ) {
        //When XHR Status code is 0 there is no connection with the server
        if (request.status == 0){ 
            alert("Communication with the server is lost!");
        } 

    });

Ajax 호출은 기본적으로 비동기이므로 ping이 서버로 이동하고 요청이 서버에 도달할 수 없을 때 XHR 상태의 값은 0이며 .ajaxError가 발생하므로 오류를 파악하고 원하는 방식으로 처리해야 합니다.

그러면 서버로 데이터를 전송할 수 있습니다. 데이터를 전송할 때 연결이 끊어지면 ping에서 오류가 보고됩니다.

서버가 많이 붐비지 않았다면 데이터 전송을 시작할 때 타이머를 사용하여 정기적으로 연결을 감지할 수 있습니다(예를 들어 매 5초마다 다른 ajax 호출을 사용함).이제 타임아웃을 사용할 수 있습니다.

그건 그렇고, 1)타임아웃이 항상 네트워크 오류를 의미하는 것은 아닙니다. 때로는 서버가 다운되어 "타임아웃"이 발생하기도 합니다.

2)드라이버가 클라이언트 디바이스에서 다운된 경우 xhr.status = 0이고 시간 초과는 없습니다.

비슷한 문제가 있었는데 간단한 시도/잡기와 2초간의 재시도 지연으로 해결했습니다.

function myAjaxMethod()
{
  try 
  {
    $.ajax({ ... });
  } catch (err) 
  { 
    console.log(err.message); 
    setTimeout(function(){myAjaxMethod(),2000});
  }
}

저도 당신과 비슷한 상황에 직면하여 5초마다 네트워크 점검을 하여 수정하였고, 네트워크가 끊어지면 수동으로 ajax 요청을 중단하여 ajax 요청을 종료합니다.

여기서 나는 jquery ajax 호출의 send 이벤트에서 ajax XmlHttpRequest를 받고 네트워크 장애가 발생할 경우 해당 개체를 사용하여 ajax 요청을 중단합니다.

var interval = null;
var xhr = null;

$.ajax({
     beforeSend: function(jqXHR, settings) {  
          xhr = jqXHR;  // To get the ajax XmlHttpRequest 
     },
     url:'server.php',
     data:'lots of data from 200KB to 5MB',
     type:'post',
     success: function(data)
                {
                    alert('Success');
                  //some stuff on success

                },
      error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                    alert('Failure');
                  //some stuff on failure
                },
      complete: function(data)
                {
                    alert('Complete');
                    //To clear the interval on Complete
                    clearInterval(interval);
                },
    });

interval = setInterval(function() {
    var isOnLine = navigator.onLine;
        if (isOnLine) {
            // online
        } else {
             xhr.abort();
        }
     }, 5000);

$.ajax({})를 구성하는 동안 시간 초과를 추가합니다.

또한 cache: false, 도움이 되는 경우도 있습니다.

Jquery의 ajax () 참조 : http://api.jquery.com/jQuery.ajax/ #tops

여러분은 그곳에서 훨씬 더 많은 정보를 얻을 수 있을 거예요!

당신의 문제에 대한 나의 생각을 업데이트했습니다

@리테쉬 찬도라, 걱정하는 것 이해합니다.하지만 저는 두 가지를 제안할 수 있습니다.

  1. 게시 데이터의 범위가 200kb에서 5mb이므로 최대 시간 초과를 선택할 수 있습니다.같은 걸 유발할 겁니다예, 문제가 있을 수 있지만 선택한 설계에서는 POST 진행 상황을 모니터링할 수 있는 유일한 방법은 이 방법입니다. 그렇지 않은 경우 포인트 2를 참조하십시오.

  2. 흐름을 살펴보니, 당신은 사용자에게 FB의 응답 Json을 당신의 url에 복사하라고 요구하고 있습니다. 여기에 몇 가지 문제가 있습니다.

  3. json 데이터는 사용자에 대한 민감한 정보를 가지고 있으며, SSL 암호화 없이 url에 게시하고 있습니다.

  4. 취득한 데이터를 서버에 게시하도록 사용자에게 요청해야 하는 이유는 무엇입니까?서버 사이드 스크립트를 사용하는 것이 더 쉬울 것입니다.또한 이러한 경우에는 서버 측에서 FB서버->당신의 서버-와 동일한 양식을 검색할 수 있는 클라이언트에서 서버로 대량의 데이터를 게시해서는 안 됩니다.

제가 제안하는 해결책은 사용자가 인증된 후 서버 쪽에서 친구 목록을 검색하는 것입니다.서버측에서 원하는 작업을 수행하고 결과를 사용자 화면에 표시합니다.

이렇게 하면 서버가 모든 부담을 떠안게 되고, 사용자가 url에 고약한 json 포스팅을 할 필요도 없습니다.

그건 그렇고, 당신의 앱 아이디어는 멋지네요.

   error: function(xhr, textStatus, thrownError)
                    {
                       alert(xhr.status);
                       alert(thrownError);
                       alert(textStatus);

                    }

한번 해보세요.TextStatus(null 이외에)는 "timeout", "error", "abort" 및 "parserror"입니다.HTTP 오류가 발생하면 twallError는 HTTP 상태의 텍스트 부분(예: "Not Found" 또는 "Internal Server Error")을 수신합니다.

인터넷 연결이 끊어지면 응답이 수신되지 않으며 최대 시간 초과 메시지가 됩니다.

언급URL : https://stackoverflow.com/questions/11044694/how-to-detect-ajax-call-failure-due-to-network-disconnected

반응형