Updating specific areas of a page without reloading the entire page

I think it's easier to make sense if you could take a look at my site in question first: http://www.10winstreak.com/

The main content area is a stream from Own3D.tv, and it's just an iframe (line 342). My goal is if I click a particular stream on the right side, the iframe would load the corresponding stream, and the left side bar (Last 10 Matches) would also load the corresponding data. For example, if I click "Bei's Stream" on the right side, the iframe would show, well, Bei's stream, and the left side bar shows what it is showing right now. But when I click on "Roy Killany's Stream" the iframe would then load that particular stream, and the left side bar populates with another set of defined data.

I guess I could achieve it by making separate pages for each stream and just duplicate the p开发者_如何转开发age layout so the user has the illusion of staying on the same page, but I'd like to learn the proper way to do it. My research so far tells me that ajax is probably the best option, but I was wondering if there's a pure PHP or even HTML\CSS way of doing this?

Thank you!

---

You can somewhat accomplish this using just HTML by setting the name of the frame and pointing the links target to that frame:

<a href="somepage" target="myframe">My Link</a>
<iframe name="myframe" src="defaultpage"></iframe>

But this wouldn't let you change the link when clicked on to show that its the one thats been clicked. You could also use jQuery which would let you change the link to show that its been clicked on. For more information on jQuery have a look at their homepage (www.jquery.com)

---

Well.. you could use jquery .load()

http://api.jquery.com/load/

and an example with loading image.. http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

I suppose if you want the content to still be there after refresh or when the user gets back. You might want to use it with jquery cookie plugin to make browser remember which content was loaded..