rpc over internetberaldi/psd_013/js.pdf · json-rpc 2.0 • json-rpc is a stateless, transport...

RPC OVER INTERNET

Web API: RPC over Internet• RPC calls mapped onto HTTP (GET or POST) • Synchronous call• Asynchronous call

• with callbacks

• External data representation• JSON (Java Simple Object Notation)

• http://www.json.org/json-it.html

• XML

• Protocols• REST, SOAP, JSONP, JSON-RPC, XML-RPC,…

JSON

JSON• Two fundamental structures:

See JSON Lint

XML in a nutshell • XML (eXtensible Markup Language) is a language derived

from SGML (Standard Generalized Markup Language),from which HTML also derives.

• The key notion in the markup language familty is amarkup, something that describes some aspect of themarkup, something that describes some aspect of thedata

• In HTML markups define the appearance of thedocument, whereas in XML they define the meaning ofthe data

XML in a nutshell• An XML document is a tree

• Data appear inside elements

• An element not only contains the data itself but alsoinformation describing the meaning of the datainformation describing the meaning of the data

Example

Il Signore degli Anelli, di John Ronald Reuel Tolkien,

Bompiani.

Title

Author di John Ronald Reuel Tolkien, Bompiani.

Editor

Example<book>

<title> Il Signore degli Anelli

</title><author>

John R. R. Tolkien</author>

Title

Author

Editor

Book Elements

</author><editore>

Bompiani</editor>

</book>

Editor

Tips : Browser allows to see the structure of the document

Elements and attribute<title>

Il Signore degli Anelli</title>

Data

Attribute (key/value pair)Tag

<title pages=“345”> Il Signore degli Anelli

</title>

Attribute (key/value pair)

Well formed document

Valid document• Document that follows composition rules about the its

structure• Two solutions• Document Type Definition

• Easier, less ‘powerfull’• Easier, less ‘powerfull’

• XML Schema• More complex, more powerfull

WFD and validation

XMLDocument

Syntax check

Semantic check

Grammar

XML-RPC

Overview of XML-RPC• Data Model

• Scalar• Struct• Array

• Messages• Messages• Request message• Response message• Error message

Scalar types

Tag Type Example

<i4> or <int> four-byte signed integer -12

<boolean> 0 (false) or 1 (true) 1

<string> string hello world

<double> double-precision signed floating point number

-12.214

<dateTime.iso8601> date/time 20101504T09:30:00

<base64> base64-encoded binary eW91IGNhbid0IHJlYWQgdGhpcyE=

Struct type

<struct><member>

<name>lowerBound</name><value><i4>18</i4></value>

</member>

<member><name>upperBound</name><value><i4>139</i4></value>

</member></struct>

Array type

<array><data>

<value><i4>12</i4></value><value><string>Egypt</string></value><value><boolean>0</boolean></value><value><i4>-31</i4></value>

</data></array>

Request message

• Root element: methodCall• contains a MethodName element and a paramselement

• MethodName contains the name of the procedure • MethodName contains the name of the procedure being called

• Params is a list of values for the parameters

Example<?xml version="1.0"?>

<methodCall>

<methodName>XXX</methodName>

<params>

<param>

<value><i4>123</i4></value>

</param>

<param> <param>

<value><double>12.3</double></value>

</param>

</params>

</methodCall>

Example<?xml version="1.0"?>

<methodCall>

<methodName> XXX</methodName>

<params>

<param>

<value><i4>123</i4></value>

</param>

<param>

<value><double>12.3</double></value>

methodCall

XXX

methodName

params

param value i4123<value><double>12.3</double></value>

</param>

</params>

</methodCall>param value double

123

12.3

Example<?xml version="1.0"?>

<methodCall>

<methodName>Scuola XXX</methodName>

<params>

<param>

<value><i4>123</i4></value>

</param>

<param>

<value><double>12.3</double></value>

methodCall

XXX

methodName

params

param value i4123<value><double>12.3</double></value>

</param>

</params>

</methodCall>param value double

123

12.3

methodNameparams

paramparam

doublei4

methodCall

Complete request messagePOST /xmlrpc HTTP 1.0User-Agent: …Host: …Content-type: text/xmlContent-length: ..

<?xml version=“1.0”?><methodCall><methodName>Circle_Area</methodName><params><param><value><double>12.2</double></value><param><params></methodCall>

Reply message

<?xml version="1.0"?>

<methodResponse>

<params>

<param>

<value><i4>1</i4></value><value><i4>1</i4></value>

</param>

</params>

</methodResponse>

Fault message<?xml version="1.0"?><methodResponse>

<fault><value>

<struct><member>

<name>faultCode</name><value><int>4</int></value><value><int>4</int></value></member>

<member><name>faultString</name><value><string>Too many parameters.</string></value></member>

</struct></value>

</fault></methodResponse>

JSON-RPC 2.0• JSON-RPC is a stateless, transport agnostic, light-weight

