Question

What is the best way to achieve synchronization between database and web page when using ajax calls to change the data? To give an example, let’s say I have a form for adding comments and I want this to work asynchronously. Hence I create a JS code that submits that form to a database. What is the best practice to display this new data to the user without having to refresh the page? At the moment I can think of 3 solutions to this problem:

1. Put JS code in the callback that will process and insert this data to the appropriate element on the page after we receive an ok mesage from the server.

2. As a response from the server, send all the data that should be displayed in the element and then simply use JS to insert everything.

3. Kind of a mix between 1 and 2, as a response from the server send only the processed new piece of data and insert it to the appropriate place.

I don’t like the code duplicity in 1, i.e. we have to implement the processing logic twice. I also don’t like the 2. because of the overhead of data that is sent from server. As for 3. I like this approach the most, but there is still some overhead of data sent back and forth. I know these overheads will probably not affect the functioning of the system in most cases, but I am wondering whether there is any other solution to this problem and what is the best practice to make sure the data is in sync?

Answer 1

You might want to consider using Models and Collections like how backboneJS does it. It’s sort of a “local copy of the database”. First, your model fetches just a few records for display, like the top 10 things in a todo list. the model has CRUD methods where you can manipulate the data in it.

Then for your interface, you have separate code for views. these views hook up to the model, do CRUD as well as listen to model data changes which can be from the current module interface or another part of your interface. if one part of the page changes the data, the rest that are hooked on to the same model gets notified. models can be anything, and it may represent one or a combination of tables in the database

similarly, that model will have an AJAX sync capability. every data modified in it gets reflected to the server via an AJAX call. when that call completes, you notify all hooked interfaces to update accordingly. since the data is contained in the model, you only need to send changes to the server and listen for a success. as for live data from the server, you can create some polling capability in the model to update it’s data. if there’s change, notify all hooked interfaces.