Big List Ajax Indicator

Question

I have an ajax call that captures a large json list. Is there a way to make a progress bar that gets the actual json load value (for example, a status bar that shows 1 out of 200 downloaded)?

I now have a pretty simple Ajax call

function SendAjax(urlMethod, jsonData, returnFunction) { $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", url: urlMethod, data: jsonData, dataType: "json", success: function (msg) { if (msg != null) { ReturnJson(msg); } }, error: function (xhr, status, error) { // Boil the ASP.NET AJAX error down to JSON. var err = eval("(" + xhr.responseText + ")"); // Display the specific error raised by the server alert(err.Message); } }); } 

Answer 1

Try using AjaxStart in the global scope of your application. This means that you can put the code in your layout file, and if the processing is long, it will show a progress indicator ...

 $(document).ajaxStart(function() { $( "#loading" ).show(); }); 

You can see an example and respond to preload with a percentage - javascript / jquery .

Answer 2

There are several states in the ajax request, but they do not represent any percentage through the request.

Network traffic really should be your real problem, you do not want to send 200 separate requests (although this will allow you to create a progress bar, this will lead to the fact that the entire request will take significantly longer, depending on your network connection to the server).

It’s best to just show the activity indicator and delete it when the request completes, and try to optimize your side of the code server so that 200 items are returned as quickly as possible.

If 200 items are really too large (more than X seconds to return), you can divide it in half or quarters to show some progress, however, it will waste time on these additional requests on the network, page headers, etc.

Answer 3

If your server code has a way of sharing the state of the application (for example, $ _SESSION in PHP), you can make 2 separate requests, one of which requests data, and one that checks the progress of the first request. Repeat the second timer request until the first completion and update $ _SESSION (or whatever works in your server code) as each element is processed.

For example: The start page should start a session, so subsequent AJAX calls have a cookie and can access shared data:

 <?php session_start(); session_write_close(); // close the session so other scripts can access the file (doesn't end the session) // your page content here ?> 

First AJAX call to start processing:

 <?php function updateSession($count){ session_start(); // open the session file $_SESSION['progress'] = $count; session_write_close(); // let other requests access the session } // as you process each item, call the above function, ex: for ($i = 1; $i <= 10; $i++) { updateSession($i); } ?> 

The second AJAX call (repeated every X seconds) is as follows:

 <?php session_start(); // open the session file echo @$_SESSION['progress'] or 0; // echo contents or 0 if not defined session_write_close(); // let other requests access the session ?> 

Sorry, I don’t know ASP.NET, but I hope this code is useful to you.