WA1503 Comprehensive AJAX Training and Courseware

Topics

What you will learn

Audience

Prerequisites

Duration

0. Course Overview

• Prerequisites
• Course Objectives
• Agenda
• Student Introductions

1. Introduction to AJAX

• Objectives
• What is AJAX?
• A Simple Example
• The Old Way
• The AJAX Way
• Two Key Aspects of AJAX
• What are the Advantages of the AJAX Approach?
• AJAX Technologies
• The Basic AJAX API
• Creating the XMLHttpRequest Object
• The XMLHttpRequest Object Basics
• Complete Example
• The Timeline
• Review Questions
• Review Answers

2. XHTML

• What is XHTML?
• The DTD and MIME Type
• The Basic Syntax
• Embedding XHTML in a XML Document
• Differences With HTML 4
• Embedding Scripts and Styles
• The Standard Attributes
• The <div> Element
• The <span> Element
• Review Questions
• Review Answers

3. JavaScript DOM API

• What is DOM?
• Element Hierarchy
• DOM Standardization
• The Document Object
• The document Object
• Nodes and Elements
• The Element Object
• Element Event Handlers
• The window Object
• The Frame Object
• The History Object
• Review Questions
• Review Answers

4. AJAX API Details

• The Request Object
• Creating the Request Object
• The Request Object
• Simple GET Example
• Making a POST Request
• Making Concurrent Requests
• Memory Leak With Inner Function
• A POST Utility Function
• Mozilla XmlHttpRequest Extensions
• IE Microsoft.XMLHTTP Extensions
• Ajax Caching
• Control Cache Duration
• Advanced Cache Control
• Review Questions
• Review Answers

5. CSS2

• Objectives
• Introduction
• New in CSS2
• Basic Syntax
• Creating a Style Sheet
• Value Types
• Selectors
• More on Selectors
• Grouping Elements
• The Box Model
• Box Model Example
• Box Properties
• The Visual Formatting Model
• Types of Boxes
• Display Property
• Positioning Schemes
• The Position Property
• Relative Positioning
• The Float Property
• The Clear Property
• Absolute Positioning
• Layered Presentation
• Color Property
• Background Properties
• Font Properties
• Summary

6. Advanced DOM

• The Event Object
• Event Bubbling
• Creating and Initializing an Event
• Dispatching an Event
• Example
• Handling Events
• Register Using HTML Markup
• Register Using Element Property
• Register Using DOM API
• Best Practice
• Canceling Default Action
• Working With Styles
• Example
• The Style Object
• Setting Style of an Element
• Working With Style Sheets
• DOM HTML API
• Table DOM Objects
• The HTMLTableElement Object
• The HTMLTableRowElement Object
• The HTMLTableCellElement Object
• Example of Table DOM API
• The Form Element Objects
• The HTMLFormElement Object
• The HTMLInputElement Object
• The HTMLSelectElement Object
• The HTMLOptionElement Element
• Review Questions
• Review Answers

7. Communication With Server - Basic

• Introduction
• Application Layer Protocol
• Plain HTML Snippet
• XML Document
• XML Document Server Side
• Example: Build DOM Document in Java
• Example: Write DOM Document in HTTP Reply
• Example: The Servlet
• C#: Create a XML DOM Document
• C#: Output XML in HTTP Reply
• XML Document - Client Side
• DOM API Summary
• DOM API The Document Object
• DOM API The Element Object
• Body Text of an Element
• Setting Body Text
• Displaying Body Text
• Using XML As Request Data
• Creating a New DOM Document
• Serializing DOM Document as Text
• Posting an XML Document
• Processing the Posted XML From a Servlet
• Review Questions
• Review Answers

8. Communication With Server - JSON

• Introduction
• JavaScript Object Notation (JSON)
• JSON Syntax
• How Does JSON Based Communication Work?
• How JSON Based Communication Work?
• JSON: Server Side
• JSON: Client Side
• Working With Arrays
• Advanced JSONObject Methods
• Advanced JSONArray Methods
• Summary
• Review Questions
• Review Answers

9. Direct Web Remoting (DWR)

