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

ITP 404 - 2015 - Week 3

  • 837
Loading comments...

More from David Tang