More APIs: Web Services

CMPT 281

Announcements

• Project milestone• Lab:– Web services examples

Overview

• What are web services• Communication with web services– JSON

• Examples– Weather– Flickr

What is a web service?

• A way to provide ‘useful’ information in a way that can be accessed by websites– E.g., weather data, map data, search data

• “A software system designed to support interoperable machine-to-machine interaction over a network” (W3C)

What is a web service?

• An API on a remote web server– accessed through HTTP and higher-level protocols

Web Application

Web service A

Web service B

The Internet

JS libraries vs. web services

• JS libraries and web services both provide APIs– JS libraries:• API is accessed through JavaScript functions

– Web services:• can’t call a JS function on another machine• need a different approach for accessing the API

Communicating with Web Services

• Several approaches currently in use:– Remote procedure calls– Service-oriented architectures– Representational State Transfer (REST)

• REST:– Uses standard HTTP operations (e.g., GET)– ‘Stateless’: no state stored on the server

Communicating with Web Services

• Speaking REST:– Requests and responses– Requests are URIs– Responses are strings in standard formats• XML• JSON• HTML

Communicating with Web Services

• What is in a request URI?– The web address of the server– Request parameters

• For example, a Flickr request:• http://api.flickr.com/services/rest/?

method=flickr.photos.search&api_key=av5a9e36bafa9cf9fc1b6a306a5&text="octopus"&format=json&jsoncallback=handle

Communicating with Web Services

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=av5a9e36bafa9cf9fc1b6a306a5&text="octopus“&format=json&jsoncallback=handle

Communicating with Web Services

• JSON response• JavaScript Object Notation• A text string that JavaScript can interpret as an

object

JSON object for a person{"firstName": "John","lastName": "Smith","age": 25, "address":

{ "streetAddress": "21 2nd Street“,"city": "New York", "postalCode": "10021“}

}

var customer =

Using JS objects

• Dot notation to access sub-parts:customer.firstNamecustomer.address.city

• Same idea with JSON results– But, need to know the structure of the object!– Read the API documents– Inspect an example• Helpful tool: http://jsbeautifier.org/

What do you get in a JSON reply?

• Not pictures, sounds, etc.• Usually just URLs• But you can use these to get the content

• Example JSON reply: Weather request

How to call web services from JS

• AJAX approach:var my_JSON_object = {};var request = new XMLHttpRequest();request.open( "GET", url, true ); request.onreadystatechange = function () { if (request.readyState == 4 && request.status == 200) {

my_JSON_object = JSON.parse( request.responseText ); }};http_request.send(null);

How to call web services from JS

• AJAX approach:var my_JSON_object = {};var request = new XMLHttpRequest();request.open( "GET", url, true ); request.onreadystatechange = function () { if (request.readyState == 4 && request.status == 200) {

my_JSON_object = JSON.parse( request.responseText ); }};http_request.send(null);

How to call web services from JS

• Problem:– Can only access APIs that are in the same web

domain as the page itself

How to call web services from JS

• Problem:– Can only access APIs that are in the same web

domain as the page itself

• Clever workaround:– JSONP– Makes use of the ‘open policy’ for <script> tags

JSONP

• “JSON with Padding”• Uses an encoded callback function• The web service sends back JavaScript code• The web page tells the web service what

function to put in the code• The code is run when the ‘script’ is loaded

JSONP

• Recall the structure of a request:

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=av5a9e36bafa9cf9fc1b6a306a5&text="octopus“&format=json&jsoncallback=handle

Examples

• Weather• Flickr