Welcome!

Machine Learning Authors: Zakia Bouachraoui, Liz McMillan, Roger Strukhoff, Pat Romanski, Carmen Gonzalez

Related Topics: Machine Learning

Machine Learning : Article

Real-World AJAX Book Preview: Digging into the XInclude Binding

The XInclude Binding serves as a good example showcasing how such bindings can be created

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

Digging into the XInclude Binding
The XInclude Binding serves as a good example showcasing how such bindings can be created. If you are familiar with XBL bindings, the one aspect that is missing in the JavaScript version is the use of a specific template. This can be readily overcome within the constructor, especially since, unlike the formally defined binding languages, this approach does not create "shadow trees," which are somehow distinct from the rest of the DOM.

In this particular instance, the constructor does some minor bookkeeping, then calls the refresh() method on the object, where most of the real work is done. Within refresh(), the routine tests to see whether the src attribute is the same as it previously was. If it is, then no action is taken and the method ends. If src does change, the associated file is loaded asyncronously. Note that even if only a fragment is to be displayed, the whole file is still downloaded. However, in general, such a download typically is cached locally, which means that as soon as you load the base file once, it will automatically rely upon the cached version. You can disable this behavior (and almost certainly will want to) in cases where you're developing the XML and need to see updates by setting the disable-cache attribute to "yes." This has the effect of forcing a new version of the referenced document to be downloaded.

The buttons attribute, when set to "yes", provides a means of navigating through all elements that have their own ID element. When set, this loads in the base URL (before the hash) of the document source and uses the getXPath() function defined earlier to retrieve all ID'd elements. This is then used to generate buttons both above and below the main body of each identified section. Additionally, it will denote using a CSS class, which button is the currently selected one (class="xincludeBut tonSelected") as compared to those that are not (class="xincludeButton"). Again, by using CSS, this allows the designer to change the output as appropriate.

The buttons also contain a title attribute that reads from the first child element of the section and displays the result as a floating tooltip. This way as users mouse over the buttons, they can see at a minimum the starting line and more than likely the section title for that section. Note the use of the regex commands to ensure that potentially dangerous characters are escaped.

The title attribute for the <xinclude>element , on the other hand, indicates the element within the document source that should be used to display the title for the article over the buttons. This will always be the first element of the given name in the document (so that title="title" is usually a safe bet, or title="h1"). If it is left blank (or not included), then no title will be displayed and no space reserved for the title. The title will always be displayed as an <h1 class="xincludeTitle"> element, so CSS should be set accordingly.

