01/24/2022 - 01/28/2022
10:00 AM - 06:00 PM
Online Virtual Class
USD $2,295.00
Enroll
01/31/2022 - 02/04/2022
10:00 AM - 06:00 PM
Online Virtual Class
USD $2,295.00
Enroll
03/14/2022 - 03/18/2022
10:00 AM - 06:00 PM
Online Virtual Class
USD $2,295.00
Enroll

Topics

 
  • XHTML.
  • CSS2.
  • HTML Document Object Model (DOM) and the JavaScript API.
  • AJAX API.
  • Client Server RPC mechanisms such as Web Service and JSON.
  • Building an Object Oriented AJAX framework.
  • Third party AJAX frameworks such as DOJO.
  • Best practices and anti-patterns.

What you will learn

  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.

Audience

 
  • 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.

Prerequisites

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

Duration

  5 days.
Lab Setup Guide

Outline for Comprehensive AJAX

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