Ajax and Web 2.0 Application Development
WD321 (classroom)
VD321 (online)
Course Abstract
Course description
This 4-day instructor-led course teaches software developers how to build the next generation of rich, interactive Web
applications using Asynchronous JavaScript and XML (Ajax) techniques using the IBM WebSphere Application Server
Feature Pack for Web 2.0.
With Ajax, the interaction model for Web applications has become more robust, allowing for continuous interaction and
improved usability. Adding Ajax capabilities to applications offers users a more interactive, responsive experience that can
provide an organization with benefits such as fewer abandoned transactions, longer user sessions, and higher completion rates.
The WebSphere Application Server Feature Pack for Web 2.0 is an IBM-supported solution for creating Ajax-based
applications and mashups on WebSphere Application Server. In addition to providing Ajax development tools, this feature
pack includes server enhancements to support common Web 2.0 applications patterns.
In this course, students learn the benefits of and the technical architecture for using Ajax in Web applications. This includes
the role of key technologies such as JavaScript, Extensible Markup Language (XML), Web services, Representational State
Transfer (REST), Web Remoting, and JavaScript Object Notation (JSON). Students also learn the benefits of using an Ajax
toolkit, such as the Dojo toolkit, which is provided in the WebSphere Application Server Feature Pack for Web 2.0. Students
learn how to use the provided Dojo widgets, how to extend Dojo to build their own widgets, and how Dojo can help with crossbrowser JavaScript incompatibilities. The course also covers how to build Dojo-based applications and use compression to
improve runtime performance.
In addition, students learn about the server-side requirements for Ajax application development, including how to use the Web
remoting capability in the IBM WebSphere Application Server Feature Pack for Web 2.0 to connect directly to Enterprise Java
services using REST.
Hands-on exercises using IBM Rational Application Developer V7.5, IBM WebSphere Application Server V7, and the IBM
WebSphere Application Server Feature Pack for Web 2.0 are provided throughout the course, enabling students to build their
skills applying Ajax to Web applications. Skills covered by the exercises include testing Ajax Web applications, developing
REST Web services, JavaScript programming with Dojo, and creating custom Dojo widgets.
For information on other related WebSphere courses, visit the WebSphere Education Training Paths Web site:
http://www.ibm.com/software/websphere/education/paths/
General information
Delivery method:
Classroom or instructor-led online (ILO)
Audience:
This course is designed for Web application developers who create interactive Web applications
using Ajax.
Learning objectives:
After completing this course, students should be able to:
 Describe the benefits of using Ajax in Web application development
 Describe the technical architecture for Ajax applications
 Describe the use of JavaScript, XML, and Web services in Ajax applications
 Apply Ajax techniques to enhance the responsiveness and interaction of Web pages
 Describe the benefits of using an Ajax toolkit, such as the Dojo toolkit
 Debug JavaScript code in Ajax applications
IBM WebSphere Education
http://www.ibm.com/websphere/education
Contact us at: websphere_skills@us.ibm.com








Use the Web remoting capability to simplify connecting directly to Enterprise Java services
using REST (Representational State Transfer)
Identify and select appropriate APIs and widgets provided by the Dojo toolkit
Compare and contrast the different mechanisms to transfer data between client and server
in Ajax applications
Leverage JavaScript Object Notation (JSON) as a lightweight data format
Extend the components and widgets provided by the Dojo toolkit
Set up a development environment to use IBM WebSphere Application Server Feature
Pack for Web 2.0
Use the WebSphere Application Server Feature Pack for Web 2.0 to build rich internet
applications
Build Dojo-based applications and use compression to improve runtime performance
Prerequisites:
Before taking this course, students should be able to implement dynamic Web applications.
Familiarity with software development on Enterprise Java (J2EE) platforms, such as IBM
WebSphere Application Server, is recommended.
Duration:
4 days
Skill level:
Basic
Notes
The unit and exercise durations listed below are estimates, and may not reflect every class experience. If the course is
customized or abbreviated, the duration of unchanged units will probably increase.
This course is an update of the following previous course:
 WD320/VD320 ERC 1.0, Developing Ajax Applications with the Web 2.0 Feature Pack
Course agenda
Course introduction
Duration: 15 minutes
Unit 1. Rich, interactive Web applications
Duration: 1 hour
Learning objectives:
After completing this unit, students should be able to:
 Define Web 2.0 in terms of the user experience
 Explain the concept of asynchronous Web application requests
 Describe the issues addressed by the Ajax Web development technique
Unit 2. Introduction to JavaScript
Duration: 1 hour
Learning objectives:
After completing this unit, students should be able to:
 Describe the role of JavaScript in Web applications
 Explain the scoping rules for variables in JavaScript
 Define and evaluate a function in JavaScript
IBM WebSphere Education
http://www.ibm.com/websphere/education
Contact us at: websphere_skills@us.ibm.com
Exercise 1. Enhancing Web page interaction with JavaScript
Duration: 45 minutes
Learning objectives:
After completing this exercise, students should be able to:
 Add JavaScript code into Web pages
 Import JavaScript libraries for use in Web pages
 Declare and execute JavaScript functions
 Use built-in JavaScript string functions and properties
 Handle Web browser form events with JavaScript functions
