Asynchronous Refresh

With the pace with which the web standards and technologies have been evolving, periodical page refreshes to fetch new data from the server has become a thing of history for quite a long time now. Everyone would remember times when pages used to refresh every minute or so when following the updates of a football or a cricket match on the Internet. And those of you who were observant enough would have noticed how things don’t work the same way anymore, and about how updates are delivered seamlessly without any signs of page reload.

I have been working on creating a simple Social Chat-Room for a college project assignment, and while in fact most of its coding is already done, I know the code that I have used is ugly and annoying, talking of how the wall of the chat room gets rendered. I have set the frame containing the display wall to refresh every 10 seconds using the following piece of code in the head section of the page.


Easiest thing to do. And ugly too.

And now comes along a real project, which gives me a good reason to start learning. I’ve got to work on developing a “Live Updates” module for this quite-happening football blog, BigFourZa, a blog about the Big Four of the English Premier League. Something which demands me to start learning. Something for which a continuously refreshing page isn’t going to cut it out.

Time for AJAX. Time for jQuery.

What this Asynchronous Refresh is about is making calls to the server-side document and loading its contents to make it available for dynamic rendering on already present elements in the currently loaded document without any whole page refresh as such. Say we have a page, scores.php, which reads entries from a database and displays it on screen. Now when we add new entries into the database, unless we force a page refresh, the new entries are not going to be displayed on the page.

What we can do with jQuery is asynchronously poll the scores.php from another page, say main.php, and display the contents of scores.php in it. The code of asynchronous refreshing is what is of our interest now, and so the main.php would be something like this:


.
.



.
.

The interval is set to 10000 msec, so every 10 seconds the function is called and scores.php is loaded inside the element <div> with id=myscores, of the currently loaded page, which is main.php. And that’s all it takes. Not to forget to include the source of the jquery.js in main.php. And anyhow, one flaw with this code is that it takes initially 10 seconds before the document is loaded for the first time. For this, you’d have to add this into the head section:


Now to debate, there are much better methods to achieve this than polling, but in terms of simplicity nothing beats polling.

If someone doesn’t have much of any problem with understanding the Document-Object-Model (DOM) of an HTML webpage, then the documentation that is available on the Internet for jQuery is alone sufficient to start playing with it. And for me, it really is time to get working with things. Maybe soon, I’ll be ready with a working prototype of the Live Updates, or with the updated no-shabby-code Chat Room for you all to see.



1 Comment

  1. Rohan

    March 22nd, 2012 at 7:29 PM

    jQuery all the way!



Comment




TweetBytes is now @Tweet

@tweetbytes is now @tweet, thanks to txtWeb’s recognition of the popularity of the app amongst txtWeb users. Now that it got a snappier keyword, what does it mean for the current users? Simply put, it just got better, and easier to access. Existing users of @tweetbytes needn’t do anything to access the application through the […]

Read More
View the Blog »

55444 Search for Chrome

Got a week's break, and at least one night had to be some night of hacking. I was going through ...

My First WordPress Plugin

With great delight, I have contributed my first official piece of code to the WordPress repository! http://wordpress.org/extend/plugins/stack-overflow-activity-feed-widget/ I was always eager to ...

Copyright © Bits and Bytes | Arjun Abhynav. Powered by WordPress.