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() documentation

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


HTTP Verb spec

REST

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



REST on Wikipedia

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
 



Same-Origin Policy on MDN

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.



JSONP website

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

Google Developer Page
CoderWall Example
Google Spreadsheet Example

cool js thing for the day

Open API's
Nasa
DuckDuckGo
Data.gov
Rotten Tomatoes
OpenStreetMap
Mars Weather
Made with Slides.com