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

Soy un progtwigdor 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 post {"estado": "pendiente"} que indica que el server aún está trabajando para generar una respuesta JSON con el contenido . La idea es que la primera request a la URL desencadena el back-end para comenzar a build una respuesta JSON (que luego se almacena en caching), y las llamadas posteriores comtestingn 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 request AJAX genera un error, finalice el script.
  • Si la request de AJAX tiene éxito y el contenido de JSON contiene {"estado": "pendiente"} , continúe con el sondeo.
  • Si la request 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 function básica que he utilizado con éxito para hacer una única request 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 function actualmente no hace nada a less 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 function 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 function de sondeo para que pueda responder adecuadamente.

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

Puede usar un time 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 alnetworkingedor 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 function de error a less que quiera poner una alerta o algo así. el simple hecho de que su error evitará que se llame la function de éxito y posiblemente desencadenará otra encuesta.

muchas gracias por la function. 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 function clearInterval.

Aquí hay una function 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 function clearInterval () está convirtiendo el ID de intervalo en un parámetro y todo está bien 😉

Saludos Nik

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

Puede usar la function 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 reference-

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