Ajax Batch Requests

This blog is a continuation of my previous blog on how to do multiple ajax requests parallel from a browser. Please check that blog if haven’t.

As mentioned in my previous blog you can do multiple ajax calls by just looping through and calling the ajax post module. Here is the code:

    function updateHistory(patients) {

        for (var index = 0; index < patients.length; index++) {

            var patientID = patients[index];

            utility.httpPost('api/compatupdatehistory', patientID).then(function (data) {

                    //show the progress bar

            });

        }

    }

This works great if you have around 1000 to 1500 requests. If there are more than those, then you will get out of resource error. In that case we cannot use the above approach directly.

To solve this problem, I batched my requests say 100 at a time. Before the end of the batch, I will trigger the next batch. By doing this batch method, I am restricting the number of parallel requests and thereby not consuming too many browser resources. Here is the code for this batch processing

    function updateHistory(patients) {

        updateHistoryBatch(patients, 0);

    }

    function updateHistoryBatch(patients, startIndex) {

        var batchsize = 100;

        var nextBatctStartIndex = 80;

        if (startIndex % batchsize === nextBatctStartIndex) {

            startIndex = (parseInt(startIndex / batchsize) + 1) * batchsize

        }

        else if (startIndex !== 0) {

            return;

        }

        var endIndex = startIndex + batchsize;

        endIndex = endIndex < patients.length ? endIndex : patients.length;

        for (var index = startIndex; index < endIndex; index++) {

            var patientID = patients[index];

            currentIndex = index + 1;

            updateHistoryForeachPatient(patientID, currentIndex, patients)

        }

    }

    function updateHistoryForeachPatient(patientID, currentIndex, patients) {

        utility.httpPost('api/compatupdatehistory', patientID).then(function (data) {

            //call to process the next batch as needed

            updateHistoryBatch(patients, currentIndex)

        });

    }

As you see in the above code, I am recursively calling the updateHistoryBatch method. This method batches the ajax calls. It calculates and decides when to spun the next batch. In this code, I am kick starting the next batch whenever the 80 ajax calls from the previous batch is completed. By starting the next batch before the previous batch ends enables me to keep the queue always full.

With this batch approach I was able to do about 50k ajax calls without any issues.