CPS 353: Internet Programming

JavaScript Events and jQuery; Ajax, XML, and JSON

Simon Miner

Gordon College

Last Modified: 11/06/2013

Selected content adapted from material by Marty Stepp, Jessica Miller, and Victoria Kirst © 2012. Used by permission.

Agenda

• Scripture (Colossians 1) and Prayer
• Check-in
• JavaScript Events and jQuery
• Ajax, XML, and JSON
• Milestone 7

JavaScript Frameworks

• Prototype
  • Early popular framework to handle JS events, effects, Ajax
  • Scriptaculous library built on top of Prototype to support Web 2.0 UI effects
  • Used in textbook
  • Drawbacks: not self-contained, can conflict with other libraries, bulky (?) interface
  • Eclipsed as most widely used framework by...
• jQuery
  • Most popular JavaScript framework today
  • Rails 3.1 switched from Prototype to jQuery
  • Entirely self-contained, clean intuitive interface
  • Many popular extensions available - jQuery UI, jQuery Mobile, and many more...
• JavaScript MV* frameworks: Angular.js, Backbone.js, Ember.js, ...

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: jQuery and other frameworks support event-handling in a manner that is compatible across browsers

Attaching event handlers with jQuery

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

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

• to use jQuery's event features, you must attach the handler using the DOM element object's on method (added by jQuery)
• pass the event name as a string, and the function name to call
• can also use convenience methods (named for the event itself) to attach a callback to a DOM element

$("#play").click(playNewGame);

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:

Mouse events

Mouse event example

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

$(document).ready( function() {
	$("target").on("mousemove", showCoords);
});

function showCoords(event) {
	$("target").innerHTML = 
		  "pointer: (" + event.pageX() + ", " + event.pageY() + ")\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

$(document).ready( function() {
	$("textbox").on("mouseout", booyah);   // bound to text box here
	$("submit").on("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 DOM element becomes this (rather than the window)
• inside the handler, the calling jQuery object becomes $(this)
  • the result of a selector (as above) is an object

Page/window events

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

window.onload = function() { ... };
$(document).ready( 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

Stopping an event

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

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

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

• to abort a form submit or other event, call jQuery's stopPropagation() method on the event

Timer events

• both setTimeout and setInterval return an ID representing the timer
  • this ID can be passed to clearTimeout/Interval later to stop the timer

setTimeout example

<button onclick="delayMsg();">Click me!</button>
<span id="output"></span>

function delayMsg() {
	setTimeout(booyah, 5000);
	document.getElementById("output").innerHTML = "Wait for it...";
}

function booyah() {   // called when the timer goes off
	document.getElementById("output").innerHTML = "BOOYAH!";
}

setInterval example

var timer = null;  // stores ID of interval timer

function delayMsg2() {
	if (timer == null) {
		timer = setInterval(rudy, 1000);
	} else {
		clearInterval(timer);
		timer = null;
	}
}

function rudy() {   // called each time the timer goes off
	document.getElementById("output").innerHTML += " Rudy!";
}

Passing parameters to timers

function delayedMultiply() {
	// 6 and 7 are passed to multiply when timer goes off
	setTimeout(multiply, 2000, 6, 7);
}
function multiply(a, b) {
	alert(a * b);
}

• any parameters after the delay are eventually passed to the timer function
  • doesn't work in IE6; must create an intermediate function to pass the parameters
• why not just write this?

  setTimeout(multiply(6 * 7), 2000);
  

Common timer errors

• many students mistakenly write () when passing the function

  setTimeout(booyah(), 2000);
  setTimeout(booyah, 2000);
  
  setTimeout(multiply(num1 * num2), 2000);
  setTimeout(multiply, 2000, num1, num2);
  

  • what does it actually do if you have the () ?
  • it calls the function immediately, rather than waiting the 2000ms!

Example

Multiplication Quiz - modified from textbook case study

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, Flickr, Facebook,
• Ajax: Asynchronous JavaScript and XML
  • Outdated acronym that has stuck
  • 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

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 (a.k.a. xhr) 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

jQuery's $.ajax() Method

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

• construct and execute an Ajax request to a server
• parameters:
  1. the URL to fetch, as a String (this is optional),
  2. a set of options, as an array of key : value pairs in {} braces (an anonymous JS object)
• hides icky details from the raw XMLHttpRequest; works well in all browsers

$.ajax() configuration options

$.ajax() example

$.ajax({
  url: "post.php",
  data: { id: 123 },
  type: "GET",
  dataType : "json",
  success: function( json ) {
    $( "<h1/>" ).text( json.title ).appendTo( "body" );
    $( "<div class=\"content\"/>").html( json.html ).appendTo( "body" );
  },
  error: function( xhr, status ) {
    alert( "Sorry, there was a problem!" );
  },
  complete: function( xhr, status ) {
    alert( "The request is complete!" );
  }
});

• attach handlers to the request's success, error, and/or complete events

Ajax Events

Ajax Event Example

// Setting up a loading indicator using Ajax Events
$( "#loading_indicator" ).ajaxStart(function() {
  $( this ).show();
}).ajaxStop(function() {
  $( this ).hide();
});

XMLHttpRequest security restrictions

• cannot be run from a web page stored on your hard drive
• can only be run on a web page stored on a web server
• can only fetch files from the same site that the page is on
  • http://www.foo.com/a/b/c.html can only connect to www.foo.com
  • JSONP provides a way around this - remote service returns data or code in a <script> tag, circumventing the same-origin olicy

Troubleshooting and debugging Ajax

• Clear the browser cache
• Watch the server logs (Rails development.log holds a lot of details)
• Use Firebug, IE Developer Tools, Safari Web Inspector
• Net tab shows each request, its parameters, response, any errors
• expand a request with + and look at Response tab to see Ajax result
• Make and test changes in very small increments.

Rails and Ajax

• remote: true attribute in link_to or button_to

<%= button_to 'Add to Cart', line_items_path(product_id: product), remote: true %>
• format.js in respond_to block to stop normal response
• Write .js.erb file to handle response (i.e. HTML snippet, JSON)
• escape_javascript
• See Chapter 11 in the Rails text