AJAX for Java Developers

At completion you should:

• Understand the principles of interactive Web applications and how Ajax is used to create them
• Understand how XMLHttpRequest works, and use it with JavaScript to update a Web page
• Use Servlets/JSP to handle Ajax requests
• Understand JSON (JavaScript Object Notation)
• Use JavaScript/DOM/Ajax to manipulate Web page structure
• Be familiar with Ajax technologies and frameworks such as Prototype, script.aculo.us, Dojo, and JSON libraries
• Understand the basics of CSS and use it with Ajax
• Use Ajax with HTML/JSON/XML on the client and server side
• Use Direct Web Remoting (DWR) and other RPC technologies
• Use Ajax with JSF
• Understand issues with using Ajax technology

• Web Developers using AJAX
• Java Developers who need to work with AJAX-based Web applications

• Basic knowledge of HTML and JavaScript and practical Java and Servlet/JSP programming experience

AJAX FOR JAVA DEVELOPERS

• WORKSHOP OVERVIEW
• WORKSHOP OBJECTIVES
• WORKSHOP AGENDA
• COURSE PREREQUISITES
• RELEASE LEVEL

SESSION 1: AJAX OVERVIEW

• LESSON OBJECTIVES

RICH INTERNET APPLICATIONS

• WHAT ARE RICH INTERNET APPLICATIONS
• RIA TECHNOLOGIES
• DOJO FISHEYELIST WIDGET DEMO

AJAX INTRODUCTION

• WHAT IS AJAX
• AJAX EXAMPLE – GOOGLE SUGGEST
• RIA/AJAX EXAMPLE – GOOGLE MAPS
• THE AJAX DIFFERENCE
• AJAX, JAVASCRIPT, DHTML AND MORE
• XMLHTTPREQUEST
• XMLHTTPREQUEST EXAMPLE
• WHAT THIS COURSE WILL FOCUS ON
  • LAB 1.1 – SETTING UP THE ENVIRONMENT

SESSION 2: JAVASCRIPT BASICS

• LESSON OBJECTIVES

JAVASCRIPT INTRODUCTION

• WHAT IS JAVASCRIPT
• EXPLORING JAVASCRIPT
• JAVASCRIPT VARIABLES
• JAVASCRIPT - WRITING TO THE WEB PAGE
• JAVASCRIPT POPUP BOXES
  • LAB 2.1 – USE JAVASCRIPT IN AN HTML PAGE

JAVASCRIPT FUNCTIONS

• JAVASCRIPT FUNCTION OVERVIEW
• JAVASCRIPT FUNCTION EXAMPLE
• EXTERNAL JAVASCRIPT FILES
• FUNCTIONS AS DATA
• STANDARD JAVASCRIPT FUNCTIONS
  • LAB 2.2 – USE JAVASCRIPT FUNCTIONS

ACCESSING AND MODIFYING HTML ELEMENTS

• A MORE COMPLEX HTML PAGE
• ACCESSING ELEMENTS VIA THE DOCUMENT OBJECT
• THE INNERHTML PROPERTY
• EXAMPLE - MODIFYING AN HTML PAGE
  • LAB 2.3 – ACCESSING AND MODIFYING HTML ELEMENTS
• REVIEW QUESTIONS
• LESSON SUMMARY

SESSION 3: XMLHTTPREQUEST

• LESSON OBJECTIVES

XMLHTTPREQUEST BASICS

• MORE ABOUT XMLHTTPREQUEST
• CREATING AN XMLHTTPREQUEST OBJECT
• SUBMITTING A REQUEST
• XMLHTTPREQUEST PROPERTIES
• EXAMPLE – SUBMITTING A REQUEST
• RESULT – SUBMITTING A REQUEST
  • LAB 3.1 – WORKING WITH XMLHTTPREQUEST

ASYNCHRONOUS REQUESTS

• HANDLING AN ASYNCHRONOUS RESPONSE
• THE READYSTATE PROPERTY

