Building an AJAX Application (6): On-demand Tree: how big is the web tree?
Preface
This page demostrates an "On-demand Tree" where child nodes are loaded when users expand
their parent node. The tree in this demo acutually work as a web search tool: it shows the
components like links and images in web pages as their child nodes. You can select different
type of "Transport" to update the tree and you can choose what type of components to show
as the child node: links, pictures, or video...How big can this tree be? Find out youself
before it is too big to be contained by your browser;=)
Compatibility: IE (6.x, 7.x), FireFox (1.5.0.4), Mozilla/Netscape(7.2), Opera(9.0)
were fully tested and worked in XP (v2002. sp2).
A. Here are some issues you may be interested in:
View the tree in a variety of ways Show details.
There are following in you want to prove each approach you select is really using the mean it is supposed to:
1). Proofing other approaches except AJAX work when activeX is turn off.
- using IE6.x and go to "Tool|Internet Options...|security|internet (icon)|Custom Level;
- click at Reset if you can/want
- select "Disable" on "Run Active Controls and plug-ins" under "Active Controls and plug-ins"
- now go back to the tree page and search "using AJAX". You will can an error saying
"Automation server can't create object" meaning creating XMLHttpRequest object failed.
- then, change the "using" field to anyone other than AJAX, say "Dynamic Hidden Iframe",
it should work.
Try it (loaded from remotescriptguru.com) here
2). Proofing Cookie approach required Cookie on
- turn your browser Cookie off
- try the serach using "Cookie"
You may also notice sometimes Cookie appoach failed because the size of the return is too big (exceeds
the limitation for each site or for each cookie. The size is browser depended).
Try it (loaded from remotescriptguru.com) here
3). Proofing that Dynamic Scripting and only Dynamic Scripting can access different domain as part of a page.
The following link will open a similar same tree page (I made it a htm file instead of jsp since
I don't have JSP supported in coolshare.com) from Coolshare.com instead of RemoteScriptGuru.com where the
tree content is loaded from. You should get a "permission denied" message.
Try it (loaded from coolshare.com) here
Design goals behind the view Show details.
1). Using a variety of means to communicate with server asynchronizely to compare their behavior.
The section below the tree in the popup tree window lists the issues about how different
approach reacts differently with server and browser. It is a good place for you to choose
what is the proper means for your communication need - not always AJAX. Hopefully, you will
be better agree with me about my initial point, "It isn't called AJAX but Remote Scripting".
2). A single js object, Mark's Communicator, is used to implement all the approaches
The page demostrates how javascript can be used to do OOP and how OO javascript can be used for
remote scripting:
- Inheritance
As you can see from the tree page, all the concrete Communicators
share functions in the super class Communicator such as "init" while "override" some empty
function such as "send". The Inheritance provides an environment for the CManager make use
of javascript's late/dynamic binding (See "polymorphism" below) to achieve the transparency
of transport (See the "Encapsulation" below).
- Encapsulation
All the communication details are wrapped in the Communicators. Only things you need to
do when using Mark's Communicator are
a). creating a Communicator Manager, CManager. CManager provide followings
- factory Concrete Communicators (We don't need a Abstract Factory
pattern here since javascipt is an inteprete language with running
binging so we dynamically construct (eval) the instance of concrete
Communicator such as AJAXCommunicator).
- Provide a global reference to the Communitor community so that in
Approaches like Dynamic Hidden Iframe and Traditional Frame, we
can retrieve the reference of the corresponding Communicator
the complete the update process.
- Using pooling of Communicator to save resource and time spent on
creation of Communicators.
b). calling getCommunicator on CManager to get a concrete Communicator
c). initializing the Communicator with callback handler
d). calling send of the Communicator
e). retrieve return data from res field of the Communicator
in your callback handler.
You don't even need to know what mean the Communicator uses to perform the
communication with server. You may say, it is not that important to make
the "Transport" transparent. Well, in some cases, it is really important.
For example, when building a portal page, you may need to both make calls
to more than one servers and allow each part (loaded from different servers)
to be able to communication to each other. Since AJAX provides more general
functionality and data format such as XML without much server side support
while Dynamic Scripting allows cross domain but requires server side support.
And you also want to cover those users with activeX cookies off and so on.
Do you want the Communicator's users to deal with a lot of if statements to
figure out when to use AJAX and when to use Dynamic? CManager can deal with
all of these issues. It can factory a best-fit Communicator according to
the given environment while its users only need to call getCommunicator
and focus on their own business.
- Polymorphism
Method "send" is good example of polymorphism where each concrete Communicator
implements its own version of "send" while the event handler only obtains a
"Communicator" and call its "send"
3). Demostrate how Closuer is used to preserve states.
There are many cases in the tree states need to be preserved. (to be completed)
|