Introduction to AJAX Programming Techniques (4 days)

AJAX is a fast growing use of JavaScript and XML to make "behind-the-scenes" http requests that can populate data on the page. In our class you will learn the JavaScript and CSS you need to be effective.

Course 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
  • Exercise 1: Ajax using the POST method
  • Exercise 2: Displaying and Updating Records
  • Conclusion
• Ajax Frameworks
  • The Purpose of Frameworks
  • Choosing a Framework
  • Dojo
  • Downloading Dojo
  • Using Dojo for Ajax
  • Exercise 3: Using Dojo for XMLHttpRequests
  • Prototype
  • Downloading Prototype
  • Using Prototype for Ajax
  • Exercise 4: Using Prototype for XMLHttpRequests
  • Other Popular Frameworks
  • Direct Web Remoting (DWR
  • AjaxAnywhere
  • Simple Ajax (SAJAX
  • Sarissa
  • Other Frameworks
  • Conclusion
• The HTML Document Object Model
  • Accessing Nodes
  • Accessing Element Nodes
  • Exercise 5: Attaching Events
  • 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
  • Exercise 6: Equalizing the Browser DOMs
  • Creating New Nodes
  • Exercise 7: Creating and Inserting DOM Nodes
  • Conclusion
• XML and Ajax
  • Creating a DOM Document with JavaScript
  • Accessing, Creating and Modifying XML Nodes
  • Creating an AddChild() Function
  • Exercise 8: Loading XML Data into an HTML Page
  • Receiving XML Responses
  • Exercise 9: Handling responseXML
  • Conclusion
• Ajax Applications
• Login Form
• Quick Lookup Form
• Exercise 10: Creating a Simple Lookup Form
• Preloaded Data
• Ajax Slideshow
• Navigable Tables
• Exercise 11: Create Navigable Table Rows (optional exercise
• Conclusion
• OO JavaScript and Refactoring Ajax
  • Illustrating the Problem
  • Object-Oriented JavaScript
  • JavaScript Classes
  • Prototypes
  • Extending Built-in Objects
  • Exercise 12: Working with Objects
  • Refactoring the Ajax Request Code
  • Exercise 13: Fixing the Ajax Quiz
  • Conclusion
• JavaScript Object Notation (JSON)
  • Object Literals
  • Arrays
  • Objects
  • Arrays in Objects
  • Objects in Arrays
  • JSON
  • JSON Syntax
  • JSON Parsers
  • Exercise 14: Using JSON
  • JSON Advantages and Disadvantages
  • Conclusion
• XSLT Transformations with JavaScript
  • XSLT
  • Basic XSLT
  • XSLT in the Browser
  • XSLT in Internet Explorer
  • XSLT in Mozilla
  • Sarissa
  • Exercise 15: XSLT Transformations with Sarissa
  • Advantages and Disadvantages of XSLT in Ajax Applications
  • Conclusion
• Drag and Drop
  • Drag and Drop Basics
  • script.aculo.us
  • Draggables
  • Droppables
  • A More Interesting Example
  • Conclusion
• More Ajax Applications
  • Inline Editing
  • Exercise 16: Extending the Inline Editing Page
  • Detailed Information on Demand
  • Autologout
  • Autocompletion
  • Conclusion

Ajax Training Course Materials

Each student will get a copy of Ajax In Action by Dave Crane and Eric Pascarello, in addition to a comprehensive set of materials, including course notes and all the class files (Ajax Training published by Webucator).

See also

JavaScript / Cascading Style Sheets /AJAX Training

• Introduction to Cascading Style Sheets (2 days)
• Comprehensive JavaScript (5 days)
• Introduction to AJAX (2 days)