[AJAX & JQuery] How to update html content when new Data is added into database

[AJAX & JQuery] How to update html content when new Data is added into database


I have a database which contains several data that is continually updated with new ones… The result i want is whenever the database has a new data, the page automatically retrieves the data in the database (via AJAX, so no page reloading is involved) and display it to the page.

Of course, I can use

    // Query Database
    // Show to page
}, xTime);

But it doesnt seem to be efficient since i cant select the text / highlight the contents in the page because its updated every time… Is there another way i can do this?

An example for this functionality is m.facebook.com 's message page… It sends the message you typed and whenever you receive a new message, it just displays it without loading, and am sure it doesnt use setInterval since i can select all of the text! Thanks!


I belive what you need is WebSocket.

WebSockets enable the server and client to send messages to each other at any time, after a connection is established, without an explicit request by one or the other. This is in contrast to HTTP, which is traditionally associated with the challenge-response principle — where to get data one has to explicitly request it. In more technical terms, WebSockets enable a full-duplex connection between the client and the server.
In a challenge-response system there is no way for clients to know when new data is available for them (except by asking the server periodically —polling or long polling), with Websockets the server can push new data at any time which makes them the better candidate for “real-time” applications.

And and alternative would be https://www.w3schools.com/html/html5_serversentevents.asp