What is the best practice for passing large amounts of client side data to the server?

Question

I have a lot of data on the client side made up of mostly large arrays and I need to get this info back to the server and be able to parse it easily. I'm using jQuery on the front end and PHP (CodeIgniter) on the back end.

Right now I'm just POSTing one huge array using jQuery $.post. Is this a good idea or should I use several smaller ones?

Also, should I be using jQuery's ajax methods or is there something better than this?

Answer 1

If you can combine all the data into one post, that's definitely the way to go. Browsers, most notably IE (gag), will choke when you exceed too many simultaneous XHRequests to the same server. Too many at a time generally means more than 2.

Basically, best practice for sending data to the server can be summed up as: "as little as possible in as few requests as possible". How you strucutre the data is up to you.

If you're really sending a lot via jQuery, consider compressing it with something like jsend (a jQuery plugin to compress, with a PHP counterpart to decompress).

Answer 2

The maximum post size is going to be governed by the post_max_size setting in your server's PHP.INI file. The default setting is 8MB, which is a LOT of space for post data. Keep in mind there may be other factors affecting that limit (memory_limit, etc.).

In short, if your 1000 elements are pretty small in size, then a regular post with jQuery is probably an adequate approach.

Answer 3

Darin answered similar question here: Sending large data to server

Use a POST HTTP verb instead of GET:

$.ajax({
    url: '/foo',
    type: 'POST',
    data: { value: someVariableThatCouldBeHuge },
    success: function(result) {
        // TODO: process the results
    }
});

or the equivalent:

$.post('/foo', { value: someVariableThatCouldBeHuge }, function(result) {
    // TODO: process the results
});

Pekka suggested to serialize data and break into chunks if post is not an option: Sending a large parametrized data set as a GET request

Answer 4

Maybe you could try to ZIP your data, before sending it to the server. Check out this thread: JavaScript implementation of Gzip

Answer 5

You can use FormData:

var formData = new FormData();
formData.append('filename', filename);
formData.append('data', data);
$.ajax({
    url: "FileUploadServlet",
    type: "POST",
    data: formData,
    cache: false,
    contentType: false,
    processData: false});