web-dev-qa-db-ja.com

jQuery AJAX JSON応答のポーリング、AJAX結果またはJSONコンテンツに基づく処理

私は初級から中級のJavaScript/jQueryプログラマーなので、具体的で実行可能な例は大歓迎です。

私のプロジェクトでは、AJAXを使用して、DOMに追加するコンテンツまたはメッセージ{"status"： "pendingを含むJSONを返すURLをポーリングする必要があります。 「}は、バックエンドがコンテンツを使用してJSON応答の生成に引き続き取り組んでいることを示します。アイデアは、URLへの最初のリクエストがバックエンドをトリガーしてJSON応答の構築を開始することです（その後キャッシュされます）、その後の呼び出しは、このJSONが準備されているかどうかを確認します（この場合は提供されます）。

私のスクリプトでは、このURLを15秒間隔で1:30分までポーリングし、次のことを行う必要があります。

  • AJAXリクエストがエラーになった場合、スクリプトを終了します。
  • AJAXリクエストが成功し、JSONコンテンツに{"status"： "pending"}が含まれる場合、ポーリングを続行します。
  • AJAXリクエストが成功し、JSONコンテンツに使用可能なコンテンツが含まれている場合（つまり、{"status"： "pending"}））、そのコンテンツを表示し、ポーリングを停止してスクリプトを終了します。

私はいくつかのアプローチを試みましたが、成功は限られていましたが、それらはすべて必要以上に厄介であると感じています。 JSON応答から使用可能なコンテンツを取得した場合にその仕事を行う、一度に1つの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（）がポーリング関数に結果を返す最もエレガントな方法を知りません。適切に対応できること。

どんな助けも大歓迎です！さらに情報を提供できるかどうか教えてください。ありがとう！

javascriptjqueryajaxjsonpolling
46
Bungle

単純なタイムアウトを使用して、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
  }
}

アラートなどを設定する場合を除き、エラー関数で何もする必要はありません。エラーという単純な事実により、成功関数が呼び出され、場合によっては別のポーリングがトリガーされなくなります。

47
Joel

機能をありがとうございました。少しバグがありますが、ここに修正があります。 clearInterval関数の使い方が間違っているため、roosteronacidの答えは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);
});

ClearInterval（）関数は間隔IDをパラメーターとして使用しているため、すべて正常です;-)

乾杯

4
Nik

私の頭の上から：

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

Javascript setInterval関数を使用して、5秒ごとにコンテンツをロードできます。

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

ご参考に-

秒ごとにdivコンテンツを自動更新

0
appsntech