AJAX: Highly Interactive Web Applications  

AJAX stands for Asynchronous JavaScript and XML. AJAX has recently been gaining attention as a way to make web applications more interactive. While it can reduce apparent latency between user interaction and application response, it can cause user interface, maintainability, and accessibility issues.

Giglio, Jason. Psychemorphic (2006). Design>Web Design>Interaction Design>Ajax

Ajax: Usable Interactivity with Remote Scripting

This article aims to give you an introduction to the foundations of remote scripting, in particular, the emerging XMLHttpRequest protocol. We'll then walk through an example application that demonstrates how to implement that protocol, while creating a usable interface.

Adams, Cameron. SitePoint (2005). Design>Web Design>Interaction Design>Ajax

Avoid Unnecessary Ajax Traffic with Session State

Where possible, creating Web applications -- including Ajax-based applications -- in a RESTful way avoids a large class of bugs. However, a pitfall of REST (REpresentational State Transfer) is sending duplicate data across similar XMLHttpRequests. This tip shows how the moderate use of session cookies can maintain just enough server-side state to significantly reduce client-server traffic, while still allowing fallback to cookie-free operation.

Mertz, David. IBM (2007). Articles>Web Design>Programming>Ajax

The AxsJAX Framework for ARIA

Charles L. Chen and T. V Raman have developed a common JavaScript framework to enhance the accessibility of AJAX-based applications. The framework is called AxsJAX, pronounced, 'Access JAX.'

Lemon, Gez. Juicy Studio (2007). Design>Web Design>Accessibility>Ajax

Build Ajax into your Web Apps with Rails

Ruby on Rails provides an excellent platform for building Web applications. Discover how to use the built-in Asynchronous JavaScript(TM) + XML (Ajax) features of the platform to give your application the Web 2.0 rich user interface experience.

Herrington, Jack D. IBM (2006). Design>Web Design>Ajax>Ruby on Rails

Building the Front End: Craft Intelligent and Intuitive Front Ends for Ajax Applications

With Ajax still one of the industry's hottest buzzwords, more and more applications are being built with Ajax technologies. However, it's not always easy to build a good application. This article focuses on how to build intuitive, easy-to-use Ajax-driven applications.

McLaughlin, Brett D. IBM (2007). Articles>Web Design>User Interface>Ajax

Call SOAP Web Services with Ajax, Part 1: Build the Web Services Client

Implement a Web browser-based SOAP Web services client using the Asynchronous JavaScript and XML (Ajax) design pattern.

Snell, James. IBM (2006). Articles>Web Design>Programming>Ajax

Community Creators, Secure Your Code!

Don’t be like MySpace. Protect your community site from malicious cross-site scripting attacks.

Bivald, Niklas. List Apart, A (2006). Design>Web Design>Security>Ajax

Community Creators, Secure Your Code! Part II

In part one of this two-part series, we discussed the threat of cross-site scripting in general terms and introduced a number of important security concepts. In part two, we’ll take a more in-depth, hands-on approach: How does an attacker actually exploit the weaknesses found? How can you protect yourself? For reasons of length, we’ll limit our discussion to two specific, representative examples.

Bivald, Niklas. List Apart, A (2006). Design>Web Design>Security>Ajax

Convert Atom Documents to JSON

Converting an Atom document to JSON might, at first, appear to be a fairly straightforward task. Atom is, after all, just a bit of XML and XML-to-JSON conversion tools are widely available. However, the Atom format is more than just a set of XML elements and attributes. A number of subtle details can make proper handling of Atom difficult. This article describes those issues and demonstrates a mechanism implemented by the Apache Abdera project to convert Atom documents into JSON and produces a result that is readable, usable, and complete.

Snell, James. IBM (2008). Articles>Web Design>XML>Ajax

Convert XML to JSON in PHP

With the growing popularity of Web 2.0, a new data interchange format called JavaScript Object Notation (JSON) is emerging as a useful way to represent data in the business logic running on browsers. Learn how PHP-based server programs can convert XML-formatted enterprise application data into JSON format before sending it to browser applications.

Nathan, Senthil, Edward J Pring and John Morar. IBM (2007). Design>Web Design>Information Design>Ajax

Create Your Own Ajax Effects

The basic and prebuilt effects in script.aculo.us are nice, but if you really want to build something great why not investigate doing your own, homegrown, do-it-yourself effects. We’re going to show you how to take basic effects and build on them to create your own. So let’s get going.

Fuchs, Thomas. Vitamin (2008). Articles>Web Design>Ajax

A Designer's Guide to Prototyping Ajax

Jeffery Zeldman wrote earlier this year in his essay about Web 3.0 that 'Wireframing AJAX is a bitch.' And while I can't deny the statement, I do think there are steps we can take to alleviate the pain. The problem is static XHTML/CSS wireframes are woefully inefficient at the task of communicating and documenting the features available to the new crop of Ajax web sites. Because we've been working on a rather intense Ajax project for the last few months, we've been developing and refining a number of techniques and guidelines to help our team design for Ajax by moving beyond the traditional forms of functional specs and wireframes to something a bit more appropriate for the dynamic medium'rapid prototyping.

