Weekend MS CS Program Internet and Web Technologies COT 5930

Weekend MS CS Program
Internet and Web Technologies
COT 5930
Web Project Development - Ajax
Dr. Roy Levow, Associate Chair & Professor
Email: roy@cse.fau.edu
Phone: 954-236-1170
Web: http://www.cse.fau.edu/~roy
Lesson Plan
1.
2.
Introduction to Ajax
Constituent Technologies
A.
B.
C.
D.
E.
F.
3.
XHTML
CSS
JavaScript
DOM
XML, XLS, XSLT
XMLHttpRequest
Simple Ajax Examples
Ajax
Asynchronous JavaScript And XML
 Provides a framework for the
development of web pages that are

Interactive
 Highly dynamic


Small transfers that update current
page provide faster, smoother
response
Ajax Site Example

Google Suggest (Beta)
http://www.google.com/webhp?complete=1&hl=en

Google Maps
http://maps.google.com/

Gmail
http://gmail.google.com/

Google Page Creator (Beta)
http://pages.google.com/
Ajax vs Classic Page Loads
Classic Synchronous Loads
Ajax Asynchronous Loads
Pros and Cons of Ajax: Pros

Interactivity
Achieved by direct manipulation of DOM
 Quick updates using incremental data
loads


Portability
Open standards
 JavaScript is supported by most current
browsers

Pros and Cons of Ajax: Cons

Inefficiency
Interpreted code
 Overhead of XML transfer (larger files)


Portability
Requires JavaScript
 Also requires ActiveX on IE
 Inconsistent rendering

Issues with response to Back button
 Accessibility issues

Alternative Technologies

Macromedia Flash
Highly interactive
 Prepackaged “movies”
 Requires plugin


Java Web Start


Java application interacts between client
and server
Microsoft .NET
Ajax Component Technologies
XHTML
 CSS
 JavaScript
 Document Object Model (DOM)
 XML and XSLT
 XMLHttpRequest

Ajax Design Principles
Highly interactive
 Smooth responses


Separation of
Data
 Presentation
 Program logic

Ajax Tools

A variety and growing number of
tools have been developed to support
Ajax technology
Provide consistent development
environment
 Hide XML and XMLHttpRequest
complexity

Ruby on Rails / Ajax on Rails
 Eclipse Ajax Tool Framework

Video Introduction

Introduction to Ajax video from text

what_is_ajax.mov
XHTML
Provides basis for presentation of web
pages
 Tutorial and Standard at W3Schools

Cascading Style Sheets (CSS)
Provide for separation of format from
content
 Tutorial and Standard at W3Schools

Domain Object Model (DOM)
Dynamic access to elements of web
page in browser
 Support for XHTML, XML, CSS
 Introduction to DOM



W3 Schools XML DOM Tutorial
Using DOM for DHTML

Ryan's DHTML Tutorial, Part 4
XML
Extensible Markup Language
 Provides basic structure for
representation of data and other
structured documents
 Tutorial and Standard at W3Schools
 Review of XML Namespaces

XSL

Extensible Stylesheet Language
More than just stylesheets
 For application to XML

XSLT for transforming XML documents
(into XHTLM)
W3 Schools XSLT Tutorial
 XPath for selecting parts of an XML
document
W3 Schools XPath Tutorial

References
1.
Wikipedia – Ajax programming
http://en.wikipedia.org/wiki/AJAX_%28programming%29
2.
Ajax information and tutorials at
Fiamingadev
http://dev.fiaminga.com/
3.
Ajax Blog
http://ajaxblog.com/
4.
AjaxLessons.com
http://www.ajaxlessons.com/
5.
W3Schools tutorials and standards
http://www.w3schools.org/