JSON lets one take advantage of the 'On Demand Javascript/Script Tag hack' described earlier. This technique allows new HTML script tags to be dynamically generated and the 'script' to be downloaded from any server. When the downloaded script is made up of data formatted in JSON, the script tag is effectively being used to download new data across domains outside of the same-origin policy.

We'll duplicate our PHP Web service in ColdFusion now using XMLRPC.CFC to format our XML response and the CFJSON.cfm for our JSON response. This is the ColdFusion equivalent of the PHP Web service we just looked at. It can be accessed in a REST-like manner through the resources URI and expects two variables in the query string: numbers and output. The variable numbers will contain a delimited list of numbers that this Web service will sum and return. To make our return object more complex, we'll return the original request as well as the sum. You can specify your desired output format by setting output to JSON or XML.

There are many different frameworks from which to choose. Some are open source and therefore free and some are commercial products, which typically charge for a fee. These commercial products do provide for a free copy for particular users, such as development, not for profit, or personal use, so be sure to check the particulars of the licensing structure. The following is a list of Frameworks and Libraries that were valid as of August 2006.

The runtime file contains JackBe code that represents the JackBe form content. When this form is parsed on the client, the NQ Suite's core will process it and convert it into HTML code that the browser can understand.

JackBe was the first company to provide a WYSIWYG visual GUI development tool for developing AJAX applications, releasing version 1.0 of JackBuilder in 2003.

JackBe's NQ Suite is a complete set of development tools that allows rapid development of sophisticated rich client applications using AJAX.

The JavaScript file handles various window-related events such as resizing the window in response to mouse-drag events on the four edges, maximizing the window or closing the window in response to mouse-click events, or moving the window in response to mouse-drag events on the title bar. On the other side, the JavaScript file also fires window events to the toolkit's event management system so that if a listener is registered for a certain window event, the listener can be called.

The AjaxWord client consists of JavaScript and HMTL code. The application's user interface is defined in HTML. Client-side logic written in JavaScript defi nes the behavior of the user interface by leveraging a generic JavaScript/DHTML toolkit that's built from scratch. From a Model-View-Controller perspective, the HTML files are 'Views' and the JavaScript code acts as 'Controllers.'

AjaxWord (www.ajaxword.com) is an open source Web-based word processor. It closely mimics Microsoft Word in both look-and-feel and functionality. The application was initially written between 1997 and 1999 using JavaScript/DHTML on the client side with ASP on the server side. It was released on the Web in 2000.

The AJAX News and Feed reader is an application written in ColdFusion using ajaxCFC, a free open source ColdFusion/AJAX framework, and a Model-View-Controller design pattern. It contains the basic functionality of taking an unlimited number of RSS 2.0 feeds as input, parsing the XML data, listing the feeds in a left menu, and showing the news entries in the main area. You can add/delete feeds at any point as well as request a feed update. This example doesn't permanently store any feed, eliminating the need for a database or tedious install. All feeds are stored in the session of the user using the application and are deleted when the session expires.

Except for the two GUI components that we'll be configuring in this tutorial, the GUI components have been bound to dummy data sets - a technique useful in mocking up GUIs during GUI design processes.

In this chapter we'll look at rapidly implementing an AJAX Rich Internet Application that leverages various XML and SOAP Web Services while using the visual tools and application objects from TIBCO Software's AJAX toolkit: TIBCO General Interface.

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. The steps involved in creating an application are as follows. (Note that these apply only to the Opera platform):

In the previous section we discussed a set of abstractions that are sub-classes of the component. A component class abstracts some behavior and to implement that, it might add a set of event listeners to its elements. Those event handlers are encapsulated in the component class and serves as its controllers. But in a bigger scheme of things, they are fully contained in the component class and can be considered a part of the View.

There are two main techniques for cellular data transmission, TDMA (Time Division Multiple Access) and CDMA (Code Division Multiple Access). The objective of both techniques is to support multiple simultaneous data channels. TDMA achieves this objective by dividing the radio frequency into time slots. TDMA is used by the GSM cellular system. CDMA comes from a military/defense background and is currently used by major cellular carriers in the United States. QUALCOMM has patented large parts of CDMA (www.QUALCOMM.com). CDMA uses a more complex mechanism to support simultaneous data channels, which is outside our scope.

Mobile devices, by definition, have limitations. These include limited display, limited input capabilities, and the possible absence of a pointing device. Hence structure and navigation become critical in ensuring a good end-user experience. The following design recommendations should be considered:

AJAX is the right technology for a Web-enabled rich user interface (UI). But as with any technology, unstructured software created using it is a recipe for failure. AJAX is a set of powerful and flexible technologies but its disorderly use can result in spaghetti code. If the code isn't structurally sound, the interface it presents to users is unfriendly and non-intuitive, whereas a structurally sound and cohesive system flows smoothly and delights its user.

A service-oriented architecture isn't much more than a loosely coupled collection of services - often Web services. Services are defined as a unit of work done by a service provider for a service consumer. One of the ways that SOA achieves that loose coupling is by remaining independent of a given technology (such as PHP or ColdFusion) and hiding the details of the implementation - much like a Web service.

