Week 3
David Tang / ITP 404 / 2015
Overview
- What is an API?
- Communication with Servers and APIs
- JSON and JSONP
- Demo
- Asynchronous Programming
- Client-side Templating
- Event Delegation
Graphical User Interface (GUI)
Functionality
Data
Content
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Application Programming Interface (API)
Functionality
Data
Content
{
"artistType":"Artist",
"artistName":"Jack Johnson",
"artistLinkUrl":"https://itunes.apple.com/us/artist/jack-johnson/id909253?uo=4",
"artistId":909253,
"amgArtistId":468749,
"primaryGenreName":"Rock",
"primaryGenreId":21
}JS Object Notation (JSON)
JSON
- A lightweight data interchange format
- Alternative to XML
- The most popular format today
- Works well with JavaScript because it is JavaScript
- Must use double quotes
- Keys must be in double quotes
Communicating with APIs
API (different domain)
API (same domain)
AJAX w/ CORS
JSONP
AJAX
JSON with Padding (JSONP)
<script src="https://itunes.apple.com/search?term=jack+johnson&callback=processArtist">
</script>
JSONP query string parameter often called "callback", but not always
processArtist()
function processArtist(artistData) {
var html = '';
artistData.results.forEach(function(result) {
html += '<li>' + result.trackName + '</li>';
});
$('ul#results').html(html);
}Demo
ITP 404 - 2015 - Week 3
By David Tang