ONREADYSTATECHANGE EVENT HANDLER

• ASYNCHRONOUS REQUEST EXAMPLE
• XMLHTTPREQUEST METHODS
  • LAB 3.2 – AN ASYNCHRONOUS REQUEST
• REVIEW QUESTIONS
• LESSON SUMMARY

SESSION 4: SERVLETS AND JSP WITH AJAX

• LESSON OBJECTIVES

OVERVIEW OF SERVLETS

• JAVA EE AND WEB APPLICATIONS
• SIMPLE WEB-CENTRIC ARCHITECTURE
• JAVA EE WEB APPLICATIONS
• WEB APPLICATION STRUCTURE
• USING SERVLETS
• A SIMPLE HTTP SERVLET
• HOW A SERVLET WORKS
• THE WEB ARCHIVE (WAR) FILE
• EXAMPLE WEB.XML FILE
• DEPLOYING WEB APPLICATIONS
• SERVLETS AND AJAX
• ACCESSING THE SERVLET USING AJAX
• A SERVLET HANDLING A POST REQUEST
  • LAB 4.1 – GENERATING AJAX DATA WITH A SERVLET

OVERVIEW OF JAVASERVER PAGES (JSP)

• WHAT IS A JSP?
• A VERY SIMPLE JSP - SIMPLE.JSP
• JSPS LOOK LIKE HTML
• JSP EXPRESSIONS
• JSPS ARE REALLY SERVLETS
• LIFECYCLE OF A JSP
• OBJECT BUCKETS OR SCOPES
• PREDEFINED JSP VARIABLES - IMPLICIT OBJECTS
• WORKING WITH <JSP:USEBEAN>
• MORE <JSP:USEBEAN>
• HOW A SERVLET WORKS WITH A JSP
• ISSUES WITH JSP
• CUSTOM TAGS
• CUSTOM TAGS AND TAG LIBRARIES
• THE JSTL
• TAGLIB DIRECTIVE IN JSP
• EXAMPLE - CUSTOM TAGS IN A JSP FILE
• A SERVLET AND JSP COOPERATING
• THE <C:FOREACH> TAG
  • LAB 4.2 – GENERATING AJAX DATA WITH A JSP
• REVIEW QUESTIONS
• LESSON SUMMARY

SESSION 5: MORE JAVASCRIPT AND AJAX

• LESSON OBJECTIVES

BROWSER EVENTS

• EVENT BASED PROGRAMMING
• EVENT HANDLERS
• DEFINED BROWSER EVENTS
• DEFINED EVENTS
• FORM VALIDATION
• ONLOAD AND ONUNLOAD EVENTS
• USING AJAX AND EVENTS
• AJAX AND EVENTS
  • LAB 5.1 – USE EVENTS TO TRIGGER AJAX

JAVASCRIPT OBJECTS AND ARRAYS

• JAVASCRIPT OBJECTS
• CREATING JAVASCRIPT OBJECTS
• WORKING WITH OBJECTS AND FUNCTIONS
• WORKING WITH OBJECT PROPERTIES
• ARRAYS IN JAVASCRIPT
• WORKING WITH ARRAYS
• ARRAY METHODS
• JOIN() EXAMPLE
• OBJECTS AS ARRAYS
  • LAB 5.2 – USING OBJECTS

CLASSES IN JAVASCRIPT

• CLASSES IN JAVASCRIPT
• JAVASCRIPT CONSTRUCTORS
• THE NEW OPERATOR
• MORE ON CONSTRUCTORS
• THE OBJECT CLASS
• THE PROTOTYPE PROPERTY
• PROPERTIES OF THE PROTOTYPE
• A MORE COMPLETE CLASS
• MODULES AND NAMESPACES
• AN EXAMPLE OF USING NAMESPACES
• UTILITY MODULES
  • LAB 5.3 – CREATING MODULES
• REVIEW QUESTIONS
• LESSON SUMMARY

