More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.
-
Upload
marshall-waters -
Category
Documents
-
view
218 -
download
0
Transcript of More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.
![Page 1: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/1.jpg)
More APIs: Web Services
CMPT 281
![Page 2: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/2.jpg)
Announcements
• Project milestone• Lab:– Web services examples
![Page 3: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/3.jpg)
Overview
• What are web services• Communication with web services– JSON
• Examples– Weather– Flickr
![Page 4: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/4.jpg)
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)
![Page 5: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/5.jpg)
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
![Page 6: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/6.jpg)
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
![Page 7: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/7.jpg)
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
![Page 8: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/8.jpg)
Communicating with Web Services
• Speaking REST:– Requests and responses– Requests are URIs– Responses are strings in standard formats• XML• JSON• HTML
![Page 9: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/9.jpg)
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
![Page 10: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/10.jpg)
Communicating with Web Services
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=av5a9e36bafa9cf9fc1b6a306a5&text="octopus“&format=json&jsoncallback=handle
![Page 11: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/11.jpg)
Communicating with Web Services
• JSON response• JavaScript Object Notation• A text string that JavaScript can interpret as an
object
![Page 12: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/12.jpg)
JSON object for a person{"firstName": "John","lastName": "Smith","age": 25, "address":
{ "streetAddress": "21 2nd Street“,"city": "New York", "postalCode": "10021“}
}
var customer =
![Page 13: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/13.jpg)
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/
![Page 14: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/14.jpg)
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
![Page 15: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/15.jpg)
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);
![Page 16: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/16.jpg)
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);
![Page 17: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/17.jpg)
How to call web services from JS
• Problem:– Can only access APIs that are in the same web
domain as the page itself
![Page 18: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/18.jpg)
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
![Page 19: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/19.jpg)
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
![Page 20: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/20.jpg)
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
![Page 21: More APIs: Web Services CMPT 281. Announcements Project milestone Lab: – Web services examples.](https://reader036.fdocuments.us/reader036/viewer/2022062715/56649da75503460f94a928b1/html5/thumbnails/21.jpg)
Examples
• Weather• Flickr