Transcript Introduction to the WWW

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 service A
Web Application
The Internet
Web service B
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:
• http://api.flickr.com/services/rest/?method=flickr.ph
otos.search&api_key=av5a9e36bafa9cf9fc1b6a306a5
&text="octopus"&format=json&jsoncallback=handle
Communicating with Web Services
http://api.flickr.com/services/rest/
?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
var customer = {
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address":
{
"streetAddress": "21 2nd Street“,
"city": "New York",
"postalCode": "10021“
}
}
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/
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 <script> 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:
http://api.flickr.com/services/rest/
?method=flickr.photos.search
&api_key=av5a9e36bafa9cf9fc1b6a306a5
&text="octopus“
&format=json
&jsoncallback=handle
Examples
• Weather
• Flickr