programing

JSON 응답에 대한 jQuery AJAX 폴링, AJAX 결과 또는 JSON 콘텐츠에 따른 처리

starjava 2023. 3. 23. 22:13
반응형

JSON 응답에 대한 jQuery AJAX 폴링, AJAX 결과 또는 JSON 콘텐츠에 따른 처리

저는 JavaScript/jQuery의 초보 프로그래머이므로 구체적이고 실행 가능한 예를 들어주시면 감사하겠습니다.

프로젝트에서는 AJAX를 사용하여 DOM에 추가할 콘텐츠를 포함하는 JSON을 반환하는 URL을 폴링하거나 백엔드가 해당 콘텐츠를 사용하여 아직 JSON 응답을 생성 중임을 나타내는 메시지 {status: "pending"}을(를) 사용해야 합니다.그 이유는 URL에 대한 첫 번째 요구가 백엔드를 트리거하여 JSON 응답 구축을 시작하고(그 후 캐시됨), 후속 콜이 이 JSON이 준비되었는지(이 경우 제공되었는지) 확인하는 것입니다.

스크립트에서는 이 URL을 15초 간격으로 폴링하고 다음 작업을 수행해야 합니다.

  • AJAX 요청으로 인해 오류가 발생할 경우 스크립트를 종료합니다.
  • AJAX 요청이 성공하고 JSON 컨텐츠에 {status: "pending"}이(가) 포함된 경우 폴링을 계속합니다.
  • AJAX 요청이 성공하고 JSON 컨텐츠에 사용 가능한 컨텐츠(즉, {status" : "pending" } 이외의 유효한 응답)가 포함되어 있는 경우 해당 컨텐츠를 표시하고 폴링을 중지한 후 스크립트를 종료합니다.

몇 가지 접근 방법을 시도해 봤지만, 필요한 것보다 더 복잡하다는 느낌이 듭니다.다음은 JSON 응답에서 사용 가능한 콘텐츠를 얻었을 때 한 번에 하나의 AJAX 요청을 만들기 위해 사용한 골격 함수입니다.

// make the AJAX request
function ajax_request() {
  $.ajax({
    url: JSON_URL, // JSON_URL is a global variable
    dataType: 'json',
    error: function(xhr_data) {
      // terminate the script
    },
    success: function(xhr_data) {
      if (xhr_data.status == 'pending') {
        // continue polling
      } else {
        success(xhr_data);
      }
    },
    contentType: 'application/json'
  });
}

그러나 현재 이 함수는 사용 가능한 콘텐츠를 포함하는 유효한 JSON 응답을 수신하지 않는 한 아무 작업도 수행하지 않습니다.

그냥 댓글로 하는 거 어떻게 해야 될지 모르겠어요.다른 함수가 폴링을 처리하고 Ajax를 호출해야 할 것 같습니다._request()는 필요하지만 ajax를 위한 가장 우아한 방법을 모르겠습니다._request()는 폴링 기능에 결과를 전달하여 적절하게 응답할 수 있도록 합니다.

어떤 도움이라도 정말 감사합니다!제가 더 제공할 수 있는 정보가 있으면 알려주세요.감사합니다!

간단한 타임아웃을 사용하여 반복적으로 ajax_request를 호출할 수 있습니다.

success: function(xhr_data) {
  console.log(xhr_data);
  if (xhr_data.status == 'pending') {
    setTimeout(function() { ajax_request(); }, 15000); // wait 15 seconds than call ajax request again
  } else {
    success(xhr_data);
  }
}

저 라인 주변에 카운터체크를 붙이면 최대 투표수를 얻을 수 있어요.

if (xhr_data.status == 'pending') {
  if (cnt < 6) {
    cnt++;
    setTimeout(function() { ajax_request(); }, 15000); // wait 15 seconds than call ajax request again
  }
}

경고를 띄우거나 하지 않는 한 오류 기능을 수행할 필요가 없습니다.에러가 발생한다는 단순한 사실로 인해 성공 함수가 호출되지 않고 다른 폴링이 트리거될 수 있습니다.

기능해 주셔서 감사합니다.조금 버그가 있지만, 해결 방법이 있습니다.루스터노산의 답은 100%가 되어도 멈추지 않습니다.클리어 사용이 잘못되어 있기 때문입니다.인터벌 함수

동작하는 기능은 다음과 같습니다.

$(function ()
{
    var statusElement = $("#status");

    // this function will run each 1000 ms until stopped with clearInterval()
    var i = setInterval(function ()
    {
        $.ajax(
        {
            success: function (json)
            {
                // progress from 1-100
                statusElement.text(json.progress + "%");

                // when the worker process is done (reached 100%), stop execution
                if (json.progress == 100) clearInterval(i);
            },

            error: function ()
            {
                // on error, stop execution
                clearInterval(i);
            }
        });
    }, 1000);
});

더 클리어Interval() 함수는 interval id를 파라미터로 간주하고 있으며, 그 후 모든 것이 정상입니다;-)

치어스 니크

즉석에서:

$(function ()
{
    // reference cache to speed up the process of querying for the status element
    var statusElement = $("#status");

    // this function will run each 1000 ms until stopped with clearInterval()
    var i = setInterval(function ()
    {
        $.ajax(
        {
            success: function (json)
            {
                // progress from 1-100
                statusElement.text(json.progress + "%");

                // when the worker process is done (reached 100%), stop execution
                if (json.progress == 100) i.clearInterval();
            },

            error: function ()
            {
                // on error, stop execution
                i.clearInterval();
            }
        });
    }, 1000);
});

javascript 세트를 사용할 수 있습니다.5초마다 내용을 로드하는 Interval 함수입니다.

var auto= $('#content'), refreshed_content; 
    refreshed_content = setInterval(function(){
    auto.fadeOut('slow').load("result.php).fadeIn("slow");}, 
    3000);

참고로...

3초마다 div 콘텐츠 자동 새로 고침

언급URL : https://stackoverflow.com/questions/1406580/jquery-ajax-polling-for-json-response-handling-based-on-ajax-result-or-json-con

반응형