remote procedure call (RPC) protocol• Much like XML-RPC

• No formal grammar• Definition of request object and reply object• Definition of request object and reply object

• New feature: batch requests, notification

Some example --> {"jsonrpc": "2.0", "method": "subtract", "params": [42, 23], "id": 1}<-- {"jsonrpc": "2.0", "result": 19, "id": 1}

-->{"jsonrpc": "2.0", "method": "subtract", "params": [23, 42], "id": 2}<-- {"jsonrpc": "2.0", "result": -19, "id": 2}

-->{"jsonrpc": "2.0", "method": "subtract", "params": {"subtrahend": 23, "minuend": 42}, "id": 3}<-- {"jsonrpc": "2.0", "result": 19, "id": 3}

--> {"jsonrpc": "2.0", "method": "subtract", "params": {"minuend": 42, "subtrahend": 23}, "id": 4}<-- {"jsonrpc": "2.0", "result": 19, "id": 4}

JSON-RPC call batch --> [

{"jsonrpc": "2.0", "method": "sum", "params": [1,2,4], "id": "1"},{"jsonrpc": "2.0", "method": "notify_hello", "params": [7]},{"jsonrpc": "2.0", "method": "subtract", "params": [42,23], "id": "2"},{"foo": "boo"},{"jsonrpc": "2.0", "method": "foo.get", "params": {"name": "myself"}, "id": "5"},{"jsonrpc": "2.0", "method": "get_data", "id": "9"} {"jsonrpc": "2.0", "method": "get_data", "id": "9"} ]<-- [{"jsonrpc": "2.0", "result": 7, "id": "1"},{"jsonrpc": "2.0", "result": 19, "id": "2"},{"jsonrpc": "2.0", "error": {"code": -32600, "message": "InvalidRequest."}, "id": null},{"jsonrpc": "2.0", "error": {"code": -32601, "message": "Method notfound."}, "id": "5"},{"jsonrpc": "2.0", "result": ["hello", 5], "id": "9"}]

JSONP (JSON with Padding)

GET

f(JSON data)

….<javasxcript scr=xxx&callback=f>….

Used in JavaScriptAllows to overcome the cross-domain problemUses a callback function

REST• Method calls are mapped to HTTP request (Get, Post)• Method name is a parameter of the call• Reply is usually formatted as JSON or XML

SOAP• It’s by far the most verbose protocol• Service is described in WSDL file • Messages as XML documents formatted according to a

specific schema

Tool utili per il debugging

RCP over Internet: example

…Features

geolookup conditions forecast

types= JSON, XML

http://api.wunderground.com/api/http://api.wunderground.com/api/http://api.wunderground.com/api/http://api.wunderground.com/api/KEYKEYKEYKEY////FEATUREFEATUREFEATUREFEATURE/[/[/[/[FEATUREFEATUREFEATUREFEATURE…]/q/…]/q/…]/q/…]/q/QUERYQUERYQUERYQUERY....FORMATFORMATFORMATFORMAT

Examplehttp://api.wunderground.com/api/[API_KEY]/conditions/q/rome.json

….

location ID

http://api.wunderground.com/api/[API_KEY]/conditions/q/rome.json?callback=f

JSONP

Example of XML replyhttp://api.wunderground.com/api/[APIKEY]/conditions/q/zmw:00000.1.16240.xml

Interoperability

Chrome Developer tool

Static call • Using JS src you can “make a call” and display results on

the screen•

Static call

Dynamic Call

Dynamic call

1. Dynamically create a HTML element and append in the head section

2. Call the URL with callback function

Dynamic call

Show the current temperature on the screen• Show the current temperature on the screen

Using jQuery

Additional example

Additional example

Example: Geocoding API

Example: Geocoding API (json)

Example: Geocoding API (xml)

Example: reverse Geocoding (json)

Example: Reverse geocoding (xml)

Google’s JavaScript API (vers. 3)

Example

Example:

Geolocation in HTML5

Example: Flickr ®

Flickr: request, reply message format

http://api.flickr.com/services/xmlrpc/

http://api.flickr.com/services/soap/

WEB-API

http://api.flickr.com/services/rest/

Example: rest call

Example

• Reply is wrapped through jsonFlickrApi callback name• To avoid this, set nojsoncallback=1 option

json format

Asynchronous RPC: AJAX

Sicurezza:Cross domain non è consentito

Example: using AJAX

Example: using AJAX

Example: searching photos

Example: searching photos

Example: searching data

Key photo contains photo details

Example: searching photo

Every photo has a link[mstzb] defines the size

Example: searching photos

Other example

http://api.wordreference.com/{api_version}/{API_key}/{dictionary}/{term}

http://api.wordreference.com/{api_version}/{API_key}/JSON/{dictionary}/{term}

Example

Example

Example: Twitter API

Exercise

• Write a simple JS program for the TTT game• Hint:

• use a table for button formatting• Use a single handler to make modification