More APIs: Web Services

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 service A The Internet Web Application Web service B

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.photos.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 var customer = { "firstName": "John", "lastName": "Smith", "age": 25, "address": { "streetAddress": "21 2nd Street“, "city": "New York", "postalCode": "10021“ } }

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: varmy_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: varmy_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 <script> 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