Data Streaming on the Web

Background

So, if you go to https://foursquare.com/, and look under the header "Recent Activity", you will see a constantly updating list of updates from various members of Foursquare all over the world.

New updates slide onto the top of the stack, and the oldest one slides off (probably using JQuery or something, but that's not my question).

I was informed by another member of Stack Overflow that this is actually more or less a pseudo news feed. When you load the page, it makes a c开发者_Python百科all to the database and grabs the 30 newest records, and then displays the 11 oldest out of that 30 on the page initially, and then sets a timeout to slide off the oldest/slide on the newest. However, it is only consistently looping through these same 30 records (you will notice this if you leave yourself on the page without refreshing or anything). It will not make any other AJAX calls to get new messages from the server. This only happens when the page loads.

Question(s)

1. Is there a reason that they are doing that?
2. I want mine to be setup so I can grab a set of records when the page loads, and display them (similar to Foursquare), however, I would like (after I loop through the ones that I brought into the DOM), to then make another AJAX call to see if there are any newer, and seamlessly integrate these new ones into the same flow. Basically, think of this as a mash-up between Twitter and Foursquare. Twitter lets you know when there are new messages, and gives you the option to pop them on top of your feed, and Foursquare just brings the new ones in on a page refresh, and that's it. What would be a way to start thinking about this (in terms of efficiency, architecture, etc.)?

I'm up for also hearing if there are any reasons why I shouldn't be doing this.

Completed So Far

So far I have SQL Server stored procedures that let me obtain a set of records (from a given set of a circumstances on the site - off topic). I can call these whenever (obviously). As part of these records coming back from the database, is their unique ID. When I display them in the DOM, I am using a <span> tag to hold the ID of each message, so I have the ability to make an AJAX call back to the server and also pass in the last ID that was shown to the user, and then I also have a proc that will only return ones with a greater ID (entered later).

So as you can see, as far as if it's technically possible, I know it is. I can display a whole bunch of messages on page load in the DOM, and then as soon as it gets to the last one, make another AJAX call to the server to pop more on top, and keep updating them. I'm mainly asking the two questions above, is this a good idea (to have that many messages in the DOM at once)? And if there are any better, and more efficient ways I can be doing this.

Thanks guys.

---

As of yet, AJAX calls are probably the most efficient. Once Web Sockets finally stops morphing and shfiting versions, it'll be the way to go. Check out my question on this and the excellent answer (be sure to read the comments) on it: What's the Best Way to Open a TCP Stream to Server?

As to your main questions, is it a good idea? sure. Now granted, giant corporations that make gazillions of AJAX calls have nice big server rooms full of servers doing the dirty work. If you don't have that kind of server power, you might consider making AJAX calls on a timer, say, every minute or so, to reduce server strain.
Is there a better way? Not really, until Web Sockets (see above) evolves completely. AJAX calls seem the best choice to me (making AJAX request via the very easy jQuery.ajax method, returning via the server in JSON, parsing with jQuery and filling into the DOM. very nice, really.)