Ajax Training: Introduction to Ajax Development

Course Number: AJX-100
GSA/Previous Course Number: 825
Duration: 3-4 days
view class outline

Ajax Training Overview

Ajax (Asynchronous JavaScript and XML) has emerged as a powerful platform for building web applications with extensive client-side interactivity. Unlike older approaches, which require reloading of the entire page with every postback, Ajax uses the JavaScript DOM, the XMLHttpRequest object, XML, and CSS to download and display just the content that needs to change.

Important Note: This course is a comprehensive survey of Ajax development for JavaScript developers. If your organization has adopted a specific Ajax framework, you may prefer training in that framework. We offer training on Dojo, Ext JS, jQuery, jQuery UI, Prototype/Script.aculo.us, and the Yahoo User Interface library (YUI). If you're using a framework not listed, please contact us.

Location and Pricing

Most Accelebrate courses are taught on-site at our clients' locations worldwide for groups of 3 or more attendees and are customized to their specific needs. Please visit our client list to see organizations for whom we have recently delivered training. These courses can also be delivered as live, private online classes for groups that are geographically dispersed or wish to save on the instructor's or students' travel expenses. To receive a customized proposal and price quote private training at your site or online, please contact us.

In addition, some courses are available as live, online classes for individuals. To see a schedule of online courses, please visit http://www.accelebrate.com/online_training/?action=course&page=JSC401.

Alternative Course: Ajax for Java Developers

If you will be developing Ajax applications, we encourage you to consider Ajax for Java Developers as an alternative to this course.

Alternative Course: Ajax for Managers

If you are interested in learning the fundamentals of Ajax in a one-day seminar, we encourage you to consider Accelebrate's Ajax for Managers course.

Ajax Training Prerequisites

All attendees should be fluent in HTML and CSS, and have extensive experience with JavaScript. Prior experience with XSL is not presumed.

Hands-on/Lecture Ratio

This class is 70% hands-on, 30% lecture, with the longest lecture segments lasting for 20 minutes.

Ajax Training Materials

All attendees receive a copy of Manning's Ajax in Action and related course materials, as well as copies of all code created during the class.

Software Needed on Each Student PC

Firefox 3 or later or Internet Explorer 7 or later
The web development tool of the attendees' choice (we recommend Dreamweaver but happily teach using any tool)
Four-day class only: If possible, a dedicated XML editor (we recommend XMLSpy but are happy to teach using Dreamweaver or another tool as the XML editor)
Other software and configuration as detailed on the setup sheet. This sheet is available upon request.

Ajax Training Objective

To teach attendees the Ajax programming and application design techniques necessary to build rich, ultra-responsive web applications.

Ajax Training Outline

Ajax Basics

The Purpose of Ajax

Traditional Web Application
An Ajax Web Application

The XMLHttpRequest Object

Creating an XMLHttpRequest Object
Using an XMLHttpRequest Object
Handling the Response

Ajax Frameworks

The Purpose of Frameworks

Choosing a Framework

Dojo

Downloading Dojo
Using Dojo for Ajax

Prototype

Downloading Prototype
Using Prototype for Ajax

Other Popular Frameworks

Direct Web Remoting (DWR)
AjaxAnywhere
Simple Ajax (SAJAX)
Sarissa
Other Frameworks

The HTML Document Object Model

Accessing Nodes

Accessing Element Nodes
Accessing Attribute Nodes
getAttribute
attributes[]
Accessing Nodes by Type, Name or Value
Accessing Nodes by Class Name

Removing Nodes from the DOM

DOM Differences: The Whitespace Problem

Creating New Nodes

XML and Ajax

Creating a DOM Document with JavaScript
Accessing, Creating and Modifying XML Nodes

Creating an AddChild() Function

Receiving XML Responses
Passing XML to the Server

Ajax Applications

Login Form
Quick Lookup Form
Preloaded Data

Ajax Slideshow
Navigable Tables

OO JavaScript and Refactoring Ajax

Illustrating the Problem
Object-Oriented JavaScript

JavaScript Classes
Prototypes
Extending Built-in Objects

Refactoring the Ajax Request Code

JavaScript Object Notation (JSON)

Object Literals

Arrays
Objects
Arrays in Objects
Objects in Arrays

JSON

JSON Syntax
JSON Parsers
JSON Advantages and Disadvantages

XSLT Transformations with JavaScript

XSLT

Basic XSLT

XSLT in the Browser

XSLT in Internet Explorer
XSLT in Mozilla

Sarissa

XSLT in Ajax Applications
Advantages and Disadvantages of XSLT in Ajax Applications

Drag and Drop

Drag and Drop Basics
script.aculo.us

Draggables
Droppables
A More Interesting Example

More Ajax Applications

Inline Editing
Detailed Information on Demand
Autologout
Autocompletion

XSLT Basics [4-day class only]

eXtensible Stylesheet Language
An XSLT Stylesheet

xsl:template
xsl:value-of
Whitespace and xsl:text

Output Types

Text
XML
HTML

XSLT Elements and Attributes

xsl:element
xsl:attribute
Attributes and Curly Brackets

XPath [4-day class only]

XPath in XSLT
XPath Expression
XPath Terminology

Context Node
Current Node
Context Size
Proximity Position

Location Paths
Axis
Node Test
Predicate
Accessing Nodes
Abbreviated Syntax
XPath Functions
XPath Operators

Flow Control in XSLT [4-day class only]

Looping in XSLT
Sorting with XSLT
Looping and Sorting
Conditions with XSLT

XSLT Templates, Parameters and Variables [4-day class only]

xsl:apply-templates
xsl:call-template
Passing Parameters
Removing Content
Template Modes
Template Priority

Default Priorities
Assigning Priorities

XSLT Variables

Conclusion