JQuery AJAX POST call take long time

Question

I make a request POST with a huge data, but the SEND of request take very long time. I said only send cause I've got this code :

 console.time('post load');
var req= new Array;
                req = { 
                     'data' :   $('input[name="data"]', $('#id_contain')) .serialize()
                };

var request = $.ajax({
                                    url : '/url',
                                    type : "POST",
                                     data : req,
                                    cache : false,
                timeout: 10000,
                                    dataType : 'json',
                                    async:   false,
                                    success : function(response){
                               alert('yes');
                }, 
                                    error : function(jqXHR, textStatus,
                                            errorThrown) {
                                    //  if (debug_js) {
                                            console.log(jqXHR);
                                //      }
                                    }
                                });
               console.timeEnd('post load');
  console.log('data');

so according to this code, my request (post load) take like 25 seconds and I'v got timeout onajax request of 10sec.So I think it's only the jquery making request take time? But if I change data the huge data with a simple string it takes like 0.01sec... So it's really due to my huge data?

Answer 1

Had the exact same problem. In one use-case I had to send 3 JSON Objects with all together ~20MB; and although only sending to localhost it took about 20 seconds or the browser timed out (Firefox, Chrome).

After a lot of try and error (also tried commenting out all server-logic, but didn't speed up the process) I finally found a solution:

1. Stringify your JSON-Data: JSON.stringify(req);
2. Add contentType: 'application/json' to your ajax request
3. On the Server-side add logic to read json content out of a http-post

The 3. step depends on what kind of server you are running. For me it is a node express server with body-parser module for the json-content.

After these changes the http-post creation of jquery went down from 20secs to something under 1 second.

Answer 2

As Niels mentiond, it could be a backend (server side) issue. I suggest you first try commenting out any processing logic in the server side and immediately return your success condition. If the request still takes long, then it's definitely the huge data that's the culprit and you may have to consider some sort of client side data-compression. There is some analysis done here on various options to do this.