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: otos.search&api_key=av5a9e36bafa9cf9fc1b6a306a5 &text="octopus"&format=json&jsoncallback=handle

Communicating with Web Services ?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.firstName customer.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:

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 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: ?method=flickr.photos.search &api_key=av5a9e36bafa9cf9fc1b6a306a5 &text="octopus“ &format=json &jsoncallback=handle

Examples Weather Flickr