In this chapter, we'll step through the creation of an Instant Messaging (IM) client application built with AJAX, JavaScript, and dynamic HTML/CSS. While most of this chapter will be detailing the specifics of this code, we wanted to start off with a brief overview of the process of designing this application. We found this process to be about as necessary as writing the code itself.

Performance can have different meanings, depending on your perspective. If you're the end user of an application, performance means that the application is responsive in all circumstances. If you're an application owner or product manager, performance may mean that the application is scalable, i.e., the number of servers you have is directly proportional to the number of users you can handle. In this chapter we're more concerned with the former kind of performance rather than the latter.

We've also included a couple pure usability features in our ChatWindow class. The focus() and blur() methods simply change the background color of the chat window's text input to help the user know which window is active and where they are typing.

Because we want our JavaScript to be able to write to the log window in our HTML, we'll first add the logging code to our JavaScript. 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.

The load buddies function uses the Prototype library's Ajax.Request() to get the user's buddy list, which includes the current status of each buddy. Again, we use Prototype's bindAsEventListener to ensure that, when the AJAX request is complete, it calls the display() function on the instance of the Buddies object that started the AJAX request.

At this point, we'll look at the functionality that we need on the server to serve our client. We'll create an API that matches our major service needs, which are:

First, we create a simple structure in HTML that represents the major elements of our user interface: Our goal at this point is to just represent the structural pieces of the user interface. In HTML (XHTML 1.0 Transitional, specifically), it looks like this:

At the lowest level you have base services, including legacy services, new services, and data services.

What do AJAX and service- oriented-architecture SOA have in common? The answer: Everything. Is AJAX an enterprise technology? The answer: Absolutely.

In a traditional software development environment, there's a clear separation between developers, testers, and users. Programmers create the application, then throw it over the wall to the testers. Testers exercise the application according to a more or less detailed test plan, reporting issues to the developers who may or may not fix them. Once all the bugs that are to be fixed are fixed, the testers declare the product ready for release and it's shipped to the users.

The dream is always the same. The 'Big Idea' comes to me as a bolt out of the blue. I sit down at my computer, install Ruby on Rails, and in a few hours I've published a working prototype on the World Wide Web. A message to this forum, an entry on that blog, an e-mail to a few friends, and WHAM! I have users.

How do we measure the network performance of a Web application? There are a number of tools that can help us measure and diagnose network performance issues, but the best place to start is by taking a look at the initial page, where we load most of the JavaScript, CSS, and images that will be used during the lifetime of the AJAX application.

One way of speeding up transfer times of resources between the server and the browser is to reduce the size of the resource being transferred. Practically all modern browsers can receive and decompress compressed content via HTTP. Using one of the HTTP traffic-monitoring tools mentioned above, you can see that browsers send out a header, Accept -Encoding=gzip,deflate, that tells the server that it can get compressed content. For these browsers, you can configure your Web server to compress content on-the-fly for dynamic content and cache compressed versions for static content.

In some cases you may not know precisely where a performance bottleneck lies. Using our technique of surrounding suspected bottlenecks with timestamps won't work in these cases. We need a way to get a broader overview of application performance. Fortunately there are a number of profiling tools. Unfortunately, they're not standard across browsers.

Most of the performance optimizations in this section should be familiar to anyone who has performance tuned pre-AJAX JavaScript. In fact, on the client side, the prescription for tuning the code of AJAX applications hasn't changed that much from tuning plain JavaScript: replace expensive operations with less expensive ones; move expensive operations out of inner loops; pre-compute as many values outside of loops as possible; unroll loops where necessary.

As with any new technology or methodology, AJAX development has security risks. Many of these are easily avoided through good Web coding standards. Even so entire books could still be written on the elements of AJAX security. This chapter provides an overview of security issues to give the new practitioner a good idea of where to start.

The user experience is a very difficult thing to quantify. Through the years I've found that it's a very inexact science. There's usually at least one thing you can do to improve the experience, while at the same time hurting it. Below you will find 21 strategies for improving the user experience. Some strategies will be rules of thumb, some will be techniques, and some will have code.

The great advantage of AJAX clients is that they can communicate back to the server without interrupting what the user is doing. This in turn provides the freedom for AJAX clients to talk back to the server far more frequently than in a traditional page-based Web application. This can be exploited to provide a much richer user experience, for example, by providing real-time data updates, 'live search' functionality, or validating user input on-the-fly.

Using a server-side framework will let you shift some of the processing from the client back to the server. In our example we'll consume our Web service using PHP and print out formatted HTML. AJAX will be used to handle the request and the response, but the Web service will be processed on the server. One benefit to this approach is that you can avoid the issues involved with an AJAX cross-domain request.

To keep this simple we won't use a database. Instead we'll use an array of values. Create a new file, StateList.php, with the following in it:

If you already have AJAX-friendly web services in place, or have a complex site with a framework that's not readily modified, you may find it easier to use a client-side framework like Prototype.js or jQuery. We'll assume that you have AJAX-friendly web services. Let's try an example using our PHP web service to add two numbers.

For our example Web services, we'll be loosely adhering to the REST principle and creating Web services that are addressable through the service's Uniform Resource Identifier (URI).