Asynchronous JavaScript + XML (Ajax)

CSE 190 M (Web Programming), Spring 2008

University of Washington

References: w3schools, Wikipedia, Prototype Ajax, Prototype Ajax options

Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.1 Valid CSS!

Lecture outline

  1. Ajax concepts
  2. Using XMLHttpRequest
    • Prototype's Ajax facilities

Ajax concepts

web data sources, and the pages that love them

Web data

URLs and web servers

http://server/path/file

Query strings

http://www.google.com/search?q=colbert&ie=utf-8

Web data example

What is Ajax?

Web applications

Quick Ajax example

Core Ajax concepts

A typical Ajax request

request

  1. user clicks, invoking event handler
  2. that handler's JS code creates an XMLHttpRequest object
  3. XMLHttpRequest object requests a document from a web server
  4. server retrieves appropriate data, sends it back
  5. XMLHttpRequest fires event to say that the data has arrived
    • this is often called a callback
    • you can attach a handler to be notified when the data has arrived
  6. your callback event handler processes the data and displays it

Asynchronous communication

synchronous communication asynchronous communication

The XMLHttpRequest object

the core JavaScript object that makes Ajax possible

Using XMLHttpRequest

Levels of using XMLHttpRequest

  1. synchronized, text-only (SJAT?)
  2. asynchronous, text-only (AJAT?)
  3. asynchronous w/ Prototype (AJAP?)
  4. asynchronous w/ XML data (Ajax ... seen next lecture)

1. Synchronized requests (bad)

// this code is in some control's event handler
var ajax = new XMLHttpRequest();
ajax.open("get", url, false);
ajax.send(null);
do something with ajax.responseText;

Why synchronized requests suck

2. Asynchronous requests, basic idea

var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function;
ajax.open("get", url, true);
ajax.send(null);
// don't process ajax.responseText here, but in your function

The readyState property

Asynchronous XMLHttpRequest template

var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
	if (ajax.readyState == 4) {   // 4 means request is finished
		do something with ajax.responseText;
	}
};
ajax.open("get", url, true);
ajax.send(null);

What if the request fails?

var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
	if (ajax.readyState == 4) {
		if (ajax.status == 200) {   // 200 means request succeeded
			do something with ajax.responseText;
		} else {
			code to handle the error;
		}
	}
};
ajax.open("get", url, true);
ajax.send(null);

Prototype's Ajax model

new Ajax.Request(
	"url",
	{
		option : value,
		option : value,
		...
		option : value
	}
);

Prototype Ajax methods and properties

A more typical Prototype Ajax template

	new Ajax.Request(
		"url",
		{
			method: "get",
			onSuccess: functionName
		}
	);
	...

function functionName(ajax) {
	do something with ajax.responseText;
}

Handling Ajax errors w/ Prototype

	new Ajax.Request(
		"url",
		{
			method: "get",
			onSuccess: functionName,
			onFailure: ajaxFailure
		}
	);
	...
function ajaxFailure(ajax) {
	alert("Error making Ajax request:" + 
	      "\n\nServer status:\n" + ajax.status + " " + ajax.statusText + 
	      "\n\nServer response text:\n" + ajax.responseText);
}

XMLHttpRequest security restrictions

Ajax security error

Debugging Ajax code

Firebug Ajax

Prototype's Ajax Updater

	new Ajax.Updater(
		"id",
		"url",
		{
			method: "get"
		}
	);