info343/minilabs/11/solution/minilab11.js

// minilab11.js
// Sample JavaScript solution code for Mini-lab 11: AJAX + JSON
// INFO 343 Autumn 2012
// Morgan Doocy

// When the document's ready, attach a click handler to the 'fetch' button.
$(document).ready(function() {
   $('#fetch').click(fetchClick);
});

// Handle clicking on the 'fetch' button. (Make Ajax request.)
function fetchClick() {
   $.ajax('/*[<ins>]*/images.json/*[</ins>]*/', {
      success: /*[<ins>]*/injectImages/*[</ins>]*/,
      error: ajaxError
   });
}

/*[<ins>]*/// Inject the given images into #output.
function injectImages(images) {
   $.each(images, function(i, image) {
      $('<img>').attr('src', image.file).attr('alt', image.caption).appendTo('#output');
   });
}/*[</ins>]*/

// Provided Ajax error handler function (displays useful debugging information).
function ajaxError(jqxhr, type, error) {
  var msg = "An Ajax error occurred!\n\n";
  if (type == 'error') {
    if (jqxhr.readyState == 0) {
      // Request was never made - security block?
      msg += "Looks like the browser security-blocked the request.";
    } else {
      // Probably an HTTP error.
      msg += 'Error code: ' + jqxhr.status + "\n" + 
             'Error text: ' + error + "\n" + 
             'Full content of response: \n\n' + jqxhr.responseText;
    }
  } else {
    msg += 'Error type: ' + type;
    if (error != "") {
      msg += "\nError text: " + error;
    }
  }
  alert(msg);
}