Unit 3. Document Object Model
Duration: 30 minutes
Learning objectives:
After completing this unit, students should be able to:
 Describe the linkages between the JavaScript language and the Document Object
Model (DOM)
 List the DOM levels and activities
 Identify the DOM objects commonly used in JavaScript applications for working with
HTML documents
Unit 4. The Ajax Web development technique
Duration: 1 hour
Learning objectives:
After completing this unit, students should be able to:
 Explain the role of JavaScript in providing client-side interactivity
 Describe the technical architecture for Ajax applications
 Compare and contrast the hidden iframe technique with the XMLHttpRequest object
Unit 5. Ajax and Web browser compatibility
Duration: 30 minutes
Learning objectives:
After completing this unit, students should be able to:
 Identify issues with using JavaScript for interactivity
 Explain the same origin security policy
 Describe issues with JavaScript implementation differences across browsers
Exercise 2. Implementing the Ajax Web development technique
Duration: 1 hour
Learning objectives:
After completing this exercise, students should be able to:
 Use the XMLHttpRequest object in a Web page to make asynchronous calls to the
server
 Build dynamic page elements using the Ajax Web development technique and the
Document Object Model (DOM) API
 Write robust JavaScript implementations of the Ajax Web development technique that
are cross-browser compatible
Unit 6. Ajax development tools
Duration: 1 hour
Learning objectives:
After completing this unit, students should be able to:
IBM WebSphere Education
http://www.ibm.com/websphere/education
Contact us at: websphere_skills@us.ibm.com
 Identify the tools available for testing, debugging, and developing Ajax Web
applications
 Describe the main features for Ajax Web application development in IBM Rational
Application Developer for WebSphere Software V7.5
 Describe the main features of the Firebug plug-in for the Mozilla Firefox Web browser
Exercise 3. Testing the Ajax Web application
Duration: 45 minutes
Learning objectives:
After completing this exercise, students should be able to:
 Monitor and analyze Web application traffic from an Ajax Web application using the
Firebug plug-in for Mozilla Firefox
 Verify cross-browser compatibility
Unit 7. Web 2.0 protocols and data formats
Duration: 1 hour
Learning objectives:
After completing this unit, students should be able to:
 Explain the need for a lightweight SOA architecture in contrast to enterprise SOA
architectures
 Describe the role of HTTP as an application protocol for Web 2.0 interactions
 Explain the issues with using the Extensible Mark Up Language (XML) as a data
format
 Explain how JavaScript Object Notation (JSON) provides a lightweight data format
 Describe the client-server interaction in a JSON-RPC call
 Identify the role of Really Simple Syndication (RSS) and Atom in a Web 2.0
application
Unit 8. REST Web services
Duration: 1 hour
Learning objectives:
After completing this unit, students should be able to:
 Explain the concept of Representational State Transfer (REST) as an architectural style
 Describe the differences between REST Web services and RPC (Remote Procedure
Call) Web services
 Design the operations and messages for a REST Web service
 Describe a REST Web service using a Web Services Description Language (WSDL)
document
Exercise 4. Developing REST Web services
Duration: 1 hour
Learning objectives:
After completing this exercise, students should be able to:
 Design a RESTful Web service
 Implement a servlet-based implementation of a REST Web service
 Convert between JSON data types and Java data types using the JSON4J API
Unit 9. IBM WebSphere Application Server Feature Pack for Web 2.0
Duration: 1 hour
Learning objectives:
After completing this unit, students should be able to:
IBM WebSphere Education
http://www.ibm.com/websphere/education
Contact us at: websphere_skills@us.ibm.com
 Describe the benefits of adding the WebSphere Application Server Feature Pack for
Web 2.0
 Describe how to install and configure the feature pack
 Describe the connectivity between the Web 2.0 features and internal SOA services
 Identify the role of major Web 2.0 feature pack components
 Explain the sample Web 2.0 applications included with the feature pack
Exercise 5. Exposing Enterprise Java resources to Ajax Web applications
Duration: 1 hour 30 minutes
Learning objectives:
After completing this exercise, students should be able to:
 Implement a REST interface for a back-end service
 Configure an RPC interface for a back-end service using the RPC adapter application
 Use the JSON4J API to create JSON data from JavaBeans
Unit 10. Introduction to the Dojo toolkit
Duration: 1 hour
Learning objectives:
After completing this unit, students should be able to:
 Identify barriers to Web 2.0 and Ajax adoption
 Describe the main features of the Dojo toolkit
 Identify and explain the five main components within the Dojo architecture
 Explain the concept and benefits of using Dojo widgets
 Describe DojoX, its benefits, and its features
 List additional utilities available in Dojo
Exercise 6. Developing Ajax applications with Dojo core
Duration: 1 hour
Learning objectives:
After completing this exercise, students should be able to:
 Invoke REST Web services using the Dojo core libraries
 Work with the DOM model using the dojo.query object
 Compare and contrast the object-oriented model provided by the Dojo toolkit and the
