Caching on the Server
Although the previous section covered most of the caching mechanisms for both the browser and the web server, there are other ways by which we can cache data on the server. The server is often not the last link in the chain, and it often works with data that it must retrieve from files on the system, or data in a database. Therefore, if we can find efficient ways to cache this data, we can again avoid the expensive operations required to retrieve the data from its original source. With...
AJAX Controller
Now that we looked at a basic Model and some fundamentals of creating the View, we need to glue those together and make an application with which an end user can actually interact. To glue everything together in an MVC AJAX application is the Controller. Due to the nature of the Controller, responding to users-gestures and orchestrating the Views and Model, the Controller is highly dependent on the DOM Events API. We discussed much of the DOM Event model in Chapter 2 and showed how to attach...
Progressive Enhancement and Unobtrusive JavaScript
Progressive Enhancement PE can be an excellent way to build AJAX applications that function well, even when the client browser can't execute the JavaScript and perform the XHRs. PE is different from Graceful Degradation because in the latter, we build rich functionality and then some mechanism for degrading the page so that it at least looks okay on incompatible browsers. PE is sometimes also referred to as Hijax. PE essentially means that you should write your application in such a way that it...
Animation Patterns
Humans are good at picking up on movement, especially with our peripheral vision. This isn't to say that movement necessarily causes our users to suspect our application of causing them ill-will, but it does suggest that animation is a good way to get people's attention and communicating important information. In a study by Baecker, Small, and Mander1, it was shown that the comprehension of a set of icons increased from 62 percent to 100 percent by animating them. Animation can also work to...
NTiered Architecture From to n Tiers
One of the most important activities in the architecture of a system is breaking up the application into logical chunks, or tiers. Each tier is given a specific role, or set of responsibilities. An example of a 1-tier application is a small calculator application that packages the input, calculation, and display functionality into one small executable file. An example of a 2-tier application is a static web site, where the two tiers are the server and the browser. Most traditional web...
A JAWSCompliant AJAX Interaction
When an AJAX request is made, some area of the page is altered and the resulting text needs to be scanned by the screen reader to either read aloud or transmit to another device. Home Page Reader, Hal, Windows Eyes, and JAWS all react differently in this regard. For the purposes of this explanation, we focus on the JAWS screen reader. More information is available on Windows Eyes at juicystudio.com. Like other screen readers, JAWS takes a kind of snapshot of the web page and puts this content...
Event Registration
Using the classic event handler definition can get quite cumbersome when you have to write the master handler and attach that to the HTML element. A much cleaner way of attaching event handlers to HTML elements is by using the attachEvent method in Internet Explorer and the W3C standard addEventListener method in other browsers. Using this type of event registration enables many functions to be executed when some event occurs on an HTML element. Although this makes your life much easier in...
Interactivity Patterns
AJAX enhances the ability of our user to interact with data in an application. New levels of interactivity are possible because of the ability to coordinate information between the business and data layers and the client browser. AJAX has spawned a host of new control patterns that resemble conventions from the desktop that use XHR with JavaScript and DHTML to create new opportunities for interactivity in our web applications. In this section, we examine several control patterns that strongly...
Virtual Desktop
A major benefit of the AJAX web application over a standard desktop application is that it's built from the beginning to consume data and not documents this data can come from a central web server or an external web service. AJAX applications revolve around accessing and displaying data. Unlike desktop applications, which are typically confined to local data storage or use the network access occasionally for updates, AJAX-based applications are consumers of web accessible data. Using the...
XMLHttpRequest Basics
If you have not seen it before, we start by going over the basics of using the XHR object. xhr new else if entAjax.IE7 entAjax.FF entAjax.SF entAjax.OP xhr new XMLHttpRequest no XHR so we are out of luck, maybe degrade and use an IFRAME This is the absolute simplest way of defining the XHR object. The most difficult part here is checking for which browser we use with the statement You see this used often as the check for Firefox or Safari. Often, this is done once and stored in a global...
The Server Response
In an asynchronous request environment, the event handler assigned to the onreadystatechange event is important because it notifies you when your request has been completed and you can have access to the response from the server. In our event handler for the onreadystatechange event, you again need to do two things. The first is that you need to investigate the value of the XHR object readyState property. The readyState can take on any value from 0 to 4, which indicates the request is...
The Trouble with This
Because the meaning of the this keyword changes depending on where it is executed, you need to be careful when using it with closures. In particular, when you start writing event-driven object-oriented JavaScript, you can run into problems. For example, in a HttpRequest class, you need to use the entAjax.close method to give the this keyword the proper meaning when you attach a method to the onreadystate-change event of the browser's native XMLHttpRequest object. You might think that you can...
Tools for Testing Usability
1. Morae low-cost software package offering IP-enabled video, screen, and voice capturing. 2. WebEx http www.webex.com A web conferencing solution most people are familiar with. The screen sharing and video capabilities, combined with the fact that it is now available for Firefox as well as Internet Explorer, makes it a practical tool for communicating during a remote usability test, too. It also has the advantage of pass controlling the screen over to the user and sharing the user's screen as...
Usability Testing 1
Morae, http www.techsmith.com morae.asp WebEx, http www.webex.com NetMeeting, Raindance, http www.raindance.com Information architecture for designers, http iabook.com template.htm Visio stencils, consent forms, and more.
Protecting Intellectual Property
Finally, if protection of the JavaScript source from prying eyes is a concern for example, if you sell a commercial software product that includes JavaScript code , it's possible to obfuscate the JavaScript so that it's near-unreadable. The protection of JavaScript intellectual property is a common and somewhat achievable goal supported by numerous proprietary and open-source products of varying quality. You can apply three useful techniques toward this end. With general compression of the...
Sending Data to the Server
We looked at how to retrieve data from the server using a standard HTTP GET request, but we also need to send data to the server. Already this is possible by formatting the handler URL in a particular way with query-string parameters such as the following myXhr.handler customers lastName doe However, there might be cases where you want to send data using a POST request instead so that you can send larger amounts of data or just so that you can layer our AJAX functionality on top of existing...
Data Encryption and Privacy
Web applications, AJAX or otherwise, often work with secrets, and sending secrets around can be dangerous. HTTP traffic is unencrypted by default, so anything that is passed over HTTP is available for snooping. Many web applications are accessed by users in shared environments such as universities or offices, and in these types of environments, it is not difficult for another user to sniff the traffic, listening in on the conversation. Therefore, when our application deals with information...
Script Placement
The easiest but most fragile method of getting your scripts to run sooner is by placing the actual lt script gt element in the web page after any HTML elements that are required for the AJAX program to be initialized. Although it is a simple and fully cross-browser compliant solution, most people deride it due to its blatant dependency on the precise placement of the lt script gt element, something that has no relation to the display of the web page, among the HTML that is considered to be the...
Comet
Comet is a data push technology pattern that involves sending asynchronous XHR requests to the server expecting that the server is not going to respond for an extended period of time. This has some major implications for the server design. Like a standard HTTP request to the server, each of these Comet requests require a thread on the server and all the associated memory resources used to respond to a request from the client. Because the idea of Comet is to keep the HTTP session open...
Resources Oql
Bill Scott's RIA Visio Stencil, Digimmersion Flex 2 RIA Stencil, http www.digimmersion.com products ria_20.cfm Faster DHTML in 12 Steps, http msdn.microsoft.com workshop author perf dhtmlperf.asp Increasing Performance by Using the XSLTemplate Object, http msdn2.microsoft.com en-us library ms763679.aspx Selenium functional testing, http www.openqa.org selenium JSUnit JavaScript unit testing, http www.jsunit.net JSMock Mock objects, http jsmock.sourceforge.net HTTPUnit HTTP Unit Testing, http...
Decorator Pattern
The Decorator pattern allows additional behavior to be added to an object dynamically. Decorators wrap a new object around the original object and add new functionality to it however, the interface to the original object must be maintained. They are a flexible alternative to subclassing, the difference is that subclassing adds behavior at compile time whereas decorators add behaviors at runtime. With the Decorator pattern, you can add functionality to a single object and leave others like it...
DOMContentLoaded
Mozilla-based browsers provide a handy, and mostly undocumented, event called DOMContentLoaded. The DOMContentLoaded event allows you to bootstrap your AJAX components after the DOM has loaded and before all the other non-DOM content has finished loading. Using the DOMContentLoaded event is much like any other event and is registered like this Example.init, This is a simple way to provide a slightly faster application. Of course, keep in mind this works only in Mozilla-based browsers, and...
Closing the Loop
Now that we have a RemoteDataModel that our DataGrid can connect to, we need to actually connect them. To achieve this, we can update the GridFactory f romDeclaration method so that it also creates an instance of the RemoteDataModel class and specifies the appropriate factory for the RemoteDataModel itemFactory in this case, the Customer Factory because our DataGrid is rendering Customer objects. fromDeclaration function elem var grid new entAjax.SimpleGrid elem grid.deserialize var rdm new...
Internet Explorer userData Offline Storage
The userData behavior in Internet Explorer allows the developer to store data offline in much the same way globalStorage in Firefox is intended. Internet Explorer allows userData to persist information across sessions by writing to file system store. The capacity of the userData store depends on the security zone of the domain. Table 6.2 shows the maximum amount of userData storage available for an individual document and also the total available for an entire domain, based on the security...
IBM Web Services JavaScript Library
One of the best toolkits available for such things is IBM's Web Services JavaScript Library WSJL . The WSJL abstracts all of the cross browser differences that you might encounter when dealing with SOAP-based Web Service interactions from the web browser. In particular, XML namespaces are an important facet of SOAP and Web Services, and there is a large discrepancy in how different browsers deal with it. W3C-based browsers and Internet Explorer differ in that Internet Explorer does not support...
Firebug
The current best solution for JavaScript debugging, DOM inspection, network sniffing, and everything in between is Firebug13 for Firefox. The JavaScript debugging capabilities are just like you would expect, with the ability to set break points using the debugger statement, stepping into, over, and out of function calls, and viewing the code right there in the browser. Firebug allows point-and-click DOM inspection and simple real-time editing of the DOM structure and CSS properties. One of the...
Data Centricity
Another important driver and a significant advantage to AJAX architecture is the fundamental orientation around data-versus-documents consumption. AJAX aligns well with a Service-Oriented Architecture SOA and can be used to easily consume and interact with web services to form a loosely coupled relationship with data. Using the browser to orchestrate and consume data from multiple sources in one interface is powerful because it opens up a whole new range of applications, which we explore in...
AJAX Painkillers
Unlike the traditional web forms approach to a high-volume data entry application, an effective application needs to be responsive and intuitive. To that end, the impact on the users' workflows should be minimal for example, the users need to scroll through thousands of prospective customer records as though the data was accessed right from their local computer, as opposed to paging through ten records at a time. They also need to continue entering data into the application while data is saved...
Fire and Forget
The most basic thing to consider in the interests of usability is the power of asynchronous server interactions. Asynchronous interactions mean that the user can interact with the application and continue to achieve workflow goals at the same time as the server is dealing with previous actions, such as persisting edited data to the database. We call this fire and forget because the request to the server is sent, and application control is immediately returned to the user who can then proceed to...
Enterprise AJAX
Strategies for Building High Performance Web Applications Dave Johnson, Alexei White, and Andre Charland Upper Saddle River, NJ Boston Indianapolis San Francisco New York Toronto Montreal London Munich Paris Madrid Cape Town Sydney Tokyo Singapore Mexico City Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and the publisher was aware of a trademark claim, the designations have been...