I have the following ajax code which am using to get the user details from the server. Am generating the html table from the server side and return the structure as a string. This works fine but i get undefined when user records are too many. What is limitation of data that can be passed in ajax ? Is there an alternative i can use to generate html table in the client side ?

 var param = {};
    param.CompanyID = $('[id*=txtCoID]').val();
    $.ajax({
        type: 'POST',
        url: 'AjaxAsync.aspx/BindActiveUsers',
        beforeSend: function () { },
        data: '{P: ' + JSON.stringify(param) + '}',
        contentType: 'application/json; charset=utf-8',
        //processData: false,
        //timeout: 1000000,
        //async: true,
        //cache: false,
        dataType: 'json',
        success: function (rsp) {
            document.getElementById('dvUsers').innerHTML = rsp.d;
        },
        error: function (error) {
            document.getElementById('dvUsers').innerHTML = error.d;
        }
    });    

I have the following ajax code which am using to get the user details from the server. Am generating the html table from the server side and return the structure as a string. This works fine but i get undefined when user records are too many. What is limitation of data that can be passed in ajax ? Is there an alternative i can use to generate html table in the client side ?

 var param = {};
    param.CompanyID = $('[id*=txtCoID]').val();
    $.ajax({
        type: 'POST',
        url: 'AjaxAsync.aspx/BindActiveUsers',
        beforeSend: function () { },
        data: '{P: ' + JSON.stringify(param) + '}',
        contentType: 'application/json; charset=utf-8',
        //processData: false,
        //timeout: 1000000,
        //async: true,
        //cache: false,
        dataType: 'json',
        success: function (rsp) {
            document.getElementById('dvUsers').innerHTML = rsp.d;
        },
        error: function (error) {
            document.getElementById('dvUsers').innerHTML = error.d;
        }
    });    

• javascript
• jquery
• ajax

Share Improve this question Follow asked May 3, 2017 at 10:39 bwanamainabwanamaina 30944 silver badges1313 bronze badges 13

• which variable exactly is showing as undefined? For instance, I know for a fact that, if your code is going into the "error" callback for any reason, then error.d does not exist - check the jQuery ajax docs for what fields are actually present in that object. If you are going into the "error" callback, what's the error being returned by the server (you can see it in the browser's network tab, in the developer tools)? And also, how many records is "too many", exactly? How have you determined this? – ADyson Commented May 3, 2017 at 11:00
• 1 @ADyson The undefined is in the 'error' but when i add a limit to the records server is returning, code runs error free – bwanamaina Commented May 3, 2017 at 11:41
• 1 this is what i get as the error 500 - undefined – bwanamaina Commented May 3, 2017 at 12:18
• 1 I only changed the config file as advised in answer below,i used to get error 500 coz of timeout, am using an aspx project – bwanamaina Commented May 4, 2017 at 13:47
• 1 No errors in browser console, suggest the request is fired coz when i limit records to be returned by server, my code works perfect, am generating a html table with around 3000 rows. – bwanamaina Commented May 4, 2017 at 13:55

 |  Show 8 more ments

4 Answers 4

Sorted by: Reset to default 2

The problem was caused by the request timeout but not the size of the data. Since I was using ajax updatepanel in aspx project I added AsyncPostBackTimeOut='300000000' to my ToolkitScriptManager tag and added

<system.web.extensions>
 <scripting>
  <webServices>
    <jsonSerialization maxJsonLength="300000000" />
  </webServices>
 </scripting>
</system.web.extensions>

to my Web.config file as documented here. Now I can load the data without any problem though it's taking some time depending with the number of records returned. Thanks for your help.

There's no maximum data size imposed by HTTP. The limitation you're facing is imposed by your web-server so you'll need to increase the cap.

Another solution could be to partially build the HTML table and create a button that when pressed loads the rest (or use an EventListener to capture the page scroll position and keep loading while the user scrolls). If this approach meets your requirements, you shouldn't face any kind of data limitation.

According to this question and this question, there isn't a limit to the amount of data transmitted in an AJAX request. The browser or your server could be imposing limitations. Have you tested your application with multiple browsers? Which type of server? Can you attempt to find the approximate amount of data where the request fails?

This question reveals there should be configuration values to allow the massive transmission. One answer proposes converting your data into a JSON string, which you have already done.

Regarding an alternative way to generate the table, my initial thought was to break the request into multiple requests (possibly based on the number of user records). Perhaps you could fall-back on this method if you can't resolve the problem. @Arnau Fernández's suggestion to load the data in small chunks as the user scrolls is similar and clever. If you don't want the scroll and load behavior you could send all of the requests at once, which would still provide the security of eliminating the massive request with smaller ones.

I see the .aspx in your URL. If you're using asp, you could try the solution here, which adjusts a value in the web.config file. If this doesn't help, then more information about your technologies would be helpful.

Pasting their configuration for reference:

<configuration>
    <system.web.extensions>
        <scripting>  
             <webServices>                                                   
                 <jsonSerialization maxJsonLength="1000000" />                 
             </webServices>
        </scripting>
    </system.web.extensions>
</configuration>

        JavaScriptSerializer js = new JavaScriptSerializer();
        js.MaxJsonLength = Int32.MaxValue;
        string str = js.Serialize(YourList);

when the json string size is big, it can't send the data to client side, so you have to increase the size like "Int32.MaxValue". No need to configure web.config file.