CSSE 290 Web Programming

Lecture 19: More events, Ajax intro

Reading: 11.1, 12.1

Attribution:Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. 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.

Otherwise noted: Claude Anderson was given permission to modify the slides for CSSE 290 at Rose-Hulman by author Jessica Miller. The authors' original slides, based on Web Programming Step by Step, can be seen at http://webstepbook.com.
Some of the examples in some days' slides are from David Fisher at Rose-Hulman, who was kind enough to allow me to use them. My intention is to mark these examples with [DSF].

JavaScript events

• the click event (onclick) is just one of many events that can be handled
• problem: events are tricky and have incompatibilities across browsers
  • reasons: fuzzy W3C event specs; IE disobeying web standards; etc.
• solution: Prototype includes many event-related features and fixes

Attaching event handlers the Prototype way

element.onevent = function;
element.observe("event", function);

// call the playNewGame function when the Play button is clicked
$("play").observe("click", playNewGame);

• to use Prototype's event features, you must attach the handler using the DOM element object's observe method (added by Prototype)
• pass the event name as a string, and the function name to call
• handlers must be attached this way for Prototype's event features to work

• observe substitutes for addEventListener (not supported by IE)

The event object

function name(event) {
	// an event handler function ...
}

• Event handlers can accept an optional parameter to represent the event that is occurring. Event objects have the following properties / methods:

• *   replaces non-standard srcElement and which properties
• ** replaces non-standard return false;, stopPropagation, etc.

Mouse events

Mouse event objects

The event passed to a mouse handler has these properties:

• *   replaces non-standard properties pageX and pageY
• ** replaces non-standard properties button and which

Mouse event example

<pre id="target">Move the mouse over me!</pre>

window.onload = function() {
	$("target").observe("mousemove", showCoords);
};

function showCoords(event) {
	$("target").innerHTML = 
		  "pointer: (" + event.pointerX() + ", " + event.pointerY() + ")\n"
		+ "screen : (" + event.screenX + ", " + event.screenY + ")\n"
		+ "client : (" + event.clientX + ", " + event.clientY + ")";
}

Move the mouse over me!

The keyword this

this.fieldName                  // access field
this.fieldName = value;          // modify field

this.methodName(parameters);    // call method

• all JavaScript code actually runs inside of an object
• by default, code runs in the global window object (so this === window)
  • all global variables and functions you declare become part of window
• the this keyword refers to the current object

Event handler binding

window.onload = function() {
	$("textbox").observe("mouseout", booyah);   // bound to text box here
	$("submit").observe("click", booyah);       // bound to submit button here
};

function booyah() {           // booyah knows what object it was called on
	this.value = "booyah";
}

• event handlers attached unobtrusively are bound to the element
• inside the handler, that element becomes this (rather than the window)

Fixing redundant code with this

<fieldset>
	<label><input type="radio" name="ducks" value="Huey"  /> Huey</label>
	<label><input type="radio" name="ducks" value="Dewey" /> Dewey</label>
	<label><input type="radio" name="ducks" value="Louie" /> Louie</label>
</fieldset>

function processDucks() {
	if ($("huey").checked) {
		alert("Huey is checked!");
	} else if ($("dewey").checked) {
		alert("Dewey is checked!");
	} else {
		alert("Louie is checked!");
	}
	alert(this.value + " is checked!");
}

• if the same function is assigned to multiple elements, each gets its own bound copy

Page/window events

• The above can be handled on the window object. An alternative to window.onload:

window.onload = function() { ... };
document.observe("dom:loaded", function() {
	// attach event handlers, etc.
});

Keyboard/text events

• focus: the attention of the user's keyboard (given to one element at a time)

Key event objects

• issue: if the event you attach your listener to doesn't have the focus, you won't hear the event
  • possible solution: attach key listener to entire page body, outer element, etc.

Form events

• Prototype adds the following methods to form controls' DOM objects:

Prototype form shortcuts

$F("formID")["name"]

• gets parameter with given name from form with given id

$F("controlID")

• $F function returns the value of a form control with the given id

  if ($F("username").length < 4) {
  	$("username").clear();
  	$("login").disable();
  }
  

Stopping an event

<form id="exampleform" action="http://foo.com/foo.php">...</form>

window.onload = function() {
	$("exampleform").observe("submit", checkData);
};

function checkData(event) {
	if ($F("city") == "" || $F("state").length != 2) {
		alert("Error, invalid city/state.");  // show error message 
		event.stop();
		return false;
	}
}

• to abort a form submit or other event, call Prototype's stop method on the event

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 server in the background
  • allows dynamic updates of page without making user wait
  • avoids "click-wait-refresh" pattern
  • Concept developed gradually in late 1990's and early 2000's
  • First called "Ajax" in 2005

Asynchronous web communication

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

XMLHttpRequest

• JavaScript includes an XMLHttpRequest object that can fetch files from a web server
  • supported in IE5+, Safari, Firefox, Opera, Chrome, etc. (with minor incompatibilities)
• 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
• Prototype 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 info from server
4. server retrieves appropriate data, sends it back
5. XMLHttpRequest fires an event when data arrives
   • we attach a handler function to this event (callback)
6. callback event handler processes the data and displays it

An aside: Creating a new anonymous object

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

var p = {
	x: 4,
	y: 3,
	distanceFromOrigin: function() {
		return Math.sqrt(this.x * this.x + this.y * this.y);
	}
};
alert(p.x + ", " + p.y + ", dist=" + p.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

Prototype's Ajax model

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

• construct a Prototype Ajax.Request object to request a page from a server using Ajax
• constructor accepts 2 parameters:
  1. the URL to fetch, as a String,
  2. a set of options, as a set of key : value pairs in {} braces
     (an anonymous JavaScript object)
• hides messy details of the raw XMLHttpRequest; works well in all browsers

Prototype Ajax options

Prototype Ajax example

	new Ajax.Request("foo/bar/mydata.txt", {
		method: "get",
		onSuccess: myAjaxSuccessFunction
	});
	...

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

• attach an event handler function to the request's onSuccess event
• the handler takes an Ajax response object as a parameter, which we'll name ajax

Ajax response object's properties

function myAjaxSuccessFunction(ajax) {
	alert(ajax.responseText);
}

• most commonly used property is responseText, to access the fetched text content

Handling Ajax errors

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

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

Passing query parameters to a request

new Ajax.Request("lookup_account.php", {
	method: "get",
	parameters: {name: "Ed Smith", age: 29, password: "abcdef"},
	onFailure: ajaxFailure,
	onException: 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 parameters object, {} braces with name : value pairs
  • (the above is equivalent to: "name=Ed+Smith&age=29&password=abcdef")

Creating a POSTrequest

new Ajax.Request("url", {
	method: "post",
	parameters: {name: value, name: value, ..., name: value},
	onSuccess: functionName,
	onFailure: functionName,
	onException: functionName
});

• method should be changed to "post" (or omitted; post is default)