I'm currently developping a web app to control the lighting of my home
I have created an html page per room in my house. On that page you'll
find 2 to 6 images to switch the lights on/off (eg in the master
bedroom, you'll have 4 images: switch on the main light, switch on
reading light on the left side, switch on reading light on the right
side, switch off all lights in the house and go to bed).
Switching lights on/off can be accomplished with a servlet (eg. <a
name=0/1/6&action=0"><img src="masterBedRoomMainLight.gif"></a>). This
will switch the light 0/1/6 (eg. main light in the master bedroom) to
value 0 (off).
The class is used to display the img in a particular way so the user
can see which lights are currently on and which lights are currently
I would like to know how I can refresh my html page constantly.
So if somebody switches on the light (not through the web app, but
using a regular switch), the href should be updated to something like:
<a class="currentStatusOff" href="/SwitchingLightServlet?
Should I create 1 xmlhttprequest that polls every 5 seconds if the
status of any of the lights has been changed and updates each href on
the html-page based on some json-object?
Should I create 4 xmlhttprequests (in my example) that polls every 5
seconds if the status of that particular light has been changed and
updates that particular href based on some json-object?
Do you have an example of using the data of a json-object to update
the class of my href link and the action value (0 or 1) of the query
parameters that are being sent to the servlet?
Thank for your help and insight.
One way is via iframes. Search around for a tutorial, but it involves
the ability for pages/scripts to refer to elements contained in other
pages in a hierarchy, or parent/child relationship. Not AJAX,
actually. HTH, AS