Should I be using JSON or XML or something to fetch a pages contents every X amount of time?

Question

index.php has this jquery code which loads notifications.inc.php into a div on the page every X amount of seconds

<script type='text/javascript'> 
$(document).ready(function(){ 
     var updatenotification = function(){ 
          $('#notificationcontainer') 
               .load('notifications.inc.php') 
               .fadeIn("slow"); 
     }; 
     var auto_refresh = setInterval(function(){updatenotification();}, 5000); 
     updatenotification(); 
}); 
</script>

notifications.inc.php

<?PHP
if(notifications != 0){
?>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="box1r">
<tr><td height="25">Notifications</td></tr><tr><td colspan="2" bgcolor="#FFFFFF" height="11">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<?PHP
if($item1 == 1){
    echo 'AN HTML TEXT LINK HERE';
else if($item2 == 1){
    echo 'AN HTML TEXT LINK HERE';
else if($item3 == 1){
    echo 'AN HTML TEXT LINK HERE';
else if($item4 == 1){
    echo 'AN HTML TEXT LINK HERE';
}
// ect. ect
?>
</table></td></tr></table>
<?PHP
}// end main block, only show the header "Notification" text if there is at least 1 notification ITEM to be shown
?>

Now this works well for me, to show when a user gets new messages, comments, photo comments, friend requests, things like that on there homepage.

My site is pretty high traffic and I would like to improve code in every area, (please save the pre-optimizing is evil speech, I have nothing but time and have been working on this site for 2 years, I want to make everything to the best of my ability)

SO I am thinking that this could be done better? FIrst I know I should re-code the tables to use DIV's but for now I am going to use this table setup on this particular page.

So to save bandwidth and performance, should I be using JSON or something instead of loading the contents of another page every 10 seconds or so?

If I should use JSON or something please explain a little bit, I am new to JS so I am not sure how to implement it exactly

Answer 1

One way you could go about this is to place the basic HTML for the notifications table on every page, but make sure it's hidden with CSS. Then you can do a simple JSON post (I would recommend JSON for this because it's a very simple post requesting very simple data so XML would be overkill). Then if the post returns a notification you put it into the table and flip the display from none to block (and here you can add any fade-in/fade-out stuff you want anything like that).

This would cut down on the number of bytes sent back and forth in a pretty big way which will both save on bandwidth and help speed up the posts for those with slow connection.

Answer 2

Take a look at cometd for this sort of thing. This is largely a solved problem already.

Answer 3

The idea is that rather than retransmitting the entire formatted HTML, the tag and all the rest, instead you just send the data, possibly even just the new data. The javascript already loaded in the browser looks at the new data and adjusts what is displayed, or perhaps re-creates a portion of what is displayed.

So you gain by possibly transferring less data, possibly very much less data.

The cost is quite a bit of complexity in the Java script.

The advantage of using JSON as the format of the data you transmit is that it's very little effort to parse - that's because the format is javascript.

There's plenty of libraries and examples for doing all this, so the actual coding effort is not too great.

Answer 4

If I'm reading this correctly, you're sending an entire stream of notifications on every poll. I think a far better optimization would be to only ask for new notifications. You can put the timestamp for each notification somewhere in the table row, then request notifications.inc.php?since=1234567890. This would return only new table rows, and you can insert those into the table rather than replacing the whole thing.

JSON would be the next step, yes; just create an object on the server, encode it with an existing library, return it to the client, and have jQuery expand it into a Javascript object for you. If you wrap all the guts up in libraries, you're really just moving an array+hash structure from the server to the client.

Answer 5

using JSON is a good idea instead of XML. Because size of data that is being transferred also matters. In this regard, JSON is far more lightweight then XML. Also, as Steven said, XML would be overkill because JSON fits into javascript object format. So pulling out data is simple compared to XML.

Answer 6

In my latest project I am using JSON to communicate the results to the front-end. I think it works wonderfull with JQuery. Don't forget JSON is built for javascript (JAVASCRIPT Object Notation)