Update HTML when change is noticed in MySQL Database [duplicate]

Question

So sorry if this is a total newbie question, but I can't seem to find any answers to my question out here on the great web...

I'm building a site, where it depends that some of the data on the page needs to be updated automatically....

More specific, when a change is made in the MySQL Database. Let's say for instance that the value of a row in the database is 10, and that changes to 11, I need the page to automatically get this from the database, and update it on the site. Also, if possible, is there any way I could make the numbers "pop out" a little bit, when the actual data is changing?

<div class="container hero-unit">
    <h1>Test Data Change</h1>
    <p>231</p>
    <p>7</p>
    <p>14532</p>
</div>

Let' say that these numbers are fetched from the database, how would I use 'AJAX' to auto change this data when a change is made to the database?

If this is possible at all, I would appreciate every contribution.....

Answer 1

This process is called polling. There are basically two ways of doing this which are long polling and short polling

In Short polling you basically make a timer and get info from a php file which outputs db data every few second or so and then you compare data to see if data has been updated or not.

Then there is long polling which is preferred as it puts less pressure on the server. FB uses long polling. In this process what you basically do is you make a request to a a php file and the php file doesn't response until there is update in database so instead of making a ajax request to php file every few seconds here it is done every minute or so putting less pressure on server.

You can find long polling example here https://techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery

More examples here https://gist.github.com/jhbsk/4353139