AJAX

Is it Just a Buzz Word?

Bryan Mills

University of Pittsburgh

What is AJAX?

• Asynchronous Javascript And Xml
• Term coined by Jesse James Garrett in Early 2005
• Encompasses several technologies
• Enables the creation of dynamic Web Applications
• It has and will continue to change the face of the Web

Why should you care?

• Amazon lists over 90 books published on AJAX
• Jobs: Indeed lists over 3500 jobs with the term 'ajax'
• Web applications have continued to penetrate virtually all application spaces
• AJAX enables Dynamic User Interfaces via the Web
• More Efficient Applications (both in bandwidth and usability)
• Yet, another tool in your toolbox

Who Cares About AJAX

• Google Maps, Gmail
• Amazon
• Microsoft - Office Live
• flickr
• SalesForce
• Netflix

What is it?

• Combination of Technologies
1. Web Standards (html and css)
2. Document Object Model (DOM) Scripting
3. XMLHttpRequest object enabling Javascript to make Asynchronous HTTP requests back to the server
4. Javascript (aka ECMAScript) binding all this together

Whats it look like?

Is this stuff new?

• Not at All!
• Javascript dates back to the early days of Netscape
• DOM scripting starting in the late 1990's (see DHTML)
• XMLHttpRequest is a bit more recent (last 2 years or so - Microsoft actually had a similar structure available in 1999)

Why all the buzz?

• Major Sites using the technology
• Users more accepting of upgrading browsers
• It has a name
• Architecture Patterns being identified and written about
• Browsers becoming standards compliant
• Frameworks being built to enable ease of implementation
• More and more web-applications

Traditional Model

• Traditional Web Systems make blocking calls back to the server

Asynchronous what?

• AJAX enables asynchronous calls by the Client
• Allows more interactive sites
• Decrease bandwidth, faster response, just plain cool

How do we do this?

if (window.XMLHttpRequest) {
    var req = new XMLHttpRequest();
    req.onreadystatechange = requestHandler;
    req.open("GET", "/somefile.xml", true);
    req.send("");
}
function requestHandler() {
    if (req.readyState == 4) { 
       alert(req.statusText);
       req.responseXML.getElementById(blah);
    }
}

NOTE: IE uses a different name for the object.

req = new ActiveXOjbect("Microsoft.XMLHTTP");

Much more information available.

Does it have to XML responses?

• JSON (JavaScript Object Notation)
• Instead of passing heavy XML objects just pass JavaScript
• ex: {'varname':'value','varname2':'value2'}
• No DOM parsing! Just use the JavaScript eval function
• HTML (format the response on the server)
• TEXT (the easy way out)
• XML (Intended Use)

Example

• As an example lets build a little rating feature
• A little PHP as the back-end
• Javascript to send the users votes back to the server
• Javascript to modify the DOM tree to give the user feedback
• Inspired from Netflix and Amazon Rating system

The Bad Stuff

• Breaks back button
• Cross-browser support
• Security at the browser can cause your application to break
• Only able to request from the same server the page loaded from
• Lots more code to do simple tasks (similar to threaded code vs non-thread)
• Pooling for data instead of being notified
• Interpreted Language - Sending your precious code to the client
• Is this really robust?

Options anyone?

• Java Applets
• Flash
• Active-X
• SVG
• XUL - Mozilla
• XAML - Microsoft

Libraries

• Javascript libraries being generated
1. Mochikit - provides DOM scripting and AJAX helpers (python inspired)
2. DOJO - Browser Widget and Messaging System
• Complete frameworks server and client
1. Ruby on Rails - Provides server and tight integration with data store
2. TurboGears - Python stack similar to ruby on rails
3. Echo 2 - Java framework
4. Atlas - Microsoft ASP.net

Is it more than buzz?

• Open Standards
• Not vendor locked
• Built upon existing technology
• Service Oriented Architecture is proven
• Everyone expects Google
• Business Case for Usability

Thank You!

Questions?

bryan@mills1.net