Hale, Kevin. Particletree (2006). Design>Web Design>Prototyping>Ajax

Develop a Dojo-Based Blog Reader

In this article, the authors put your newly gained knowledge into practice by starting the development of a simple Dojo and Atom-based blog reader.

Shachor, Gal, Ksenya Kveler and Maya Barnea. IBM (2007). Articles>Web Design>Server Side Includes>Ajax

Develop an Ajax-Based File Upload Portlet Using DWR

File upload is a basic function of today's Web portals. In this article, authors Xiaobo Yang and Rob Allan describe how to develop an Ajax-based file upload JSR 168-compliant portlet using DWR (Direct Web Remoting). DWR is an ideal Ajax framework for Java developers that dynamically generates JavaScript based on server-side deployed Java classes. You will learn how you can use DWR to retrieve file upload progress from the portal server.

Yang, Xiabo and Robert Allan. IBM (2007). Articles>Web Design>User Interface>Ajax

Documenting the Design of Rich Internet Applications: A Visual Language for State

Ajax and Rich Internet Applications (RIAs) have revolutionized the way users interact with Web sites. However, documenting the design of any page that uses Ajax is a challenge, because the page--and, more importantly, components on the page--can have different states, depending on how users interact with the page's components.

Cecil, Richard F. UXmatters (2007). Design>Web Design>Multimedia>Ajax

Dynamic HTML and XML: The XMLHttpRequest Object

As deployment of XML data and web services becomes more widespread, you may occasionally find it convenient to connect an HTML presentation directly to XML data for interim updates without reloading the page. Thanks to the little-known XMLHttpRequest object, an increasing range of web clients can retrieve and submit XML data directly, all in the background. To convert retrieved XML data into renderable HTML content, rely on the client-side Document Object Model (DOM) to read the XML document node tree and compose HTML elements that the user sees.

Apple Inc. (2006). Design>Web Design>DHTML>Ajax

Editable Ajax Grid

Cross-browser JavaScript grid control for displaying tabular data in DHTML based table. Comprehensive features include fast-loading (enabled by AJAX), client-side sorting, columns resizing, multiple cell control types and keyboard navigation.

Scand (2006). Design>Web Design>DHTML>Ajax

Fifteen Things You Can Do with Yahoo! UI

Slicken up your web apps with these tips and tricks using the Yahoo! User Interface library.

Diaz, Dustin. Vitamin (2008). Articles>Web Design>Programming>Ajax

Fixing the Back Button and Enabling Bookmarking for AJAX Apps

With AJAX-based applications still in their infancy there has been a tendency to disgard basic web behaviour in favour of slick functionality. In this article I am trying to rescue two of those ‘lost’ behaviours – bookmarking and the back button, using Javascript.

Stenhouse, Mike. Content With Style (2005). Design>Web Design>Usability>Ajax

Getting Started with Ajax

The start of 2005 saw the rise of a relatively new technology, dubbed 'Ajax' by Jesse James Garrett of Adaptive Path. Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files. Ajax’s most appealing characteristic, however, is its 'asynchronous' nature, which means it can do all of this without having to refresh the page. This allows you to update portions of a page based upon user events and provides one of the cornerstones of Rich Internet Applications (RIA) referred to in discussions of 'Web 2.0.'

Gustafson, Aaron. List Apart, A (2006). Design>Web Design>DHTML>Ajax

Go Forth and API

To most, the virtues of Web 2.0 are rather ephemeral; that’s always been one of its main criticisms. However, I like to think that one of the movement’s key aspects is a sense of community, an ability to create sites and applications that bring people together.

Adams, Cameron. Vitamin (2008). Articles>Web Design>Programming>Ajax

Improving User Workflows with Single-Page User Interfaces

While the sheen has already begun to wear off the buzzword Ajax a bit among Web application designers, RIAs are bigger than ever with our clients and their customers.

Willemsen, Joost. UXmatters (2006). Design>Web Design>Workflow>Ajax

Integrate XForms with the Google Web Toolkit, Part 1: Introducing GWT's JavaScript Native Interface

This four-part series demonstrates how to use the Google Web Toolkit (GWT) and XForms together to create a dynamic Web application.

Galpin, Michael. IBM (2007). Articles>Web Design>Ajax>JavaScript

Integrate XForms with the Google Web Toolkit, Part 2: Creating an Artist and Album Management Form

This four-part series demonstrates how to use the Google Web Toolkit (GWT) and XForms together to create a dynamic Web application. Part 1 looked at the JavaScript underpinnings of each technology. Part 2 shows you how to use those JavaScript underpinnings to start mixing the two technologies together to build the rock star application.

Galpin, Michael. IBM (2007). Articles>Web Design>Server Side Includes>Ajax