There are two different components to the operation you'll be doing. One is the graphical representation of the data in the browser. This is also what is requesting new data from the server ever 30 seconds. The second part is what it's requesting from. This part must know what is being requested of it if you want it to be different each time.
We'll put them in separate files for now. The web part will be called "web.php" and the fetching part will be called "fetch.php". Here are the critical features of "fetch.php":
<?php
require_once 'dbconfig.php';
$row = $_GET['row']+0;
$query = $db_con->query("SELECT * FROM rds ORDER BY news_id DESC LIMIT $row,1");
$fetch = $query->fetch();
echo $fetch['message'];
?>
This is the same as your first script, except that it can now be told which row of the database to return. Data passed in the URL can be fetched using $_GET as I did here. In this case, if I were to request the URL "fetch.php?row=7", the value of $_GET['row'] would be 7.
"web.php" contains something like this:
<div id='content'></div>
<script>
i = 1;
setInterval(getdata,30000);
getdata(){
microAjax("fetch.php?row="+i,printdata);
i++;
}
printdata(a) {
document.getElementById("content").innerHTML = document.getElementById("content").innerHTML + "<p>"+a+"</p>";
}
</script>
<script>function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest({mozSystem: true})}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};</script>
Here we use setInterval() to tell JavaScript to call the function getdata() every 30 seconds. It uses MicroAjax, a really lightweight Ajax parse that I appended into the second set of script tags, to request the data. Once MicroAjax receives the data, it calls printdata() which adds it onto the end of the HTML.
If you add JQuery in, it will of course make things much better. These are just the basics and even though they will look slightly different once you add CSS, they still hold true. In the end, this is what many good websites do now-adays instead of reload or passing you on to another page; they just use AJAX to get new content.
Depending on what else you plan to do, you might want to switch your AJAX library. I just used MicroAjax because it's small and light-weight and I could copy it right into the script (Google seems to have taken down the page they used to have on it so I can't find the CDN).
Hope this helps.