javascript - ejemplos - jquery ajax post

sondeo jQuery AJAX para respuesta JSON, manejo basado en el resultado AJAX o contenido JSON

Question

Soy un programador JavaScript / jQuery de principiante a intermedio, así que los ejemplos concretos / ejecutables serían muy apreciados.

Mi proyecto requiere el uso de AJAX para sondear una URL que devuelve JSON que contiene contenido para agregar al DOM o un mensaje {"estado": "pendiente"} que indica que el servidor aún está trabajando para generar una respuesta JSON con el contenido . La idea es que la primera solicitud a la URL desencadena el back-end para comenzar a construir una respuesta JSON (que luego se almacena en caché), y las llamadas posteriores comprueban si este JSON está listo (en cuyo caso se proporciona).

En mi script, necesito sondear esta URL en intervalos de 15 segundos hasta 1:30 minutos, y hacer lo siguiente:

• Si la solicitud AJAX genera un error, finalice el script.
• Si la solicitud de AJAX tiene éxito y el contenido de JSON contiene {"estado": "pendiente"} , continúe con el sondeo.
• Si la solicitud AJAX resulta exitosa y el contenido JSON contiene contenido utilizable (es decir, cualquier respuesta válida que no sea {"estado": "pendiente"} ), entonces visualice ese contenido, suspenda el sondeo y finalice el guión.

He intentado algunos enfoques con éxito limitado, pero tengo la sensación de que son más complicados de lo que deberían ser. Aquí hay una función básica que he utilizado con éxito para hacer una única solicitud de AJAX a la vez, que hace su trabajo si obtengo contenido útil de la respuesta JSON:

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

Sin embargo, esta función actualmente no hace nada a menos que reciba una respuesta JSON válida que contenga contenido utilizable.

No estoy seguro de qué hacer en las líneas que son solo comentarios. Sospecho que otra función debería manejar el sondeo y llamar ajax _ request () según sea necesario, pero no sé la manera más elegante para que ajax _ request () comunique sus resultados a la función de sondeo para que pueda responder adecuadamente.

¡Cualquier ayuda es muy apreciada! Por favor, avíseme si puedo proporcionar más información. ¡Gracias!

Answer 1

La parte superior de mi cabeza:

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

Answer 2

Puede usar la función javascript setInterval para cargar el contenido cada 5 segundos.

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

Para tu referencia-

Actualización automática del contenido div cada 3 segundos

Answer 3

Puede usar un tiempo de espera simple para llamar recursivamente 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);
  }
}

Ponga un contador de verificación alrededor de esa línea y obtendrá un número máximo de encuestas.

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

No necesita hacer nada en su función de error a menos que quiera poner una alerta o algo así. el simple hecho de que su error evitará que se llame la función de éxito y posiblemente desencadenará otra encuesta.

Answer 4

muchas gracias por la función. Es un poco problemático, pero aquí está la solución. La respuesta de roosteronacid no se detiene después de alcanzar el 100%, porque hay un uso incorrecto de la función clearInterval.

Aquí hay una función de trabajo:

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

La función clearInterval () está convirtiendo el ID de intervalo en un parámetro y todo está bien ;-)

Saludos Nik