SESSION 6: CLIENT SIDE FRAMEWORKS

• LESSON OBJECTIVES

FRAMEWORK OVERVIEW

• NO NEED TO REINVENT THE WHEEL
• CAPABILITIES OF CLIENT SIDE JAVASCRIPT LIBRARIES
• GENERAL LIBRARY CAPABILITIES
• SOME CLIENT SIDE JAVASCRIPT LIBRARIES'

PROTOTYPE OVERVIEW

• ABOUT PROTOTYPE
• UTILITY METHODS AND DOM EXTENSIONS
• UTILITY METHODS OF ELEMENT CLASS
• THE $() UTILITY FUNCTION
• USING $ AND THE DOM EXTENSIONS
• PROTOTYPE AJAX SUPPORT
• AJAX.REQUEST
• DIRECT AJAX VS. AJAX.REQUEST EXAMPLE
• AJAX.REQUEST - ADDITIONAL OPTIONS
• AJAX.UPDATER
• OTHER PROTOTYPE CAPABILITIES
• MUCH MORE CAPABILITY
  • LAB 6.1 – USING PROTOTYPE

SCRIPT.ACULO.US OVERVIEW

• SCRIPT.ACULO.US
• USING SCRIPT.ACULO.US
• THE SCRIPTACULOUS AUTOCOMPLETER
• AUTOCOMPLETER EXAMPLE
  • LAB 6.2 – USING THE SCRIPT.ACULO.US AJAX.AUTOCOMPLETER

OTHER FRAMEWORKS AND LIBRARIES

• SOME WELL KNOWN FRAMEWORKS
• - DOJO FUNCTIONALITY -
• DOJO.XHR* FUNCTIONS
• USING DOJO.XHRGET()
• DOJO.XHRGET ERROR HANDLING
• SOME ISSUES WITH DOJO
• - YAHOO USER INTERFACE TOOLKIT (YUI) -
• THE YUI DOM CLASS
• A SIMPLE APPLICATION WITH YUI
• YUI AND AJAX
• YUI AJAX EXAMPLE
• TABVIEW AND TREEVIEW
• RICH TEXT EDITOR AND CALENDAR CONTROL
• OTHER YUI CAPABILITIES
  • LAB 6.3 – USING YUI.
• - THE GOOGLE AJAX SEARCH API -
• GOOGLE SEARCH API CODE
• OVERVIEW OF CODE EXAMPLE
• GOOGLE SEARCH PAGE DISPLAY
• MUCH MORE CAPABILITY
• - GOOGLE MAPS API -
• MAPS API DISPLAY
• ADDITIONAL GOOGLE MAPS API CAPABILITY
• TRAFFIC OVERLAY EXAMPLE
• REVIEW QUESTIONS
• LESSON SUMMARY

SESSION 7: CASCADING STYLE SHEETS

• LESSON OBJECTIVES

CASCADING STYLE SHEETS

• ISSUES WITH FORMATTING IN HTML
• CASCADING STYLE SHEETS (CSS)
• DECLARING STYLE INFORMATION
• STYLE SHEETS
• USING STYLE SHEETS
• RESULTING DISPLAY
• THE CLASS SELECTOR
• DESCENDANT SELECTORS
• ID SELECTORS
• DISPLAY AND VISIBILITY STYLE PROPERTIES
• OTHER STYLE PROPERTIES
• SCRIPTING STYLES
• SCRIPTING CLASSES
• THE 'CASCADING' IN CSS
  • LAB 7.1 – USING CSS TO MODIFY AJAX.AUTOCOMPLETER
• REVIEW QUESTIONS
• LESSON SUMMARY

SESSION 8: JSON (JAVASCRIPT OBJECT NOTATION)

• LESSON OBJECTIVES

JSON (JAVASCRIPT OBJECT NOTATION) OVERVIEW

