AJAXMaking Dynamic Web pages more Dynamic

Jim HendricksApril 25th, 2006

Outline

• Evolution of the Dynamic Web

• What is AJAX?

• Pros and Cons to AJAX

• Conclusion

Evolution of the Dynamic Web

• Static Web pages

• Server-side Applications

• Client-side Applications

• Client-side Scripting

• Server-side Scripting

Static Web pages

• No dynamics

• Stale.. Boring

• Maintenance nightmare

Server-side Applications

1993

• Common Gateway Interface (CGI)

Server-side Applications

Pros

• Can be written in any language

Cons

• Multiple Users, Multiple Instances

• Lots of overhead for the server

Client-side Applications

1993

• Applets

• Java Applets

1996

• Future Splash Animator

• Macromedia Flash

Client-side Applications

Pros

• Solves Overhead problem

Cons

• Requires User to have current plug-ins

• Limited access to server information

• Doesn’t solve static HTML issues

Client-side Scripting

1995

• LiveScript

• JavaScript

• VBScript

JavaScript

• Loosely typed language

• Written into the HTML page

Document Object Model (DOM)

• Object representation of the HTML page

• Use the id tag to create an object in the DOM

Client-side Scripting

Pros

• Wide browser support

• Fast

Cons

• Difficult to debug

Server-side Scripting

1996

• Servlets

• ASP

• JSP

1997

• PHP

Server-side ScriptingPros• Requires no plug-ins on the Users part• Separates design and code• Hides implementation details from User

Cons• Requires extra software on the server• Requires knowledge of the developer

Making Dynamic Standards

DHTML

• HTML

• CSS

• Client-side Scripting

• DOM

Internet Explorer v. Mozilla Firefox

XML

• 1998

• eXtensible Markup Language

• Client-side information online or offline

Bringing it all together

2005

• AJAX: Asynchronous JavaScript and XML

AJAX4 main components

• HTML w/ CSS

• Client-side Scripting

• XMLHttpRequest Object

• XML

HTML w/ CSS

• Basic web page framework

• Design

Client-side Scripting

• Mainly JavaScript

• Required Access to the DOM

XMLHttpRequest Object

• Retrieve data from the server

XML

• Describes data on the server

Pros for AJAX

• Wide browser support

• Portability

• Speed

Cons for AJAX

• Browser navigation Issues

• Network latency

• Difficulty debugging JavaScript

Conclusion

• AJAX can do wonderful things

References• [1] Asleson, R., Schutta, N. T. (2006). Foundations of AJAX.

Berkeley, CA: Apress.

• [2] Apple.com. (2005) Dynamic HTML and XML: The XMLHttpRequest Object. Retrieved April 1, 2006 from http://developer.apple.com/internet/webcontent/xmlhttpreq.html

• [3] Wikipedia.org. (2006) Ajax (Programming). Retrieved April 1, 2006 from http://en.wikipedia.org/wiki/Ajax_(programming)