CSE 190M Web Programming

Lecture 18: Ajax

Reading: 12.1 - 12.2

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, Victoria Kirst and Roy McElmurry IV. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Synchronous web communication

• synchronous: user must wait while new pages load
  • the typical communication pattern used in web pages (click, wait, refresh)

Web applications and Ajax

• web application: a dynamic web site that mimics the feel of a desktop app
  • presents a continuous user experience rather than disjoint pages
  • examples: Gmail, Google Maps, Google Docs and Spreadsheets, Flickr, A9
• Ajax: Asynchronous JavaScript and XML
  • not a programming language; a particular way of using JavaScript
  • downloads data from a server in the background
  • allows dynamically updating a page without making the user wait
  • avoids the "click-wait-refresh" pattern
  • examples: UW's CSE 14x Diff Tool, Practice-It; Google Suggest

Asynchronous web communication

• asynchronous: user can keep interacting with page while data loads
  • communication pattern made possible by Ajax

XMLHttpRequest (and why we won't use it)

• JavaScript includes an XMLHttpRequest object that can fetch files from a web server
  • supported in IE5+, Safari, Firefox, Opera, Chrome, etc. (with minor compatibilities)
• it can do this asynchronously (in the background, transparent to user)
• the contents of the fetched file can be put into current web page using the DOM
• sounds great!...
• ... but it is clunky to use, and has various browser incompatibilities
• jQuery provides a better wrapper for Ajax, so we will use that instead

A typical Ajax request

1. user clicks, invoking an event handler
2. handler's code creates an XMLHttpRequest object
3. XMLHttpRequest object requests page from server
4. server retrieves appropriate data, sends it back
5. XMLHttpRequest fires an event when data arrives
   • this is often called a callback
   • you can attach a handler function to this event
6. your callback event handler processes the data and displays it

An aside: Creating a new anonymous object

var name = {
	fieldName: value,
	...
	fieldName: value
};

var pt = {
	x: 4,
	y: 3,
	distanceFromOrigin: function() {
		return Math.sqrt(this.x * this.x + this.y * this.y);
	}
};
alert(pt.x + ", " + pt.y + ", dist=" + pt.distanceFromOrigin());

• in JavaScript, you can create a new object without creating a class
• the object can have methods (function properties) that refer to itself as this

jQuery's ajax method

$.ajax({
	"url": "http://foo.com",
	"option" : "value",
	"option" : "value",
	...
	"option" : "value"
});

• call the $.ajax() method
• constructor accepts an object literal full of options that dictate the behavior of the AJAX request:
  1. the url to fetch, as a String,
  2. the type of the request, GET or POST
  3. etc...
• hides icky details of the raw XMLHttpRequest; works well in all browsers

$.ajax() options

jQuery AJAX example

$.ajax({
	"url": "foo/bar/mydata.txt",
	"type": "GET",
	"success": myAjaxSuccessFunction,
	"error": ajaxFailure
});
function myAjaxSuccessFunction(data) {
	// do something with the data
}
function ajaxFailure(xhr, status, exception) {
	console.log(xhr, status, exception);
}

• attach an event handler function to the request's success and error events

AJAX data parameter

The data passed to your success handler will be in whatever format you specified in the dataType option

• a dataType of text returns raw text no matter its apparent data type
• a dataType of html returns raw html text
• a dataType of xml returns an XML document object
• a dataType of json returns a JSON object

Handling Ajax errors

$.ajax(
	"url": "http://foo.com",
	"type": "GET",
	"success": functionName,
	"error": ajaxFailure
});
...
function ajaxFailure(xhr, status, exception) {
	console.log(xhr, status, exception);
}

• for user's (and developer's) benefit, show an error message if a request fails

Better jQuery AJAX

Rather than specify all of the options in an object literal...

$.ajax({
	"url": "http://foo.com",
	"type": "GET",
	"success": functionName,
	"error": ajaxFailure
});

one can pass the URL as the first parameter and the rest as an object literal.

$.ajax("http://foo.com", {
	"type": "GET",
	"success": functionName,
	"error": ajaxFailure
});

Why? It makes it even easier to see what this AJAX request is doing.

Even Better jQuery AJAX

Rather than supply the handlers as fields in the options object...

$.ajax("http://foo.com", {
	"type": "GET",
	"success": functionName,
	"error": ajaxFailure
});

use these event handler function calls done() and fail() instead

$.ajax("http://foo.com", {
	"type": "GET"
})
	.done(functionName)
	.fail(ajaxFailure);

They do the same thing as the success and error options respectively except that they are method calls and let up break up the syntax a little.

Debugging AJAX code

• Chrome Dev Tool's Network tab shows each request, parameters, response, errors
• expand a request by clicking on it and look at Response tab to see Ajax result
• check the Console tab for any errors that are thrown by requests

Passing query parameters to a request

$.ajax("lookup_account.php", {
	"type": "get",
	"data": {
		"name": "Ed Smith",
		"age": 29,
		"password": "abcdef"
	},
})
	.done(function)
	.fail(ajaxFailure);

• don't concatenate the parameters onto the URL yourself with "?" + ...
  • won't properly URL-encode the parameters
  • won't work for POST requests
• query parameters are passed as a data object literal
  • (the above is equivalent to: "name=Ed+Smith&age=29&password=abcdef")

Creating a POST request

$.ajax("url", {
	"type": "POST",
	"data": {
		"name": value,
		"name": value,
		...,
		"name": value
	},
})
	.done(function)
	.fail(ajaxFailure);

• type should be changed to "POST" (GET is default)
• however this is not the best way to do it, you should use $.get() and $.post() instead

$.get() and $.post() shortcuts

• Often you don't need the flexibility of $.ajax() function
  • The options are hard to remember
  • You don't usually need all of the options
• These shortcut functions are preferred when additional options are not needed.

$.get(url, [data])
	.done(function)
	.fail(function);

$.post(url, [data])
	.done(function)
	.fail(function);

More about $.get() and $.post()

Why bother making the distinction if it all boils down to a call to $.ajax() under the hood

• it is less error prone
• it is easier to read
• let's you forget about some of the AJAX options

XMLHttpRequest security restrictions

• Ajax must be run on a web page stored on a web server
  • (cannot be run from a web page stored on your hard drive)
• Ajax can only fetch files from the same server that the page is on
  • http://www.foo.com/a/b/c.html can only fetch fromwww.foo.com

jQuery's $.ajaxSetup() function

Often your AJAX requests use very similar option values.

• "timeout": 1000
• "cache": Math.random()
• "error": ajaxFailure

$.ajaxSetup({
	"option": "value",
	"option": "value",
	...
});

• sets up a default value for a given option for all Ajax requests
• can be useful for attaching a common failure/exception handler to all requests in one place

AJAX user feedback

• Users don't like unresponsiveness
• Often you show some sort of loader image or text while the request is made

User feedback with always()

The general technique is to show() some feedback when the AJAX request starts and hide() it again once it finishes.

• the always() function is an event that the AJAX request fires everytime the request finishes, whether it was successful or not
• this might be some typical user feedback code

$.get("url")
	.done(function)
	.error(function)
	.always(function() {
		$("#loader").hide();
	});
$("#loader").show();

Global AJAX events

• User feedback and similar scenarios are so common that jQuery made global events for them
• Any element can register for these events just like a click() event method

User feedback example

$(function() {
	$("#loader")
		.hide()
		.ajaxStart(function() {
			$(this).show();
		}).ajaxStop(function() {
			$(this).hide();
		});

	$("#mybutton").click(function() {
		$.get("http://foo.com")
			.done(function)
			.error(ajaxFailure);
	});
});