• WHAT IS JSON
• REVIEW OF JAVASCRIPT LITERALS
• ARRAYS AND MORE COMPLEX OBJECTS
• JSON DETAILS
• CREATING JSON STRINGS IN JAVASCRIPT
• PARSING JSON STRINGS IN JAVASCRIPT
• PARSING STRINGS WITH JSON.PARSE()'

JSON ON THE SERVER

• CREATING JSON TEXT ON THE SERVER
• JSONOBJECT AND JSON
• JSONARRAY
• CREATING JSON TEXT FROM POJOS
• CREATING JSON TEXT FROM COLLECTIONS
• DEALING WITH DATES
• CUSTOM DATE SERIALIZATION
• JSONSERIALIZER
• JSONSTRINGER
• OTHER JSON-LIB CAPABILITIES

AUTOCOMPLETE EXAMPLE USING JSON

• AN AUTOCOMPLETE EXAMPLE WITH JSON
• AN INPUT FIELD GENERATING AJAX REQUESTS
• PRODUCING JSON IN A SERVLET
• JAVASCRIPT CODE CONSTRUCTING SUGGESTIONS
• ACCESSING THE JSON DATA WE WANT
• JAVASCRIPT CODE CONSTRUCTING THE SUGGESTIONS
• AUTOCOMPLETE AT WORK

OTHER JSON TOOLS

• THE JSON UNIVERSE
  • [OPTIONAL] LAB 8.1 – GENERATING AND USING JSON DATA
• REVIEW QUESTIONS
• LESSON SUMMARY

SESSION 9: XML AND AJAX

• LESSON OBJECTIVES

XML OVERVIEW

• WHAT IS XML?
• BENEFITS OF XML - EXAMPLE XML DOCUMENT
• THE UNDERLYING THEME OF XML
• JAVATUNES PURCHASE ORDER DOCUMENT - BODY
• THE DOCUMENT BODY AND ELEMENTS
• ATTRIBUTES

WORKING WITH XML

• WORKING WITH XML AND AJAX
• ACCESSING XML WITH AJAX
• WORKING WITH XML DOCUMENTS
• JAVATUNES PURCHASE ORDER DOCUMENT
• JAVATUNES ORDER AS A DOM TREE
• MORE ABOUT THE W3C DOM
• TRAVERSING A DOCUMENT WITH JAVASCRIPT
• GETTING NODE INFORMATION
• FINDING NODES IN A DOCUMENT
• WHITE SPACE HANDLING AND OTHER ISSUES
• - CREATING XML DOCUMENTS ON THE SERVER
• PRODUCING XML WITH A SERVLET AND JSP
• THE JSP GENERATING THE XML

AUTOCOMPLETE EXAMPLE USING XML

• AN AUTOCOMPLETE EXAMPLE WITH XML
• AN INPUT FIELD GENERATING AJAX REQUESTS
• XML DOCUMENT FROM SERVLET/JSP
• JAVASCRIPT CODE CONSTRUCTING THE SUGGESTIONS
• ACCESSING THE XML NODES WE WANT
• USING THE SUGGESTIONS
• AUTOCOMPLETE AT WORK

XML VERSUS JSON

• XML AND JSON FOR DATA INTERCHANGE
• SUMMARY
  • LAB 9.1 – GENERATING AND USING XML DATA
• REVIEW QUESTIONS
• LESSON SUMMARY

SESSION 10: DWR (DIRECT WEB REMOTING) AND OTHER TECHNOLOGIES

• LESSON OBJECTIVES

DWR OVERVIEW

• WHAT IS DWR?
• HOW DWR WORKS
• GETTING STARTED WITH DWR
• WEB.XML CONFIGURATION FOR DWR
• DWR.XML CONFIGURATION FILE
• RUNNING THE TEST PAGES - <WEBAPP>/DWR
• RUNNING THE TEST PAGES
  • LAB 10.1 – USING THE DWR TEST PAGES

WORKING WITH DWR

