1. More APIs: Web Services CMPT 281

2. Announcements Project milestone Lab: – Web services examples

3. Overview What are web services Communication with web services – JSON Examples – Weather – Flickr

4. 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)

5. 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

6. 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

7. 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

8. Communicating with Web Services Speaking REST: – Requests and responses – Requests are URIs – Responses are strings in standard formats XML JSON HTML

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

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

11. Communicating with Web Services JSON response JavaScript Object Notation A text string that JavaScript can interpret as an object

12. JSON object for a person { "firstName": "John", "lastName": "Smith", "age": 25, "address": { "streetAddress": "21 2nd Street“, "city": "New York", "postalCode": "10021“ } var customer =

13. 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: http://jsbeautifier.org/

14. 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

15. 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);

16. 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);

17. How to call web services from JS Problem: – Can only access APIs that are in the same web domain as the page itself

18. 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

19. 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

20. 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

21. Examples Weather Flickr