Alex Russell

ISOC-IL Ajax Tutorial

XHR & Debugging Basics
Handling Responses
Gotchas and Libraries

Not individual pages or largely static sites

"When all you have is a hammer..."
HTTP is the only game in town
Making discrete requests was hard
- <iframe>, <img>, cookies
There had to be something better!

Introduced by Microsoft in 1999
- Requirements driven by OWA team
Implemented in Mozilla in 2002
No "click of death"
Can GET and POST
Same-origin policy still in effect
API not standardized (yet)

Listen for event
Create XHR object, set parameters
Register callbacks
Send to network
Handle the return data

Listen to the user
Take action on their behalf
Tell them what happened

function getXmlHttp(){
	var http, last_e;

	try{ http = new XMLHttpRequest(); }catch(e){}

	// IE branch, uses MSIE-specific "conditional comments"
	/*@cc_on @*/
	/*@if (@_jscript_version >= 5)
	if(!http){
		var progIds = [
			'Msxml2.XMLHTTP', 
			'Microsoft.XMLHTTP',
			'Msxml2.XMLHTTP.4.0'
		];
		for(var i=0; i<progIds.length; ++i){
			var objectType = progIds[i];
			try{
				http = new ActiveXObject(objectType);
			}catch(e){ last_e = e; }
		}
	}
	@end @*/
	return http; // XHR object
}

var xhrObj = getXmlHttp(); // from prev slide

// URL must be on the same domain!
var getURL = "thinger.xml?thud=thonk";

// tell it where to go and what verb to use
xhrObj.open("GET", getURL);

xhrObj.onreadystatechange = function(){
	// we got *something* back
	if(4==xhrObj.readyState){ // need to check xhrObj.status!
		// xhrObj.responseText;
		// xhrObj.responseXML;

		alert(xhrObj.responseText);
	}else{
		// can handle other network events here
	}
}
xhrObj.send(null);

easiest way to find out is to and watch