The key to changes in the control are determined by the DOMAttrModified event, which is fired whenever any attribute on the element changes. Note that it is still necessary for you to determine which attribute changed (and the only one that is live in this example is the src attribute, but extending it should be fairly simple. When the src attribute changes, this immediately invokes the control's refresh() method, updating the internal contents.

As important as these are, the Xinclude component incorporates one other key feature - the TOC. The TOC will extract from the incoming document all of the ID keys, and will use these and the first element contained within a given ID section to create a table of contents. The interface will then display a TOC button, which, when pressed, will bring up the table of contents. Clicking on the TOC link will bring up the appropriate section within the container while simultaneously setting the appropriate buttons. Note that this object will only be displayed if the button interface is also displayed.

AJAX and the Server
There's some pretty neat eye candy that's beginning to emerge in the AJAX space, largely on the strength of improved CSS support and a larger body of developers playing with JavaScript in a serious way. However, at the end of the day, it is still the ability for the server and the client to communicate with one another that lays at the heart of the power of AJAX, and losing sight of this particular point can have a number of fairly dire consequences.

The bad news for IT managers: AJAX has the potential to force some fairly radical changes in the way that applications are being written on the server side. The good news is that most of these changes will result in applications that have a cleaner pipeline between client and server, with considerably less inline code needing to be written to support the clients and with a potentially lighter load on both the system databases and the Web servers serving up the AJAX applications.

Now, a word about this ... over the years, I've written any number of Web applications, many of which ultimately ended up being exercises involved in doing about four primary activities.

  • Reading from a database using SQL statements in order to get the information being presented
  • Interspersing variables containing the information with handy "server macros" and other code to generate low level UI
  • Taking the information coming back from the client and writing a translator that would then map it in some fashion to the back-end datasystem
  • Persisting intermediate state on the server
This idea has been a key part of Web server/client design from the beginning, and gained considerable traction in the late 1990s, in line with a push from server vendors proclaiming that the "Network is the computer" and that the endpoints, the clients, should be comparatively dumb. This server-centric view of programming undoubtedly sold many millions of blade servers and server OSs, but it largely neglected to take into account two significant evolutions:
  • Internet Explorer was technologically the most sophisticated browser for some time, but as its pace of innovation ground almost to a halt, other browsers were catching up fast in terms of capabilities and performance.
  • Meanwhile, the other Internet of handheld devices and cellphones continued to mature, especially outside of the U.S., to the extent that many now have browsers that are faster and more sophisticated than their desktop counterparts.
The combination of these two factors over the last half decade has meant that server technology is still built around the notion that the server is talking to a three-year-old child while the client technology has evolved to, at a minimum, high school, and perhaps even the first few years of college. Is it any real wonder that the AJAX revolution caught so many large vendors by surprise?

With communication now able to move both ways in an intelligent fashion, not just from the prerendering stage of a Web page, this has the potential to shift the role of the server into another role that is simultaneously more complicated and simpler. In particular, what it means is that a typical application is far more likely to use the following workflow:

  1. The initial request from the client returns a framework document and the scripts necessary to facilitate further action.
  2. Once instantiated, the AJAX-enabled components within the page make another request to the server, this time to data-bind content. The data in this case may be filtered and transformed into XHTML format, but increasingly the transformations will also be on the client side.
  3. Components on the client control subsequent requests to the server, in general retrieving content, though occasionally sending content as well. Data content sent from the client typically will be either in XML or JSON format, rather than in name-value POST format. Significantly, most of these requests back and forth will likely not end up refreshing the page in toto.
  4. Eventually, the task ends and the page will be refreshed completely, restarting the process.
In essence, what changes here is the shift in the role of the server. In traditional Web page (or Web application) design, the server performs a number of tasks:
  • Selecting and loading the initial files to be processed
  • Retrieving and updating information from a database (in any form) based upon incoming parameters or posted content
  • Maintaining partial state within a session from one or more Web transactions
  • Generating content from various and sundry templates, either via transformation of XML or via other server language "macros"
  • Invoking additional processes beyond these simple ones, such as notification or messaging systems
Most of these roles, beyond the simple task of providing the actual content, can be handled by AJAX.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.

More Stories By Kurt Cagle

Kurt Cagle is a developer and author, with nearly 20 books to his name and several dozen articles. He writes about Web technologies, open source, Java, and .NET programming issues. He has also worked with Microsoft and others to develop white papers on these technologies. He is the owner of Cagle Communications and a co-author of Real-World AJAX: Secrets of the Masters (SYS-CON books, 2006).

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


CloudEXPO Stories
The precious oil is extracted from the seeds of prickly pear cactus plant. After taking out the seeds from the fruits, they are adequately dried and then cold pressed to obtain the oil. Indeed, the prickly seed oil is quite expensive. Well, that is understandable when you consider the fact that the seeds are really tiny and each seed contain only about 5% of oil in it at most, plus the seeds are usually handpicked from the fruits. This means it will take tons of these seeds to produce just one bottle of the oil for commercial purpose. But from its medical properties to its culinary importance, skin lightening, moisturizing, and protection abilities, down to its extraordinary hair care properties, prickly seed oil has got lots of excellent rewards for anyone who pays the price.
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected path for IoT innovators to scale globally, and the smartest path to cross-device synergy in an instrumented, connected world.
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
ScaleMP is presenting at CloudEXPO 2019, held June 24-26 in Santa Clara, and we’d love to see you there. At the conference, we’ll demonstrate how ScaleMP is solving one of the most vexing challenges for cloud — memory cost and limit of scale — and how our innovative vSMP MemoryONE solution provides affordable larger server memory for the private and public cloud. Please visit us at Booth No. 519 to connect with our experts and learn more about vSMP MemoryONE and how it is already serving some of the world’s largest data centers. Click here to schedule a meeting with our experts and executives.
Darktrace is the world's leading AI company for cyber security. Created by mathematicians from the University of Cambridge, Darktrace's Enterprise Immune System is the first non-consumer application of machine learning to work at scale, across all network types, from physical, virtualized, and cloud, through to IoT and industrial control systems. Installed as a self-configuring cyber defense platform, Darktrace continuously learns what is ‘normal' for all devices and users, updating its understanding as the environment changes.