AJAX Presentation Outline

Here's an outline of the presentation on AJAX that I gave today at my ColdFusion users group meeting.

What is AJAX?

• Asynchronous JavaScript + XML
• XMLHttpRequest Object
• A geek marketing term
• Rich Internet Applications with JavaScript

Examples of AJAX

• GMail
• Google Maps
• Basecamp

Is it new?

• Not Really
  • Hidden Frames
  • IE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+

Why is it popular?

• Google helped popularize, and legitimize it in GMail
• Increase Usability of Web Applications
• Rich Internet Applications without Flash
• Save Bandwidth
• Download only data you need
• Faster interfaces (sometimes)

Why is it bad?

• Breaks back button support
• URL's don't change as state changes
• Cross Browser Issues can be a pain
• JavaScript may tax older machines CPU
• Can't access domains other than the calling domain
• May be disabled (for security reasons) or not availiable on some browsers

Flash vs AJAX

• No plugin for AJAX
• Flash development tools cost money
• Flash typically has slower page load time
• Flash can work on older browsers
• ActionScript doesn't havea cross browser issues
• Flash can access other domains if there is a crossdomain.xml file

XMLHttpRequest

• A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript
• Make an HTTP request from a JavaScript event
• A call back JavaScript function is invoked at each state of the HTTP request and response

XMLHttpRequest Properties

• onreadystatechange - call back function for state changes
• readyState - the current state of the HTTP call
• responseText - the text result of the request
• responseXML - DOM xml object from the request
• status - HTTP status code of the response
• statusText - HTTP status text

XMLHttpRequest Example

if (window.XMLHttpRequest) {
       var req = new XMLHttpRequest();
       req.onreadystatechange = requestStateHandler;
       req.open("GET", "/somefile.xml", true);
       req.send("");
}

function requestStateHandler() {
 if (req.readyState == 4) { //response ready
       alert(req.statusText);
 }
}

IE does it different

• The above example however won't work on IE
  • req = new ActiveXOjbect("Microsoft.XMLHTTP");
  • You can't totally blame them because they invented it
  • Native XMLHttpRequest support should be in IE7

Cross Browser AJAX

var req;

function loadXMLDoc(url) {
	req = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest) {
    	try {
			req = new XMLHttpRequest();
        } catch(e) {
			req = false;
        }
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
       	try {
        	req = new ActiveXObject("Msxml2.XMLHTTP");
      	} catch(e) {
        	try {
          		req = new ActiveXObject("Microsoft.XMLHTTP");
        	} catch(e) {
          		req = false;
        	}
		}
    }
	if(req) {
		req.onreadystatechange = processReqChange;
		req.open("GET", url, true);
		req.send("");
	}
}

Source: http://developer.apple.com/internet/webcontent/xmlhttpreq.html - a great AJAX tutorial BTW.

AJAX Libraries

• Many people opt for AJAX libraries. This can ease development, but also adds bloat.
  • Prototype is popular
  • For ColdFusion there is CFAjax

Prototype Example

I posted the AJAX prototype example that I showed in the presentation in another entry.