How to do AJAX using XMLHttpRequest for large data

Your are at right place if you are :

• working on loading huge amount of data from server be it JSON or XML document
• getting truncated JSON Response string 
• observing $.ajax call failure due to JSON.parse is compiling about invalid char while parsing JSON 
• observing performance lag while parsing JSON using $.ajax
• observing response code 200 but there is not response received in $.ajax success call 
• Uncaught InternalError: allocation size overflow in $.ajax

If you are loading large data from server then you need to consider lot of factors impacting load time. There can be optimization on server as well as client. Coming to client, most commonly used API for AJAX is JQuery.ajax. But when it comes to fetching large data set from server be it in JSON format or XML document, you might end up facing issue mentioned at the beginning of this blog.

I observed that in case of large JSON String in response, response string is being truncated. Also, if string is not truncated, JSON.parse takes a lot of time to parse this string on browser. If you are using XML/HTML document in response then similar problem may arise. One possible solution to this is avoid parsing JSON string to JSON object in case your are using $.ajax. Instead, you can go XMLHttpRequest which gives you already parsed JSON in XMLHttpRequest.response. 

You need to give call to the API in exact same order as below:

1. open
2. set content-type
3. onreadystatechange
4. responseType
5. send

You can check sample request below:

 var xmlHttpRequest = new XMLHttpRequest();

xmlHttpRequest.open('GET', 'URL', true);

xmlHttpRequest.set('Content-type', 'json');

xmlHttpRequest.onreadystatechange  = function(response){

        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {

            //Please do not use JSON.parse(xmlHttpRequest.responseText))

resolve(xmlHttpRequest.response);//you can call your success callback here

     }

        if(xmlHttpRequest.status != 200) {

            console.log('Error occurred while calling Server API.');

        }

};

xmlHttpRequest.responseType = 'json';

xmlHttpResponse.send();

And if your API is XML/HTML document based interaction. Then you can set XMLHttpRequest.responseType to document used for both XML and HTML. If you want to send any data/payload to request, then it has to be sent as part of parameter to send API call. You can follow example below :

 var xmlHttpRequest = new XMLHttpRequest();

xmlHttpRequest.open('POST', 'URL', true);

xmlHttpRequest.set('Content-type', 'xml');

xmlHttpRequest.onreadystatechange  = function(response){

        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {

            resolve(xmlHttpRequest.responseXML);//you can call your success callback here

     }

        if(xmlHttpRequest.status != 200) {

            console.log('Error occurred while calling Server API.');

        }

};

xmlHttpRequest.responseType = 'document';

//Request payload

let inputData = "<xml><abc id="123">Some random data.</abc></xml>";

xmlHttpResponse.send(inputData);

You can easily spot the difference between the request for data type XML and JSON,

1. responseType(json or document)
2. response(JSON) and respnseXML(XML)

You have to take care of couple of point if you are supporting these calls on Mobile browser or Internet explorer(my bad I said it) you have be extra cautious as these might not be supported on some versions. You can refer documentation for XMLHttpRequest in the end.

 

Reference :

1. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
2. https://xhr.spec.whatwg.org/#the-response-attribute