Find Courses Here
Mastering AJAX Print E-mail
Course Length - 3 Days
 
Course Description

This training course teaches AJAX and all of its foundational technologies. XHTML and CSS2 are covered in details. Students will also learn the HTML Document Object Model (DOM) and how to manipulate a page dynamically in the client side using JavaScript. The AJAX API is covered in details. Students will also learn how to build their own AJAX based framework which will help them write complex applications quickly. Students will be able to write rich AJAX applications, and learn how to develop an AJAX framework. Popular third party AJAX frameworks - such as Dojo - are taught and the RPC mechanism - such as - XML and JSON. . 

 

You Will Learn How To:

After completing this AJAX training course, the student should be able to:

  • Understand what is AJAX and when to use AJAX.
  • Plan the architecture of an application that will use AJAX.
  • Manipulate look and feel and content of a page dynamically and in the client side using JavaScript. Because they learn CSS2 and HTML DOM, they will be able to create impressive visual effects and rich customer experience.
  • Make an AJAX application interact with the server using an RPC mechanism.
  • Know how to build the server side code to support an AJAX client.
  • Use a third party AJAX framework. 
 

Course Prerequisites

  • J2EE based web application development.
  • Basic knowledge of JavaScript and HTML.
 

Who Should Attend?

  • Web based application developers. The class is designed mainly for the J2EE developers.
  • Web site designers with good knowledge of Java Scripting can also take this class.
 

Course Outline:

Introduction to AJAX

  • 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

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

JavaScript DOM API

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

AJAX API Details

  • The Request Object
  • Creating the Request Object
  • The Request Object
  • Simple GET Example
  • Making a POST Request
  • Mozilla XmlHttpRequest Extensions
  • IE Microsoft.XMLHTTP Extensions
  • Making Concurrent Requests
  • Memory Leak With Inner Function
  • A POST Utility Function

Advanced DOM

  • The Event Object
  • Event Bubbling
  • Creating and Initializing an Event
  • Dispatching an Event
  • Example
  • Handling Events
  • Registering Event Handler
  • Best Practice
  • 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

Communication With Server - Basic

  • 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

Communication With Server - JSON

  • 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

Direct Web Remoting (DWR)

  • 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

The Dojo Toolkit

  • 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 Widgets
  • The Button Widget
  • The Checkbox Widget
  • The ComboBox Widget
  • The DateTextBox Widget
  • Layout Widgets
  • Other Common GUI Widgets
  • Creating Widgets Programmatically
  • Custom Widget Development

Dojo Event System

  • Difference from DOM Event Handling
  • JavaScript Function Call Event
  • Writing a JavaScript Class
  • Writing an Event Handler Class
  • Attaching the Event Handler
  • Before Advice Event Handler
  • Around Advice Event Handler
  • Example Around Advice Handler
  • Handling Widget Event
  • More on Handler Attachment
  • The Dojo Event Object
  • Window Load/Unload Event
  • Publish Subscribe System
  • Writing a Message Class
  • Writing a Publisher
  • Writing a Subscriber
  • Publishing the Message

Debugging Dojo Applications

  • Basic Logging in Dojo
  • Using Debug
  • Mozilla Debugging Tools
  • IE Debugging Tools
  • Other Tools
 
[ Back ]
© 2008 Dashcourses Training