Real-World AJAX Book Preview

A Brief History of AJAX

Mon, 19 May 2008 13:00:00 EDT

On April 30, 1993, CERN announced that the World Wide Web would be free for anyone to use and the Web took off, jumping from 130 Web sites in 1993, to over 100,000 in 1996, to 11.5 billion sites in 2005. The main protocol used on the Web is the Hypertext Transfer Protocol (HTTP). It's a patented open Internet request/response protocol intended to publish and receive HTML pages.

JSON - An Attempt to Bring XSS Back

Mon, 11 Jun 2007 19:00:00 EDT

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.

Creating a ColdFusion Web Service

Sat, 02 Jun 2007 17:30:00 EDT

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.

Real-World AJAX Book Preview: REFERENCES

Sat, 26 May 2007 13:00:00 EDT

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.

Real-World AJAX Book Preview: Runtime File Description

Fri, 25 May 2007 13:00:00 EDT

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.

Real-World AJAX Book Preview: JackBe Visual UI Builder (JackBuilder)

Thu, 24 May 2007 13:45:00 EDT

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.

Real-World AJAX Book Preview: Business RIAs: Creating the 'AJAX Bank' Application with the JackBe NQ Suite

Wed, 23 May 2007 13:00:00 EDT

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

Real-World AJAX Book Preview: Window Event Handling

Tue, 22 May 2007 11:00:00 EDT

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.

Real-World AJAX Book Preview: The Code

Mon, 21 May 2007 11:00:00 EDT

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.'

Real-World AJAX Book Preview: AjaxWord: An Open Source Web Word Processor

Sun, 20 May 2007 10:00:00 EDT

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.

Real-World AJAX Book Preview: The AJAX News and Feed Reader

Sat, 19 May 2007 15:00:00 EDT

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.

Real-World AJAX Book Preview: Use of Dummy Data in These Exercises

Fri, 18 May 2007 14:00:00 EDT

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.

Corporate Mashups: Composite Applications Simplified Through AJAX and SOA

Thu, 17 May 2007 17:45:00 EDT

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.

How To Develop AJAX Applications

Wed, 16 May 2007 19:45:00 EDT

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):

AJAX Book Preview: "Controller"

Wed, 16 May 2007 19:30:00 EDT

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.

Cellular AJAX Data Transmission Techniques

Wed, 16 May 2007 19:15:00 EDT

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.

AJAX Navigation and Links

Wed, 16 May 2007 19:15:00 EDT

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:

The Web Page as an Application

Wed, 16 May 2007 19:15:00 EDT

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.

AJAX IM Client

Wed, 16 May 2007 19:15:00 EDT

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.

AJAX in a SOA

Wed, 16 May 2007 19:15:00 EDT

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.

Tuning AJAX Applications for Performance

Wed, 16 May 2007 19:00:00 EDT

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.

Real-World AJAX Book Preview: Input Focus and Blur in Chat Windows

Wed, 16 May 2007 11:00:00 EDT

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.

AJAX Logging Functions

Tue, 15 May 2007 18:45:00 EDT

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.

AJAX Load Buddies

Tue, 15 May 2007 18:45:00 EDT

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.

Real-World AJAX Book Preview: Designing the Server API

Sun, 13 May 2007 11:00:00 EDT

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:

Real-World AJAX Book Preview: The Basic HTML Structure

Sat, 12 May 2007 11:00:00 EDT

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:

Real-World AJAX Book Preview: Base Services

Thu, 10 May 2007 13:00:00 EDT

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

Real-World AJAX Book Preview: Enterprise AJAX

Wed, 09 May 2007 13:00:00 EDT

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

Real-World AJAX Book Preview: Users as Testers

Tue, 08 May 2007 12:00:00 EDT

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.

Real-World AJAX Book Preview: Leading-Edge Best Practices

Mon, 07 May 2007 12:00:00 EDT

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.

Improving Network Performance

Mon, 07 May 2007 04:00:00 EDT

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.

Real-World AJAX Book Preview: Web Server-Based Compression

Sun, 06 May 2007 11:00:00 EDT

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.

Real-World AJAX Book Preview: JavaScript Profiling

Fri, 04 May 2007 11:00:00 EDT

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.

Real-World AJAX Book Preview: Code Optimization

Thu, 03 May 2007 11:00:00 EDT

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.

Real-World AJAX Book Preview: A Safer More Secure AJAX

Mon, 30 Apr 2007 13:00:00 EDT

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.

Real-World AJAX Book Preview: Going Deep into the AJAX User Experience

Sun, 29 Apr 2007 11:00:00 EDT

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.

Real-World AJAX Book Preview: Advanced Techniques

Sat, 28 Apr 2007 08:00:00 EDT

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.

Real-World AJAX Book Preview: Using TinyAjax to Create Live Search

Thu, 26 Apr 2007 08:00:00 EDT

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.

Real-World AJAX Book Preview: Creating a Live Search Web Service with PHP

Wed, 25 Apr 2007 08:00:00 EDT

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:

Real-World AJAX Book Preview: AJAX Without a Server-side Framework

Tue, 24 Apr 2007 08:00:00 EDT

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.