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
AJS Lecture 9: AJAX
- 613