1 / 21

More APIs: Web Services

Dive into the world of web services, exploring their definition, functionalities, and types. This overview discusses how web services enable machine-to-machine interactions over networks, emphasizing the use of APIs and the importance of standard protocols like REST. Gain insights into JSON usage, remote procedure calls, and practical examples including weather data retrieval and Flickr image search. Learn how to interact with web services using JavaScript, AJAX, and JSONP methods, while discovering the structure of requests and responses.

auryon
Télécharger la présentation

More APIs: Web Services

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related