Beginning Ajax With ASP.NET (2006).pdf

Chapter 9
Like many other Ajax-style libraries and frameworks, this library provides a layer of abstraction around
the XMLHttpRequest object and shields the developer from having to know any intricate details about
coding against that specific object. The purpose of this library is somewhat different and more focused
than some other libraries available. Most other frameworks and libraries provide generic mechanisms
around construction and manipulation of the XMLHttpRequest object and manipulation of various
aspects or functionality surrounding that object, such as “supporting” technologies like X Path, XSLT,
and the like. This framework is specifically geared at the asynchronous loading and displaying of HTML
content, hence, the name HTMLHttpRequest. HTML content is the focus, and various mechanisms make
the loading and displaying of that content very easy, and make it occur in an asynchronous manner.
One of the major differentiators that this library offers is the unique way of invoking an asynchronous
request. A direct method call is not required (although this can be used) to load a remote document.
Instead, decorating tags in the document with a specific class style reference cause
an asynchronous load of the referenced document to occur and place it in a predefined location, dynamically
within the HTML document. An example demonstrates this best:
/*
HTMLHttpRequest v1.0 beta2
(c) 2001-2005 Angus Turnbull, TwinHelix Designs http://www.twinhelix.com
Licensed under the CC-GNU LGPL, version 2.1 or later:
http://creativecommons.org/licenses/LGPL/2.1/
This is distributed WITHOUT ANY WARRANTY; without even the implied
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*/
My HTML
Content Document
Area to have document loaded into
The preceding code example asynchronously loads in the SomePage.html HTML file from the
SomeDirectory directory and dynamically places that content inside the element, which has an
id of displayDocument. Notice that this code contains no JavaScript at all, yet the asynchronous loading
behavior of the XMLHttpRequest object is being utilized. The magic is in the naming system of the
class attribute of the element and the element.
An element with a class attribute that contains the loadinto-{control_id} text, indicates that when
this element receives a mouse click, the underlying framework should create an XMLHttpRequest object
and use it to perform an asynchronous request for the document specified in the href attribute. Once the
document is received, the framework then locates the control that has an id attribute that matches the
second part of the loadinto-{control_id} class attribute (that is, the {control_id} portion of that
attribute). In the preceding example, the control ID to search for is displayDocument. The document
that has been loaded is then assigned to the .innerHTML property of the control.
Additional functionality includes creating a “blind” toggle where a link is clicked and toggles the display
of a content section, which is often used on sites that display articles and contain a Read More link
to expand the entire article. This also utilizes a similar method to that described previously with specific
class attribute definition to achieve this dynamic behavior.
200