AJAX

class overview

  • Homework Solution
  • Ajax
  • HTTP Verbs
  • Same Origin Policy
  • JSONP
  • Google Spreadsheets
  • Spreadsheet AJAX
  • Homework Overview

AJAX

  • Stands for Asynchronous JavaScript And XML
  • Used to get/send data 
  • Asynchronous, so you can do other things while you wait for the data to come back.
  • jQuery provides the easiest way to make ajax requests.
 



AJAX EXAMPLE

 var url = 'http://www.some-data.com/user/24';
 $.ajax({
     url : url,
     dataType : 'json',
     success : function(data) {
          console.log(data);
     },
     error : function(err) {
          console.log(err);
     }
 });

HTTP VERBS

  • GET - get something
  • POST - send something
  • PUT - update something
  • DELETE - delete something


REST

  • Representational State Transfer
  • Defined in 2000 to explain how the World Wide Web already worked
  • Typically used when designing web service API's
 



SAME ORIGIN POLICY

  • Restricts resource access between two sites with different domains.
  • Pain in the butt when making ajax requests
  • Usually you can work around this with JSONP
 



JSONP

  • Short for JSON with padding.
  • Requests JSON data with a callback that is predefined in your page. 
  • Callback immediately executes with the returned data.
  • Using 'jsonp' in the dataType property for an ajax request will do this for you.



GOOGLE SPREADSHEETS

  • Accessible as JSON via HTTP
  • We'll use it as a JSON backend
  • Sign up for Google account
  • Go to Google Drive
  • Create > Spreadsheet
  • File > Publish to the Web...

spreadsheet ajax

  • Starter jsBin
  • Create a Spreadsheet in Google Docs
  • Map properties to columns. Make the first column an index column with unique number.
  • Create new custom objects from incoming data and display to screen (using last last class's exercise).

GOOGLE DOCS API LINKS

cool js thing for the day

AJS Lecture 9: AJAX

By Ryan Lewis