most efficient way to update a site (lots of data) with no refresh?

Question

I am working on a web project that will require quite a bit of updating from multiple users and large ammounts of data.

The expected ammount of data is 70 unique rows each with 14 fields that need updated regularly. That's a total of 980 fields.

I first attempted a series of synchronous ajax queries to the database using a for loop to update all the fields. This caused a large hang. I would say for 20 seconds of my 30 second time between updates the page was frozen.

The next attempt was to run the ajax queries asynchronously with onsuccess updating the fields in a for loop. This aleviated the slow down, but I was getting weird issues. I think my for loop variable changing was causing things to be getting written to the wrong HTML elements.

Currently I am having a back end .asp page write the HTML, and clearing the innerHTML of the containing div, then setting div.innerHTML = transport.responseText. This seems to be working pretty well for me, but I am just curious as to what others would have done to update this much data given the tools available (vbscript, javascript, and an Access database).

The data across all work stations will be the same, and multiple users will be interacting in real time editing the data. However, they will each be concerned with updating their own portion of the data, but there is a need to have it all be updatable and viewable in its latest iteration by all users.

Answer 1

How are the users expected to interact with the page? Will multiple users be working on the same data at the same time and are they expected to see each others results? You tagged this asp.net but mention only being able to use vbscript, javascript and access - how is this asp.net?

Edit:

Thanks for the clarifications. Would having an edit/save button on each row help? The rows would be read only until the user needs to edit their data (I'm assuming they're editing each row) the data would refresh and the row would be locked for editing by any another user. When the user is done they click save and their data is updated, the row is unlocked, and the page's data is refreshed. You could additionally have the ajax set to run every few minutes to get the latest when the user is not actively editing. Also - depending on how your data is structured - you should only need to get data that has been changed since the user's page was last updated. No need to get everything every time. Your update should also be small, limited to just the data on the user's row that they're editing.

Answer 2

An HTML table with 1000 fields isn't a "large amount of data".

If you give an ID to each cell and get the data using JSON or simple CSV and then update all with javascript it would be faster because the browser doesn't needs to redraw the table and make new DOM structures.

por example:

Imagine that the server gives you the data this way: 12,234,564,423,1223,2413,133,113,5443...

then in javascript you can make:

var data = responseText.split(',');

and then fill the table (suppose that the table cells have id names like CELL_0, CELL_1, CELL_2...).

for (i=0; i<data.length; i++) {
  document.getElementById('CELL_'+i).innerHTML=data[i];
}

that's it.