When using ajax calls to update data on a web page, what is the most effective way to synchronize changes with a database? For example, if I have a comment form that needs to work asynchronously. I write JS code to submit the form data to the database, but how can I display this new information to the user without needing to refresh the page? Currently, I see three potential solutions:
In the callback function, process and insert the new data into the appropriate element on the page after receiving confirmation from the server.
Send all the necessary data from the server in response, then use JS to insert everything into the element.
A combination of options 1 and 2: send only the processed new data as a response from the server and insert it into the right place on the page.
I find issue with option 1 because of code duplication, having to implement processing logic twice. Option 2 raises concerns about sending excessive data from the server. Alternatively, option 3 seems like the most favorable choice, although there may still be some back-and-forth data overhead. While these inefficiencies might not impact system functionality significantly, I am curious if there are alternative solutions or best practices for ensuring data synchronization.