[SLUG] Single Page, No Refresh site, As requested

From: Christopher Hotchkiss (christopher.hotchkiss@gmail.com)
Date: Tue Dec 28 2004 - 01:04:10 EST


Hey everyone,
This evening at the St. Pete meeting I got talking to a few guys who
seemed to be rather interested in my client side javascript. They
asked me if I would post it and my technique. So without further ado
here it is:

First the single php page:
http://home.post227.org/~cah2240/main.txt

Second a running copy:
http://home.post227.org/~cah2240/main.php
Username: do
Password: do

Please note that this currently only runs in Mozilla based browsers. I
have no knowledge of how to debug IE but if anyone knows how, e-mail
me and I will have you test some code.

Thirdly an explanation:
The goal of this project was to mostly port the project wiki.sf.net to
a single page and never have it refresh. Now making it a single page
is a rather easy task, but never having a refresh is slightly harder.
According to a few recent write ups regarding how gmail and other
google products, there is more to the current crop of browsers than
meets the eye. Specifically they can, in Javascript, make client side
http requests in the background. The function is "new
XMLHttpRequest()". With it one can invoke http style requests.

For example this line of code will display the text of google.com in
an alert box:
xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", "www.google.com",true);
                xmlhttp.onreadystatechange=function() {
                        if (xmlhttp.readyState==4) {
                                alert( xmlhttp.responseText);
                                }

Now this doesn't seem to be very useful until you learn about the
innerHTML method. This method allows you to take HTML fragments and
stick them into the webpage as if they were a part of the initial
webpage load. See www.quirksmode.org for more information. Couple this
with some DOM modification code and you have a "no refresh"
page/site/application. The biggest gain with this technique is the
reduction of bandwidth that is required to make changes to the
webpage.

If anyone needs further information or clarification please shoot me
and e-mail or a reply and I will do my best to help you.

Happy Hacking!!!

-- 
Christopher Hotchkiss
(813)960-9273
http://www.post227.org
-----------------------------------------------------------------------
This list is provided as an unmoderated internet service by Networked
Knowledge Systems (NKS).  Views and opinions expressed in messages
posted are those of the author and do not necessarily reflect the
official policy or position of NKS or any of its employees.



This archive was generated by hypermail 2.1.3 : Fri Aug 01 2014 - 18:36:19 EDT