• INCLUDING THE DWR JAVASCRIPT CODE
• USING THE DWR PROXIES
• USING THE DWR PROXIES
• FUNCTIONS WITH JAVA OBJECT ARGUMENTS
• DWR OPTIONS
• REVERSE AJAX
  • LAB 10.2 – USING DWR

OTHER TECHNOLOGIES

• JSON-RPC
• USING JSON-RPC-JAVA
• - GOOGLE WEB TOOLKIT (GWT)
• GWT ARCHITECTURE
• HELLO WORLD WITH GWT
• THE GENERATED APPLICATION
• MORE ABOUT GWT
• PROS / CONS OF GWT
• REVIEW QUESTIONS
• LESSON SUMMARY

SESSION 11: AJAX AND JSF

• LESSON OBJECTIVES

JSF OVERVIEW

• JSF PURPOSE AND GOALS
• JSF API
• JSF AS MVC
• JSF VIEWS - FACELETS
• FACELETS DEFINED
• JAVABEAN DEFINED
• MANAGED BEANS AS JSF MODEL
• JSF CONTROLLER COMPONENTS
• MANAGED BEANS - PART OF JSF CONTROLLER
• FACES-CONFIG.XML DETAILS
• FACES-CONFIG.XML STRUCTURE
• ARCHITECTURE DIAGRAM
• YOUR FIRST JSF APPLICATION
• CONFIGURING FACESSERVLET IN WEB.XML
• JSF CONTROLLER
• JSF HELLOWORLD - FACELET
• JSF HELLOWORLD – VIEWING THE FACELET
• FACES-CONFIG.XML
• REVIEW OF MANAGED BEANS
• A SIMPLE MANAGED BEAN
• MANAGED BEANS LIFECYCLE
• DECLARING A MANAGED BEAN
• SAMPLE LOGON FORM
• EXAMINING THE LOGON FORM
• LINKING INPUT FIELDS TO BEAN PROPERTIES
• SUBMITTING THE FORM
• METHOD BINDING EXPRESSIONS
• DYNAMIC NAVIGATION RULE
• CREATING / DEPLOYING A JSF APPLICATION

AJAX AND JSF

• JSF AND AJAX
• SIMPLE AJAX EXAMPLE
• F:AJAX DETAILS
• AJAX EXAMPLE - GROUPING
  • LAB 11.1 – USING JSF AND AJAX

SESSION 12: DESIGN AND BEST PRACTICES

• LESSON OBJECTIVES

JAVASCRIPT BEST PRACTICES

• JAVASCRIPT IS A KEY AJAX TECHNOLOGY
• OBJECT-ORIENTED, MODULAR JAVASCRIPT
• DEALING WITH BROWSERS
• SEPARATE CONTENT, BEHAVIOR, & PRESENTATION.
• JAVASCRIPT TIPS AND TECHNIQUES
• DON'T REINVENT THE WHEEL

AJAX DESIGN

• AJAX IS STILL EVOLVING AND MATURING
• BASIC AJAX DESIGN PRINCIPLES AND PATTERNS
• BASIC AJAX DESIGN PATTERNS
• USE AJAX WHERE APPROPRIATE
• NETWORK USAGE CONSIDERATIONS
• AJAX AND THE BACK BUTTON – THE PROBLEM
• AJAX AND THE BACK BUTTON - SOLUTIONS
• USER INTERFACE DESIGN CONSIDERATIONS
• OTHER AJAX DESIGN CONSIDERATIONS

AJAX SECURITY IDEAS

• GENERAL SECURITY ISSUES FOR AJAX
• BASIC SECURITY GUIDELINES
• SCRIPTING VULNERABILITIES – MALICIOUS CODE
• THE DANGERS OF CODE INJECTION.
• XSS - SAME ORIGIN POLICY
• SAME ORIGIN POLICY – THE GOOD AND THE BAD
• PREVENTING MALICIOUS CONTENT
• JSON ISSUES.
• SECURITY SUMMARY
• - FINAL SUMMARY -
• RESOURCES