SE 370: Programming Web Services Week 11: JSON & RESTful Copyright © Steven W. Johnson February...

SE 370: Programming Web Services

February 1, 2013

Today:

REST uses JSON to transmit data

JavaScript Object Notation

Douglas Crockford (2002)

JSON: text-based, open data interchange system

Purpose:

data interchange (kavşak) format

serialize data for network transmission

passes objects as strings from server to client

Intention: a light-weight alternative to XML

Incorporated into ISO

Part of ECMAScript, RFC 4627

M. C. Escher: (1898 – 1972)

Basic format of JSON:

all data held in square brackets

each record held in curly brackets

field is made up of:

field name in quotes

value written appropriate to its data type

name/value pairs delimited by commas

[ {“name”: value, “name”: “value”}, {“name”: value, “name”: “value”} ]

JSON formatting options:

8http://www.json.org/

Ajax format for JSON

employees = [{"firstName":"John", "lastName":"Doe", "age":"18"},{"firstName":"Peter", "lastName":"Jones", "age":"21"}];

each record in curly brackets

all records in square brackets

9http://www.json.org/

0 1 2 3

0 [0,0] [0,1] [0,2] [0,3]

1 [1,0] [1,1] [1,2] [1,3]

2 [2,0] [2,1] [2,2] [2,3]

array[2][1]; //9array[1][3]; //7

array = [{0, 1, 2, 3}, {4, 5, 6, 7}, {8, 9, 10, 11}];

Each represents the same data; “records”

Effectively a database table

students = [ {“name”:“Ali”, “age”:”20”, “bolum”:“MBBF” }, {“name”:“Bahar”, “age”:”21”, “bolum”:“ITF” }]; Students

Name Age Bolum Gender

Ali 20 MBBF Erkek

Bahar 21 ITF Hanim

students[1].age //21

An array of arrays or a database with 2 tables

‘Company’ is DB, tables ‘employees’, ‘managers’

