This course introduces the Ajax programming model for web applications. We start with a tour of basic browser programming, using JavaScript, the HTML DOM, and CSS. Then, students learn how to establish communication between their on-page JavaScripts and server-side application components, and thus to develop richer, more user-friendly and responsive web applications.

We pursue Ajax connectivity entirely from the client side in this course (Java developers please see Course 202), and at several levels. From an initial study of the bare-bones approach using the XMLHttpRequest browser object, we move on to consider programming techniques for thread safety, and use of higher-level script libraries such as Prototype and Dojo.

Prerequisites

• This course is intended for software developers, and some programming experience is assumed. Familiarity with basic HTML constructs is required. Any prior knowledge of JavaScript, CSS, or the HTML DOM will be helpful, but no such knowledge is required.

Learning Objectives

• Use JavaScript in web pages to respond to user events.
• Manipulate an HTML page dynamically using the DOM.
• Make HTTP requests to the server side of an application from JavaScript, without causing the browser to reload the page.
• Use script libraries such as Prototype and Dojo to simplify coding tasks and improve UI functionality.

Timeline: 3 days.

Chapter 1. Overview of Ajax

• What is Ajax?
• Desktop vs. Browser-Based Applications
• Page Request/Response Issues
• The XMLHttpRequest Object
• Ajax Processing
• Client-Side Frameworks
• Server-Side Frameworks
• Criticism of Ajax

Chapter 2. JavaScript

• Syntax
• Variables
• Data Types
• Arithmetic and String Operators
• Conditionals and Loops
• Logical and Comparison Operators
• Functions
• Variables Scope
• Objects and Encapsulation
• Constructors
• Prototypes
• Closures
• Arrays

Chapter 3. The Document Object Model

• The Document Object Model
• The DOM Node Tree
• The Document and Window Objects
• Elements
• Attributes
• Text Nodes
• Walking the Tree
• DOM Events
• Modifying the DOM
• Using innerHTML

Chapter 4. Cascading Style Sheets

• Styling an Element
• Cascading Styles
• Elements, Classes, and IDs
• The Box Model
• CSS2 Positioning
• Controlling Visibility

Chapter 5. Making Remote Requests

• iFrames vs. XMLHttpRequest
• Getting an XHR Instance
• XHR Methods and Properties
• Synchronous vs. Asynchronous
• Data Formats
• Extensible Markup Language (XML)
• Receiving XML
• Building and Sending XML
• JavaScript Object Notation (JSON)

Chapter 6. Prototype & Co.

• Client-Side Frameworks
• Script Libraries
• Ajax Issues
• Prototype
• A Review of prototype.js
• Ajax.Request
• The Options Object
• The $ Function
• Other Convenience Functions
• String Functions
• Algorithmic Programming

Chapter 7. Dojo

• The Dojo Toolkit
• Architecture
• Dojo Namespaces
• Simplified DOM Manipulation
• dojo.xhrGet and dojo.xhrPost
• Response Content Types
• The Dojo Event System
• Event Registration
• Disconnecting Event Handlers
• Chaining Event Handlers
• The Dojo Widget System
• Built-In Widgets
• Custom Widgets
• Drag-and-Drop Support

Appendix A. Learning Resources

System Requirements