Weekend MS CS ProgramInternet and Web

TechnologiesCOT 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. Introduction to Ajax2. Constituent Technologies

A. XHTMLB. CSSC. JavaScriptD. DOME. XML, XLS, XSLTF. XMLHttpRequest

3. 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 Mapshttp://maps.google.com/

Gmailhttp://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 programminghttp://en.wikipedia.org/wiki/AJAX_%28programming%29

2. Ajax information and tutorials at Fiamingadev http://dev.fiaminga.com/

3. Ajax Bloghttp://ajaxblog.com/

4. AjaxLessons.comhttp://www.ajaxlessons.com/

5. W3Schools tutorials and standardshttp://www.w3schools.org/