Jim Ley's excellent intro article
Apple dev network article
Mozilla XHR docs
The MS ActiveX API
W3C WebAPIs Working Group (they're working to standardize XHR)

Firebug
TamperData
Etheral/tcpdump/tcpflow
SquareFree Shell
Microsoft Script Editor/VS2005
Drosera
Paralles/VMWare/VirtualPC

setRequestHeader()
abort()
getResponseHeader()
overrideMimeType()
onerror() (handler)

We still need to:
- Get at the returned data
- Handle errors
- Put the new data in the UI
- Communicate what happened to the user

XML
Plain text
- JavaScript
- JSON
- Other plain-text formats

It's XML
Native parsing
XPath works (mostly)
Simple if data is already XML

It's XML
Big on the wire
Browser still XSLT spotty (but improving)
Server probably already "speaks" XML

Pros:
- It's not XML
- Small on the wire
- Super fast to parse (eval())
Cons:
- Transformation relatively slow
- No XSLT equivalent

Pros:
- Can send behavior (handy!)
- Small on the wire
- Super fast to parse (eval())
Cons:
- Can send behavior (insecure!)
- Transforming is relatively slow
- No XSLT equivalent

You MUST send a mimetype of "text/xml"
- IE will not populate the XML document if your forget this
- You can use the network debugging tools to check this

Small Documents
- DOM traversal to get values (brittle)
- Serialize with "innerXML" functions
Larger Documents
- XSLT (fast!)
- XPath for DOM queries
- ...but not an even playing field yet
- Safari can't (yet) do XSLT right

`thinger.xml`

<?xml version='1.0' encoding='utf-8' ?>
<node>
	<thinger>look ma! no hands!</thinger>
</node>

`thinger.xsl`

<?xml version='1.0' encoding='iso-8859-1'?>
<xsl:stylesheet version='1.0'
	xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>

<xsl:output method='html'
	version='1.0'
	encoding='iso-8859-1'
	indent='no'/>

<xsl:template match="//node/thinger">
	<b>the stylesheet says: <xsl:value-of select="." /></b>
</xsl:template>
</xsl:stylesheet>

var xhrObj = getXmlHttp(); // from prev slides
xhrObj.open("GET", "thinger.xml");

xhrObj.onreadystatechange = function(){
	if(4==xhrObj.readyState){
		var doc = xhrObj.responseXML.documentElement;
		var thinger = doc.getElementsByTagName("thinger")[0];
		alert(thinger.firstChild.nodeValue);
	}
}
xhrObj.send(null);

var xhrObj = getXmlHttp();
xhrObj.open("GET", "thinger.xml", false); // get it synchronously
xhrObj.send(null);
var sourceDoc = xhrObj.responseXML;

// get the transform document synchronously
var xhrObj2 = getXmlHttp();
xhrObj2.open("GET", "thinger.xsl", false);
xhrObj2.send(null);

// XSLTProcessor is Mozilla-specific
var processor = new XSLTProcessor();
processor.importStylesheet(xhrObj2.responseXML);
var fragment = processor.transformToFragment(sourceDoc, document);
dojo.require("dojo.dom"); // hand-waving about Dojo here
document.getElementById("xsltout").value = dojo.dom.innerXML(fragment);

result value

var sourceDoc = new ActiveXObject("Microsoft.XMLDOM")
sourceDoc.async = false
sourceDoc.load("thinger.xml")

var xslDoc = new ActiveXObject("Microsoft.XMLDOM")
xslDoc.async = false
xslDoc.load("thinger.xsl")

var result = sourceDoc.transformNode(xslDoc);
document.getElementById("iexsltout").value = result;

result value

It is! but it gets worse...
- Neither method works on Safari today
- XSLTProcessor supported on WebKit nightlies
- XSLT 1.0, no EXSLT or XSLT 2.0
Sarissa and AJAXSLT help some
All major browsers will have good XSLT within the next year

JSON, invented by Douglas Crockford
Proposed IETF standard
Broad language support
Simple format
- No namespaces
- UNICODE
- Supports: Arrays, Maps, Numbers, Strings, false, true, null
eval() is the fastest parser available to JS

`thinger.json`

{
  "node": {
    "thinger": "look ma! no hands!"
  }
}

Remember `thinger.xml`?

<?xml version='1.0' encoding='utf-8' ?>
<node>
	<thinger>look ma! no hands!</thinger>
</node>

var xhrObj = getXmlHttp(); // from prev slides
xhrObj.open("GET", "thinger.json");

xhrObj.onreadystatechange = function(){
	if(4==xhrObj.readyState){
		var jsonText = xhrObj.responseText;
		// note the "()" around the JSON!
		var jsonObj = eval( "(" + jsonText + ")" );
		alert(jsonObj.node.thinger);
	}
}
xhrObj.send(null);

Ensure all GET requests are idempotent
Pay attention to cache control headers
Give the user feedback
Test your code on every browser

Use Ajax just because you can
Build UI's that can't operate without JavaScript
- Unless this is an explicit design choice
- Libraries can make this much easier
Assume that users need Ajax
Assume that you know where all the bodies are buried because you attended this tutorial!

Synchronous requests 'hang' the UI
Setting onreadystatechange on IE causes memory leakage
2 concurrent connections. No more.
Safari's XHR only allows POST and GET. No DAV for you!
Can't "talk" across domains
No file upload
Return order not guaranteed

Lots of choices
Many have a developer or language affinity
Excellent closed-source options available
4 good Open Source, back-end-neutral options:
Learn one of these and use it!
Examples from here in will use Dojo

All of those choices include:
- Ajax/XHR abstractions
- Event handling abstractions
- Animation infrastructure
- A "packed" version for use in deployment

"Just Tell Me Which Library To Use!"

The goal is better interactions
Improved load times might outweight Ajax additions
Degradeability and toolkit choice are specific to your requirements

Your App Might Be Better Off Without Ajax

But Never Write Raw XHR If You Do Use Ajax

dojo.require("dojo.io.*");

var bindArgs = {
	url: "thinger.cgi",
	load: function(type, data, event, requestObj){
		// handle success here
	},

	// properties below are optional and change request behavior
	contents: { foo: "bar", baz: "thud" },
	mimetype: "text/json",
	error: function(type, err, event, requestObj){
		// handle failure here
	}
};

var requestObj = dojo.io.bind(bindArgs);

Good Toolkits Are Layered

Size
Accumulated wisdom and workarounds
A community hopefully
Someone to yell at
All the other stuff that makes Ajax UI's "work"

Critical thinking
Empathy
Familiarity with existing solutions
Determination

Alex Russell

ISOC-IL Ajax Tutorial

Not individual pages or largely static sites

thinger.xml

thinger.xsl

thinger.json

Remember thinger.xml?

"Just Tell Me Which Library To Use!"

Your App Might Be Better Off Without Ajax

But Never Write Raw XHR If You Do Use Ajax

Good Toolkits Are Layered

`thinger.xml`

`thinger.xsl`

`thinger.json`

Remember `thinger.xml`?