JQuery Poll AJAX for JSON response, processing based on AJAX result or JSON content

Question

I am a beginner JavaScript / jQuery programmer, so specific / executable examples will be much appreciated.

My project requires using AJAX to poll a URL that returns JSON containing either the content added to the DOM or the message {"status": "pending"}, which indicates that the backend is still working on generating a JSON response with content. The idea is that the first URL request starts the backend to create a JSON response (which is then cached), and subsequent calls check to see if this JSON is ready (in which case it is provided).

In my script, I need to poll this url at 15 second intervals until 1:30 minutes and do the following:

• If the AJAX request fails, exit the script.
• If the AJAX request succeeds and the JSON content contains {"status": "pending"}, continue polling.
• If the AJAX request succeeds and the JSON content contains useful content (that is, any valid response other than {"status": "pending"}), then display that content, stop polling and end the script.

I have tried several approaches with limited success, but I understand that they are all dirtier than they need. Here's the skeletal function that I used successfully to make one AJAX request at a time, which makes it work if I get useful content from a JSON response:

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

However, this function currently does nothing until it receives a valid JSON response containing useful content.

I'm not sure what to do in lines that are just comments. I suspect that another function should handle the poll and call ajax _ request () as necessary, but I don’t know the most elegant way for ajax _ request () to pass its results back to the polling function, so that it can respond accordingly.

Any help is much appreciated! Please let me know if I can provide more information. Thank!

Answer 1

You can use a simple timeout to recursively call 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); } } 

Attach a check mark around this line and you have the maximum number of polls.

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

You do not need to do anything in your error function if you do not want to put a warning or something else. the simple fact is that an error will cause the success function to not be called, and possibly cause another poll.

Answer 2

Thanks so much for this feature. This is a bit buggy, but here is the fix. The response of roosteronacid does not stop after reaching 100%, because the clearInterval function is misused.

Here is the working function:

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

The clearInterval () function is the id value of the interval as a parameter, and then everything is fine; -)

Cheers Nik

Answer 3

Above my head:

 $(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 4

You can use the javascript setInterval function to load content every 5 seconds.

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

For reference -

Automatically refresh div content every 3 seconds