How to measure AJAX request load time and display the loading bar?

Question

I have an AJAX request that can sometimes handle a very large json object. I want to display a loading bar that looks like this (in 45%):

My problem is that I cannot measure how long the server will process the json object sent from AJAX.

Here is my AJAX request:

$.ajax({
    url: './home/sumbit_json',
    type: 'POST',
    data: { 
      json_data: json_data, 
      user: user,
      entry: entry
    },
    dataType: 'json',
    success: function(data) {
      if (data.status == false) {
        alert("transaction failed");
      } else {
        alert("transaction successful");
      }

    }, // End of success function of ajax form
    error: function(xhr, status, errorThrown) {
      console.log("Error: " + errorThrown);
      console.log("Status: " + status);
      console.dir(xhr);
    },
});

Answer 1

$.ajax({
    url: './home/sumbit_json',
    type: 'POST',
                // this will run before the request to server
    beforeSend: function(){
        // this variable may need to be set outside of ajax request
        // just use something to track time
        time = new Date();
    },
    data: { 
        json_data: json_data, 
        user: user,
        entry: entry
    },
    dataType: 'json',
    success: function(data) {
    if (data.status == false) {
        alert("transaction failed");
    } else {
        alert("transaction successful");
        //figure out how long it took:)
        alert(new Date() - time);
    }

    }, // End of success function of ajax form
    error: function(xhr, status, errorThrown) {
        console.log("Error: " + errorThrown);
        console.log("Status: " + status);
       console.dir(xhr);
    },
});

, , . , , , , . , , .

, , Chrome. .

, : 1. X. 2. 3. 4. 5. 1-4 -/ 6. , , , / 7. , 6. 8. , .

.

!

Answer 2

, , . .;)

:

• . . -outlier, , .

• , ... ... 90% "".

• , 100% .