JavaScript language
Unit 11. Dijit: The Dojo widget library
Duration: 1 hour
Learning objectives:
After completing this unit, students should be able to:
 Describe the common features available to all widgets
 Explain how to use and apply the widget theme system
 Explain the globalization and accessibility features available within widgets
Exercise 7. Using simple Dojo widgets
Duration: 1 hour
Learning objectives:
After completing this exercise, students should be able to:
 Use the Dojo toolkit in an Ajax Web page
 Build dynamic page elements using Dojo widgets
 Write Ajax scripts that leverage the Dojo toolkit for cross-browser compatibility
IBM WebSphere Education
http://www.ibm.com/websphere/education
Contact us at: websphere_skills@us.ibm.com
Unit 12. JavaScript programming with Dojo and Dijit
Duration: 1 hour
Learning objectives:
After completing this unit, students should be able to:
 Identify the core functions common to all Dojo objects
 Describe the object-oriented features implemented in Dojo
 Exploit Dojo modularization
 Describe the event system provided by the Dojo toolkit
 Describe the drag-and-drop functionality in Dojo
Exercise 8. JavaScript programming with Dojo and Dijit
Duration: 1 hour
Learning objectives:
After completing this exercise, students should be able to:
 Develop client-side logic using the Dojo object-oriented programming model
 Develop event-driven code using the Dojo toolkit
 Implement drag-and-drop functionality using the Dojo toolkit
Unit 13. Asynchronous requests with Dojo
Duration: 45 minutes
Learning objectives:
After completing this unit, students should be able to:
 Describe the steps involved in parsing JavaScript Object Notation (JSON) data using
the Dojo toolkit
 Describe the procedure for sending form data in an AJAX request
 Identify alternate transports for sending requests
 Describe the steps for handling an asynchronous remote procedure call (RPC) with the
Dojo toolkit
Exercise 9. Invoking asynchronous requests with Dojo
Duration: 1 hour
Learning objectives:
After completing this exercise, students should be able to:
 Add and configure Dojo widgets on a Web page
 Invoke server-side JSON-RPC services
 Describe and monitor the HTTP request sent from client to server
 Describe and monitor the HTTP response sent from server to client
 Debug JSON-RPC requests using the Firebug plug-in for the Mozilla Firefox browser
Unit 14. Querying DOM with Dojo
Duration: 30 minutes
Learning objectives:
After completing this unit, students should be able to:
 Describe the steps involved in selecting nodes by tag, ID, or class
 Describe the steps involved in making a relative position query
 List the standard Cascading Style Sheets (CSS) 3 selectors supported by the dojo.query
function
IBM WebSphere Education
http://www.ibm.com/websphere/education
Contact us at: websphere_skills@us.ibm.com
Unit 15. Dojo data access
Duration: 30 minutes
Learning objectives:
After completing this unit, students should be able to:
 Identify and explain the dojo.data terminology and architecture
 Explain the features available in dojo.data
 Describe a scenario for using the dojo.data API
 Explain how to retrieve and parse items and values
Exercise 10. Integrating response data into a Dojo widget
Duration: 1 hour
Learning objectives:
After completing this exercise, students should be able to:
 Store rows of data from a JSON object in a client-side Dojo data store and
subsequently retrieve them
 Display rows of data from a data store on a Web page using the Dojo grid widget
 Write Dojo data formatter functions to format data displayed in a Dojo grid widget
Unit 16. Custom Dojo widgets
Duration: 45 minutes
Learning objectives:
After completing this unit, students should be able to:
 Create Dijits programmatically
 Identify common attributes that allow for the customization of existing Dijits
 Design code for extension points common to existing Dijits
 Create a new Dijit by extending an existing Dijit
Exercise 11. Creating a custom Dijit
Duration: 1 hour
Learning objectives:
After completing this exercise, students should be able to:
 Use the dojo.declare() method to create a widget that extends an existing widget class
 Identify the approach and resources needed to a create custom widget
 Create a template, Cascading Style Sheet (CSS), and JavaScript file that implement a
custom widget
Unit 17. Building and deploying Ajax applications
Duration: 30 minutes
Learning objectives:
After completing this unit, students should be able to:
 Describe the purpose of compression in Ajax applications
 Implement ShrinkSafe compression
Exercise 12. Building and compressing a Dojo application
Duration: 45 minutes
Learning objectives:
After completing this exercise, students should be able to:
 Create a Dojo profile with the necessary components to run an application
 Run the build and compress process with command line options
IBM WebSphere Education
http://www.ibm.com/websphere/education
Contact us at: websphere_skills@us.ibm.com
Unit 18. Course summary
Duration: 15 minutes
Learning objectives:
After completing this unit, students should be able to:
 Explain how the course met its learning objectives
 Submit an evaluation of the class
 Identify other WebSphere Education courses related to this topic
 Access the WebSphere Education Web site
 Locate appropriate resources for further study
IBM WebSphere Education
http://www.ibm.com/websphere/education
Contact us at: websphere_skills@us.ibm.com