刷新页面没有屏幕空白？

Question

Okay, so I was wondering how GMail and things like that can update the emails in there without the entire screen going blank.

I am working on a web tools site here. As you can see on the right hand sidebar, there is a news feed that shows the recent events of certain members.

It is a simple PHP script that shows the latest events, these events are stored in a MYSQL table. This PHP script is then iframed for the sidebar.

I want the sidebar to automatically update. It can either update on a time interval (like every 10 seconds) or just when a new event is added.

I tried having a meta refresh that went every 5 seconds (on the PHP script)...it did not work well though. Every 5 seconds the entire sidebar would go blank and then re-appear. Plus the loading wheel for the site would constantly appear every time the sidebar refreshed.

Is there a simpler way to do this? Maybe using some type of javascript event to check for new events and then spit them out, instead of refreshing the whole page?

Thanks for any help!

EDIT: Okay Guys Thanks For Your Help! I got it going with AJAX! However, I am now running into a different problem...Please continue reading...

I was using javascript to display the time in the bottom right corner of each event. I was using a code similiar to this...

<div class="event">
<p>The event text</p>
<script type="text/javascript">
document.write(get_time(1332900003));
</script>
</div>

This would be the HTML actually stored in the database. The problem is that the AJAX is grabbing this code, spitting it out (onto the iframed page), and then the time snippet is not being executed (everything else works fine).

I would prefer to use Javascript over PHP to display the time, because with JS you dont have to worry about timezone differences.

Is there anyway I can fix this? Thanks again for the fast responses! :)

Answer 1

Essentially if you want to mimic the concept of how GMAIL and various other sites render a page and then manipulate it there after without making the page reload between transactions as j08691 indicated in a comment to you AJAX is the methodology your looking for, however it requires knowledge of JavaScript and some server-side scripting such as PHP in your case.

For the sake of ease when building a scaleable piece of software of even just a web site in general I would suggest looking into a JavaScript library like jQuery, Prototype, Dojo, or the like. My personal flavor is jQuery as in my own opinion it is very stable, has a large support community and all around is easy to learn over all.

It will aid in rapidly developing JavaScript based code that will be cross browser compliant without having to write long lengthy scripts in native javascript to do the same as you could more easily achieve with a library backing it up.

http://www.jquery.com - core library

http://www.jqueryui.com - extension of the library

plus there's hundreds of thousands of little plugins you can pick up to aid develop your overall user experience quicker as well.