var company = {“employees”: [ { "firstName":"John" , "lastName":"Doe" , "age":"18"}, { "firstName":"Anna" , "lastName":"Smith" , "age":"20"}, { "firstName":"Peter" , "lastName":"Jones" , "age":"21"} ], “managers”: [ { "firstName":"Alice" , "lastName":“Williams" , "age":"19"}, { "firstName":"Carla" , "lastName":“Walker" , "age":"23"}, { "firstName":"Joe" , "lastName":“Evans" , "age":"22"} ]}

document.write(company.employees[2].firstName); //Peterdocument.write(company.managers[1].age); //23

Update table values also

var company = {“employees”: [ { "firstName":"John" , "lastName":"Doe" , "age":"18"}, { "firstName":"Anna" , "lastName":"Smith" , "age":"20"}, { "firstName":"Peter" , "lastName":"Jones" , "age":"21"} ], “managers”: [ { "firstName":“Alice" , "lastName":“Williams" , "age":"19"}, { "firstName":“Carla" , "lastName":“Walker" , "age":"23"}, { "firstName":“Joe" , "lastName":“Evans" , "age":"22"} ]}

company.employees[2].firstName= “Steve”;

x-dimensional array saved as ‘employees’

objname[i]fieldname:

employees = [{ "firstName":"John" , "lastName":"Doe" , "age":18},{ "firstName":"Anna" , "lastName":"Smith" , "age":20},{ "firstName":"Peter" , "lastName":"Jones" , "age":21}];

document.write(employees[1].age); //20

JSON supports UTF-8; Notepad doesn’t

Must save UTF-8 files using UTF-8, not ANSI

Derived from JavaScript to represent objects:

simple data structures

associative arrays

parsers available for many languages

JSON versus XML:

“students”= [ {“name”: “Ali”, “age”: “20”, “bolum”: “MBBF”}, {“name”: “Bahar”, “age”: “21”, “bolum”: “ITF”}]

<?xml version=“1.0” encoding=“utf-8”?>

<students> <student> <name>Ali</name> <age>20</age> <bolum>MBBF</bolum> <gender>Erkek</gender> </student> <student> <name>Bahar</name> <age>21</age> <bolum>ITF</bolum> <gender>Hanim</gender> </student> </students>

MIME type: application/json

Extension: .json

Basic form: uses name/value pairs

JSON can be stored in either .json and .txt

{“firstname”: “Canan”}

firstname = “Canan”;

data.txtdata.json

JSON is JavaScript

‘XML’ with anorexia; faster to parse*

Easier to write, lightweight, less verbose

True data format, not a meta language

JSON advantages:

<name>Steve</name>

“name”: “Steve”,

True for both XML and JSON:

language independent

cross-platform

self-describing

human readable

hierarchical (data in data, values describing values)

JSON similarities:

JSON is JavaScript

Requires use of ‘eval’ function*

Reserved JavaScript keywords can’t be used as

element names

XML is more familiar, more like HTML

XML more precise due to specific DTD

XML has better support

JSON disadvantages:

Data types of JSON: (just like JavaScript)

number (JavaScript has no ‘float’ and

‘integer’)

string

Boolean

object

Both describe objects as strings

Both are suitable for use in web services

Both enjoy broad support, libraries, etc

Tools exist to convert

Data conversion can easily be done manually

JSON versus XML:

<name>Steve</name>

“name”: “Steve”,

a=indexOf("<") d=lastIndexOf("<")

b=indexOf(">") c=lastIndexOf("<")

"name"=substr(a+1,b-1)

"Ali"=substring(b+1,c)

"</"+name+">"

Convert XML to JSON:

String.substr (start, # of characters);String.substring(start, finish);

a=indexOf("<") d=lastIndexOf("<")

b=indexOf(">") c=lastIndexOf("<")

"name"=substr(a+1,b-1)

"Ali"=substring(b+1,c)

document.write(name, value);

<firstname>Ali</firstname><lastname>Zeybek</lastname><age>23</age>for (i=0; i<length; i++) { name = String.substr(a+1,b-1) value = String.substring(b+1,c) document.write(name, value);}

for (i=0; i<length; i++) { name = String[i].substr(a+1,b-1) value = String[i].substring(b+1,c) document.write("\""+name+"\": \""+value+"\", ");}

Lab: JSON Parser

<CustomerNumber>7458</CustomerNumber><FirstName>Elif</FirstName><Surname>Bardukoglu</Surname><Discount>5</Discount>

Convert XML to name/value pairs

Output: “CustomerNumber”: “3568”,

Assume data held in single string ‘data’

Data= “<CustomerNumber>7458</CustomerNumber> <FirstName>Elif</FirstName> <Surname>Bardukoglu</Surname> <Discount>5</Discount>”;

Lab: JSON Parser

var rawdata = data.split(" ");count = rawdata.length;for (i=0; i<count; i++) { namestart = rawdata[i].indexOf("<");

nameend = rawdata[i].indexOf(">");nametext = rawdata[i].substring(namestart + 1, nameend);valuestart = nameend;valueend = rawdata[i].lastIndexOf("<");valuetext = rawdata[i].substring(valuestart + 1, valueend);document.write("\""+nametext+"\": \""+valuetext+"\"");if (i < count-1) document.write(", ");

}</script>

Break 28

Lab: JSON Parser

Convert JSON to XML:

<students> <student> <name>Ali</name> <age>20</age> <bolum>MBBF</bolum> </student> <student> <name>Bahar</name> <age>21</age> <bolum>ITF</bolum> </student></students>

student=[ {"name":"Ali","age":"20","bolum":"MBBF"}, {"name":"Bahar","age":"21","bolum":"ITF"}];

Lab: JSON Parser

student=[ {"name":"Ali","age":"20","bolum":"MBBF"}, {"name":"Bahar","age":"21","bolum":"ITF"}];

Convert JSON to XML:

Root element is ‘students’ (not considered)

‘Students’ is root element

Text before “=” is like record name

Rows are like records; holds field names, values

Lab: JSON Parser

Convert JSON to XML: (format is different)

Assume no spaces in the ‘data’

<students> <student> <name>Ali</name> <age>20</age> <bolum>MBBF</bolum> </student> <student> <name>Bahar</name> <age>21</age> <bolum>ITF</bolum> </student></students>

student=[{"name":"Ali","age":"20","bolum":"MBBF"},{"name":"Bahar","age":"21","bolum":"ITF"}];

Lab: JSON Parser

Convert JSON to XML: (format is different)

student=[{"name":"Ali","age":"20","bolum":"MBBF"},{"name":"Bahar","age":"21","bolum":"ITF"}];

indexOf(“\””)

lastIndexOf(“\””)

replace(“\”,\””, “ “)

replace(“\“:\””, “ “)

name Ali age 20 bolum MBBF"},{"name Bahar age 21 bolum ITF

split(“ ”)

1. What is the address of the value 24?

12 16 175 8 123 24 6

[2, 1]

2. Place this array in the table:

1 2 34 5 67 8 9

[[1, 2, 3], [4, 5, 6], [7, 8, 9]]

3. What XML tag is most like a record?

4. From <aaa>, the address of <bbb>?

5. Child nodes of <ccc>

6. What is the root node?

<aaa>[0].childNodes[0]

7. Children of <aaa>?

8. Value of <bbb>[0].childNodes[1].childNodes[0].nodeValue

9. JSON array of 3 names:

friends = [ {“name”:”Ali”, “name”:”Bahar”, “name”:”Canan”}];

10. What is the value of company.employees[1].age?

var company = {“employees”: [ { "firstName":"John" , "lastName":"Doe" , "age":18}, { "firstName":"Anna" , "lastName":"Smith" , "age":20}, { "firstName":"Peter" , "lastName":"Jones" , "age":21} ], “managers”: [ { "firstName":“Alice" , "lastName":“Williams" , "age":19}, { "firstName":“Carla" , "lastName":“Walker" , "age":23}, { "firstName":“Joe" , "lastName":“Evans" , "age":22} ]}

February 1, 2013

Today:

Assignment:

Week 2:

Course textbook:

Break 44

Assignment:

Week 2:

Deploy (rt. Click on project – Deploy)

http://localhost:8080/HelloTest/webresources/generic

Lab: Hello RESTful Webapps

GET/POST/PUT/DELETE methods of HTTP

Requires tomcat

Made in maven

RESTEasy

NetBeans

https://netbeans.org/kb/docs/websvc/intro-ws.html

http://yiyujia.blogspot.com/2011/09/simple-tutorial-about-creating-jersey.html***

Customers in table:

Lab: Web Service using REST

@Stateless@Path("customerdb.customer")public class CustomerFacadeREST extends AbstractFacade<Customer> { @PersistenceContext(unitName = "CustomerDBPU") private EntityManager em;

public CustomerFacadeREST() { super(Customer.class); }

@POST @Override @Consumes({"application/xml", "application/json"}) public void create(Customer entity) { super.create(entity); }

@PUT @Override @Consumes({"application/xml", "application/json"}) public void edit(Customer entity) { super.edit(entity); }

@DELETE @Path("{id}") public void remove(@PathParam("id") Integer id) { super.remove(super.find(id)); }

@GET @Path("{id}") @Produces({"application/xml", "application/json"}) public Customer find(@PathParam("id") Integer id) { return super.find(id); }

@GET @Override @Produces({"application/xml", "application/json"}) public List<Customer> findAll() { return super.findAll(); }

@GET @Path("{from}/{to}") @Produces({"application/xml", "application/json"}) public List<Customer> findRange(@PathParam("from") Integer from, @PathParam("to") Integer to) { return super.findRange(new int[]{from, to}); }

@GET @Path("count") @Produces("text/plain") public String countREST() { return String.valueOf(super.count()); }

@Override protected EntityManager getEntityManager() { return em; } }