• Introduction
• How DWR Works
• DWR: The Server Side
• Configuring the Server Side
• The dwr.xml File
• DWR: The Client Side
• Unit Testing
• Accessing Servlet API Objects
• Error Handling
• Review Questions
• Review Answers

10. The Dojo Toolkit

• Objectives
• Introduction
• Simple Example Tab Widget
• How Does DOJO Work?
• Importing Packages
• Widget Basics
• Widget Layout Example
• The Two byId() Methods
• Widget Properties
• Widget Events
• Common Features of Widgets
• Form Input Widgets
• The Button Widget
• The Checkbox Widget
• The ComboBox Widget
• The FilteringSelect Widget
• The DateTextBox Widget
• Layout Widgets
• Other Common GUI Widgets
• Creating Widget Instances Programmatically
• Creating Widgets Programmatically
• Summary
• Review Questions
• Review Answers

11. Dojo Event System

• Objectives
• Introduction
• Difference from DOM Event Handling
• JavaScript Function Call Event
• Writing a JavaScript Class
• Writing an Event Handler Class
• Attaching the Event Handler
• Handling Widget Event
• More on Handler Attachment
• The Dojo Event Object
• Window Load/Unload Event
• Publish Subscribe System
• Writing a Publisher
• Writing a Subscriber
• Publishing the Message
• Summary
• Review Questions
• Review Answers

12. Debugging Dojo Applications

• Objectives
• Logging in Dojo
• Using Debug
• Log Severities
• Mozilla Debugging Tools
• IE Debugging Tools
• Other Tools
• Summary
• Review Questions
• Review Answers

13. Advanced JavaScript

• Objectives
• Basic Objects
• Constructor Function Object
• Object Properties
• Constructor and Instance Objects
• Constructor Level Properties
• Namespace
• Prototype
• Prototype Property Hierarchy
• Prototype Chain
• Inheritance Using Prototype
• Extending Inherited Behavior
• Enhancing Constructors
• Improving Constructor Performance
• Event Handling Problem
• Array
• Traversing an Array
• Appending to an Array
• Deleting Elements
• Inserting Elements
• Other Array Methods
• Summary

14. Ajax Security

• Objectives
• The Same Origin Policy
• SOP Example
• Exemption from SOP
• Bypassing SOP
• Using Dynamic Script Tag
• The Main Page
• The Included Script (test.js)
• Code in Dynamic Script Element
• Using an Ajax Proxy
• Common Attacks for Ajax Applications
• Cross Site Scripting (XSS)
• XSS Example
• Preventing XSS
• JavaScript Worms
• Cross-site Request Forgery (CSRF)
• Preventing CSRF
• JavaScript or JSON Hijacking
• Hijacking Example
• Exploiting JSON Hijacking
• Preventing JSON Hijacking
• Denial of Service (DoS) Attack
• XML Bomb Attack
• Ajax Proxy Vulnerability
• Summary

15. Security Guidelines

• Objectives
• Obfuscate JavaScript Code
• Do Not Expose Privileged Functions
• Do Not Expose Database Schema
• Validate Input on Server Side
• Password Protect Sensitive Operations
• Careful of State Information
• Use White List in Ajax Proxy
• Do Not Consume Distrusted Content
• Use eval() Carefully
• Summary

16. JavaScript Performance Tuning

• Objectives
• Why Tune JavaScript Performance?
• What to Tune?
• Optimize Asset Download
• Optimize Content Rendering
• Optimize Code JavaScript Scope
• Scope Example
• Optimize Code Prototype
• Optimize Code - Prototype
• Optimize Code Avoid eval()
• Optimize Code String Concatenation
• Optimize Code Event Handling
• Ajax Tuning Immediate Update
• Ajax Tuning - Multiplexing
• Ajax Tuning Use Push
• Useful Tools
• Summary

17. Mashups

• Objectives
• Introduction
• Example ChicagoCrime.org
• Mashup Genres
• Key Components
• Key Component Details
• Retrieving Data
• Data Assembly Details
• Data Format Options
• Data Format Options (cont d)
• Instructor Demo
• Enterprise 2.0 Mashups
• Summary