The Data Transfer Format The Data Transfer Format of the Starsof the Stars JSONJSON

(1)

JSON JSON

The Data Transfer Format The Data Transfer Format

of the Stars of the Stars

Douglas Crockford Douglas Crockford

Yahoo! Inc.

(2)

Data Interchange Data Interchange

 The key idea in Ajax.The key idea in Ajax.

 An alternative to page replacement.An alternative to page replacement.

 Applications delivered as pages.Applications delivered as pages.

 How should the data be delivered?How should the data be delivered?

(3)

History of Data Formats History of Data Formats

 Ad HocAd Hoc

 Database ModelDatabase Model

 Document ModelDocument Model

 Programming Language ModelProgramming Language Model

(4)

JSON JSON

 JavaScript Object NotationJavaScript Object Notation

 MinimalMinimal

 TextualTextual

 Subset of JavaScriptSubset of JavaScript

(5)

JSON JSON

 A Subset of ECMA-262 Third Edition.A Subset of ECMA-262 Third Edition.

 Language Independent.Language Independent.

 Text-based.Text-based.

 Light-weight.Light-weight.

 Easy to parse.Easy to parse.

(6)

JSON Is Not...

 JSON is not a document format.JSON is not a document format.

 JSON is not a markup language.JSON is not a markup language.

 JSON is not a general serialization format.JSON is not a general serialization format.

 No recursive/recurring structures.

 No invisible structures.

 No functions.

(7)

History History

 1999 ECMAScript Third Edition1999 ECMAScript Third Edition

 2001 State Software, Inc.2001 State Software, Inc.

 2002 JSON.org2002 JSON.org

 2005 Ajax2005 Ajax

(8)

Object Quasi-Literals Object Quasi-Literals

 JavaScriptJavaScript

 PythonPython

 NewtonScriptNewtonScript

(9)

Languages Languages

 ChineseChinese

 EnglishEnglish

 FrenchFrench

 GermanGerman

 ItalianItalian

 JapaneseJapanese

 KoreanKorean

(10)

Languages Languages

 ActionScriptActionScript

 C / C++C / C++

 C#C#

 Cold FusionCold Fusion

 DelphiDelphi

 EE

 ErlangErlang

 JavaJava

 LispLisp

 PerlPerl

 Objective-CObjective-C

 Objective CAMLObjective CAML

 PHPPHP

 PythonPython

 RebolRebol

 RubyRuby

 SchemeScheme

 SqueakSqueak

(11)

Values Values

 StringsStrings

 NumbersNumbers

 BooleansBooleans

 ObjectsObjects

 ArraysArrays

 nullnull

(12)

Value

(13)

Strings Strings

 Sequence of 0 or more Unicode charactersSequence of 0 or more Unicode characters

 No separate character typeNo separate character type

 A character is represented as a string with a length of 1

 Wrapped in Wrapped in ""double quotesdouble quotes""

 Backslash escapementBackslash escapement

(14)

String

(15)

Numbers Numbers

 IntegerInteger

 RealReal

 ScientificScientific

 No octal or hexNo octal or hex

 No No NaNNaN or or InfinityInfinity

 Use null instead

(16)

Number

(17)

Booleans Booleans

 truetrue

 falsefalse

(18)

null null

 A value that isn't anythingA value that isn't anything

(19)

Object Object

 Objects are unordered containers of Objects are unordered containers of key/value pairs

key/value pairs

 Objects are wrapped in Objects are wrapped in { }{ }

 ,, separates key/value pairs separates key/value pairs

 :: separates keys and values separates keys and values

 Keys are strings Keys are strings

 Values are JSON valuesValues are JSON values

 struct, record, hashtable, object

(20)

Object

(21)

Object Object

{

"name": "Jack B. Nimble", "at large": true,

"grade": "A", "format": {

"type": "rect", "width": 1920, "height": 1080, "interlace": false, "framerate": 24

} }

(22)

Array Array

 Arrays are ordered sequences of valuesArrays are ordered sequences of values

 Arrays are wrapped in Arrays are wrapped in [][]

 ,, separates values separates values

 JSON does not talk about indexing.JSON does not talk about indexing.

 An implementation can start array indexing at 0 or 1.

(23)

Array

(24)

Array Array

["Sunday", "Monday", "Tuesday", ["Sunday", "Monday", "Tuesday",

"Wednesday", "Thursday",

"Friday", "Saturday"]

[[

[0, -1, 0], [1, 0, 0], [0, 0, 1]

]]

(25)

Arrays vs Objects Arrays vs Objects

 Use objects when the key names are Use objects when the key names are arbitrary strings.

arbitrary strings.

 Use arrays when the key names are Use arrays when the key names are sequential integers.

sequential integers.

 Don't get confused by the term Associative Don't get confused by the term Associative Array.

Array.

(26)

Rules Rules

 A JSON decoder must accept all well-formed A JSON decoder must accept all well-formed JSON text.

JSON text.

 A JSON decoder may also accept non-JSON A JSON decoder may also accept non-JSON text.

text.

 A JSON encoder must only produce well-A JSON encoder must only produce well- formed JSON text.

formed JSON text.

 Be conservative in what you do, be liberal in Be conservative in what you do, be liberal in what you accept from others.

what you accept from others.

(27)

MIME Media Type MIME Media Type

application/json

(28)

JSON in Ajax JSON in Ajax

 HTML Delivery.HTML Delivery.

 JSON data is built into the page.JSON data is built into the page.

 <html>...

 <script>

 var data = { ... JSONdata ... };

(29)

JSON in Ajax JSON in Ajax

 XMLHttpRequestXMLHttpRequest

 Obtain responseText

 Parse the responseText

responseData = eval(

'(' + responseText + ')');

responseData =

responseText.parseJSON();

(30)

JSON in Ajax JSON in Ajax

 Secret Secret <iframe><iframe>

 Request data using Request data using form.submitform.submit to the to the

<iframe>

<iframe> target. target.

 The server sends the JSON text embedded in The server sends the JSON text embedded in a script in a document.

a script in a document.

 <html><head><script>

 document.domain = 'penzance.com';

 parent.deliver({ ... JSONtext ... });

 </script></head></html>

 The function The function deliverdeliver is passed the value. is passed the value.

(31)

JSON in Ajax JSON in Ajax

 Dynamic script tag hack.Dynamic script tag hack.

 Create a script node. The Create a script node. The srcsrc url makes the url makes the request.

request.

 The server sends the JSON text embedded in The server sends the JSON text embedded in a script.

a script.

 deliver({ ... JSONtext ... });

 The function The function deliverdeliver is passed the value. is passed the value.

 The dynamic script tag hack is insecure.The dynamic script tag hack is insecure.

(32)

JSONRequest JSONRequest

 A new facility.A new facility.

 Two way data interchange between any page Two way data interchange between any page and any server.

and any server.

 Exempt from the Same Origin Policy.Exempt from the Same Origin Policy.

 Campaign to make a standard feature of all Campaign to make a standard feature of all browsers.

browsers.

 http://www.JSON.org/JSONRequest.hhttp://www.JSON.org/JSONRequest.h tmltml

(33)

ECMAScript Fourth Ed.

 New Methods:New Methods:

 Array.prototype.toJSONString

 Object.prototype.toJSONString

 String.prototype.parseJSON

 Available now: Available now: JSON.org/json.jsJSON.org/json.js

(34)

Security Security

 Is it safe to use Is it safe to use evaleval with XMLHttpRequest? with XMLHttpRequest?

 The JSON data comes from the same server The JSON data comes from the same server that vended the page.

that vended the page. evaleval of the data is no of the data is no less secure than the original html.

less secure than the original html.

 If in doubt, use If in doubt, use stringstring.parseJSON.parseJSON instead instead of of evaleval..

(35)

Never trust the client Never trust the client

 The client cannot and will not keep our The client cannot and will not keep our

secrets and cannot and will not protect our secrets and cannot and will not protect our

interests.

 Do not trust machines not under your Do not trust machines not under your absolute control.

absolute control.

 The server must validate everything the client The server must validate everything the client tells it.

tells it.

(36)

supplant supplant

var template = '<table border="

var template = '<table border="{border}{border}">' +">' + '<tr><th>Last</th><td>{last}'<tr><th>Last</th><td>{last}</td></tr>' +</td></tr>' + '<tr><th>First</th><td>{first}'<tr><th>First</th><td>{first}</td></tr>' </td></tr>'

++

'</table>';'</table>';

var data = var data = {{

"first": "Carl", "first": "Carl",

"last": "Hollywood", "last": "Hollywood", "border": 2"border": 2

};};

mydiv.innerHTML = mydiv.innerHTML =

template.supplant(data);

(37)

supplant supplant

String.prototype.supplant = function (o) String.prototype.supplant = function (o)

{ {

return this.replace(/{([^{}]*)}/g, return this.replace(/{([^{}]*)}/g,

function (a, b) { function (a, b) {

var r = o[b];var r = o[b];

return typeof r == 'string' ? return typeof r == 'string' ?

r : a; r : a;

}} ); );

}; };

(38)

JSONT JSONT

var rules = { var rules = {

self:

'<svg><

'<svg><{closed}{closed} stroke=" stroke="{color}{color}" points="" points="{points}{points}" /></svg>'," /></svg>', closed: function (x) {return x ? 'polygon' : 'polyline';}, 'points[*][*]': '{$} '

};};

var data = { var data = {

"color": "blue",

"closed": true,

"points": [[10,10], [20,10], [20,20], [10,20]]

};};

jsonT(data, rules) jsonT(data, rules)

<svg><polygon stroke="blue"

points="10 10 20 10 20 20 10 20 " /></svg> points="10 10 20 10 20 20 10 20 " /></svg>

(39)

http://goessner.net/articles/jsont/

function jsonT(self, rules) { function jsonT(self, rules) {

var T = { var T = {

output: false, output: false,

init: function () { init: function () {

for (var rule in rules) if (rule.substr(0,4) != "self") rules["self." + rule] = rules[rule]; for (var rule in rules) if (rule.substr(0,4) != "self") rules["self." + rule] = rules[rule];

return this; return this;

}, },

apply: function(expr) { apply: function(expr) {

var trf = function (s) { var trf = function (s) {

return s.replace(/{([A-Za-z0-9_\$\.\[\]\'@]+)}/g, function ($0, $1){return s.replace(/{([A-Za-z0-9_\$\.\[\]\'@]+)}/g, function ($0, $1){

return T.processArg($1, expr);return T.processArg($1, expr);

})})

}, x = expr.replace(/\[[0-9]+\]/g, "[*]"), res; }, x = expr.replace(/\[[0-9]+\]/g, "[*]"), res;

if (x in rules) { if (x in rules) {

if (typeof(rules[x]) == "string") res = trf(rules[x]); if (typeof(rules[x]) == "string") res = trf(rules[x]);

else if (typeof(rules[x]) == "function") res = trf(rules[x](eval(expr)).toString()); else if (typeof(rules[x]) == "function") res = trf(rules[x](eval(expr)).toString());

} else res = T.eval(expr); } else res = T.eval(expr);

return res; return res;

}, },

processArg: function (arg, parentExpr) { processArg: function (arg, parentExpr) {

var expand = function (a, e) {var expand = function (a, e) {

return (e = a.replace(/^\$/,e)).substr(0, 4) != "self" ? ("self." + e) : e; return (e = a.replace(/^\$/,e)).substr(0, 4) != "self" ? ("self." + e) : e;

}, res = ""; }, res = "";

T.output = true; T.output = true;

if (arg.charAt(0) == "@") res = eval(arg.replace(/@([A-za-z0-9_]+)$([A-Za-z0-9_\$\.\[\]\']+)$/, function($0, $1, $2){if (arg.charAt(0) == "@") res = eval(arg.replace(/@([A-za-z0-9_]+)$([A-Za-z0-9_\$\.\[\]\']+)$/, function($0, $1, $2){

return "rules['self." + $1 + "'](" + expand($2,parentExpr) + ")";return "rules['self." + $1 + "'](" + expand($2,parentExpr) + ")";

})); }));

else if (arg != "$") res = T.apply(expand(arg, parentExpr)); else if (arg != "$") res = T.apply(expand(arg, parentExpr));

else res = T.eval(parentExpr); else res = T.eval(parentExpr);

T.output = false; T.output = false;

}, },

eval: function (expr) { eval: function (expr) {

var v = eval(expr), res = "";var v = eval(expr), res = "";

if (typeof(v) != "undefined") { if (typeof(v) != "undefined") {

if (v instanceof Array) { if (v instanceof Array) {

for (var i = 0; i < v.length; i++) if (typeof(v[i]) != "undefined") res += T.apply(expr + "[" + i + "]"); for (var i = 0; i < v.length; i++) if (typeof(v[i]) != "undefined") res += T.apply(expr + "[" + i + "]");

} else if (typeof(v) == "object") { } else if (typeof(v) == "object") {

for (var m in v) if (typeof(v[m]) != "undefined") res += T.apply(expr+"."+m); for (var m in v) if (typeof(v[m]) != "undefined") res += T.apply(expr+"."+m);

} else if (T.output) res += v; } else if (T.output) res += v;

} }

} } };};

return T.init().apply("self"); return T.init().apply("self");

} }

(40)

Some features that make Some features that make it it

well-suited for data transfer well-suited for data transfer

 It's simultaneously human- and machine-readable It's simultaneously human- and machine-readable format;

format;

 It has support for Unicode, allowing almost any It has support for Unicode, allowing almost any

information in any human language to be communicated;

 The self-documenting format that describes structure The self-documenting format that describes structure and field names as well as specific values;

and field names as well as specific values;

 The strict syntax and parsing requirements that allow the The strict syntax and parsing requirements that allow the necessary parsing algorithms to remain simple, efficient, necessary parsing algorithms to remain simple, efficient,

and consistent;

 The ability to represent the most general computer The ability to represent the most general computer science data structures: records, lists and trees.

science data structures: records, lists and trees.

(41)

JSON Looks Like Data JSON Looks Like Data

 JSON's simple values are the same as used in JSON's simple values are the same as used in programming languages.

programming languages.

 No restructuring is required: JSON's structures look No restructuring is required: JSON's structures look like conventional programming language structures.

like conventional programming language structures.

 JSON's objectJSON's object is record, struct, object, dictionary, is record, struct, object, dictionary, hash, associate array...

hash, associate array...

 JSON's arrayJSON's array is array, vector, sequence, list... is array, vector, sequence, list...

(42)

Arguments against JSON Arguments against JSON

 JSON Doesn't Have Namespaces.JSON Doesn't Have Namespaces.

 JSON Has No Validator.JSON Has No Validator.

 JSON Is Not Extensible.JSON Is Not Extensible.

 JSON Is Not XML.JSON Is Not XML.

(43)

JSON Doesn't Have JSON Doesn't Have

Namespaces Namespaces

 Every object is a namespace. Its set of keys Every object is a namespace. Its set of keys is independent of all other objects, even

is independent of all other objects, even exclusive of nesting.

exclusive of nesting.

 JSON uses scopeJSON uses scope to avoid ambiguity, just as to avoid ambiguity, just as programming languages do.

programming languages do.

(44)

Namespace Namespace

 http://www.w3c.org/TR/REC-xml-names/http://www.w3c.org/TR/REC-xml-names/

 In this example, there are three occurrences of the name titleIn this example, there are three occurrences of the name title within the markup, and the name alone clearly provides

within the markup, and the name alone clearly provides

insufficient information to allow correct processing by a software insufficient information to allow correct processing by a software module.

module.

<section>

< <titletitle>Book-Signing Event</>Book-Signing Event</titletitle>>

<signing><signing>

<author title<author title="Mr" name="Vikram Seth" />="Mr" name="Vikram Seth" />

<book title<book title="A Suitable Boy" price="$22.95" />="A Suitable Boy" price="$22.95" />

</signing></signing>

<signing> <signing>

<author <author titletitle="Dr" name="Oliver Sacks" />="Dr" name="Oliver Sacks" />

<book <book titletitle="The Island of the Color-Blind" ="The Island of the Color-Blind"

price="$12.95" />price="$12.95" />

</signing> </signing>

</section>

(45)

Namespace Namespace

{"section":

" "titletitle": "Book-Signing Event",": "Book-Signing Event", "signing": [ "signing": [

{{

"author": { ""author": { "titletitle": "Mr", "name": "Vikram ": "Mr", "name": "Vikram Seth" },

Seth" },

"book": { ""book": { "titletitle": "A Suitable Boy", ": "A Suitable Boy",

"price": "$22.95" }"price": "$22.95" }

}, {}, {

"author": { ""author": { "titletitle": "Dr", "name": "Oliver ": "Dr", "name": "Oliver Sacks" },

Sacks" },

"book": { ""book": { "titletitle": "The Island of the Color-": "The Island of the Color- Blind",

Blind",

"price": "$12.95" }"price": "$12.95" }

}} ] ]

}}}}

 section.titlesection.title

 section.signing[0].author.titlesection.signing[0].author.title

 section.signing[1].book.titlesection.signing[1].book.title

(46)

JSON Has No Validator JSON Has No Validator

 Being well-formed and valid is not the same Being well-formed and valid is not the same as being correct and relevant.

as being correct and relevant.

 Ultimately, every application is responsible for Ultimately, every application is responsible for validating its inputs. This cannot be

validating its inputs. This cannot be delegated.

delegated.

 A YAML validator can be used.A YAML validator can be used.

(47)

JSON is Not Extensible JSON is Not Extensible

 It does not need to be. It does not need to be.

 It can represent any non-recurrent data It can represent any non-recurrent data structure as is.

structure as is.

 JSON is flexible. New fields can be added to JSON is flexible. New fields can be added to existing structures without obsoleting existing existing structures without obsoleting existing

programs.

(48)

Versionless Versionless

 JSON has no version number.JSON has no version number.

 No revisions to the JSON grammar are No revisions to the JSON grammar are anticipated.

anticipated.

 JSON is very stable.JSON is very stable.

(49)

Supersets Supersets

 YAML is a superset of JSON.YAML is a superset of JSON.

 A YAML decoder is a JSON decoder.

 JavaScript is a superset of JSON.JavaScript is a superset of JSON.

 A JavaScript compiler is a JSON decoder.

 JSONIC is a programming language based JSONIC is a programming language based on JSON.

on JSON.

(50)

JSON Is Not XML JSON Is Not XML

 objectsobjects

 arraysarrays

 stringsstrings

 numbersnumbers

 booleansbooleans

 nullnull

• element

• attribute

• attribute string

• content

• <![CDATA[ ]]>

• entities

• declarations

• schema

• stylesheets

• comments

• version

• namespace

(51)

Data Interchange Data Interchange

 JSON is a simple, common representation of JSON is a simple, common representation of data.

data.

 Communication between servers and browser Communication between servers and browser clients.

clients.

 Communication between peers.Communication between peers.

 Language independent data interchange.Language independent data interchange.

(52)

Why the Name?

 XML is not a good data serialization format, XML is not a good data serialization format, but it is a document standard.

but it is a document standard.

 Having a standard to refer to eliminates a lot Having a standard to refer to eliminates a lot of squabbling.

of squabbling.

(53)

JSLint JSLint



JSLint can help improve the robustness JSLint can help improve the robustness and portability of your programs.

and portability of your programs.



It enforces style rules. It enforces style rules.



It can spot some errors that are very It can spot some errors that are very difficult to find in debugging.

difficult to find in debugging.



It can help eliminate implied globals. It can help eliminate implied globals.



Currently available on the web and as a Currently available on the web and as a Konfabulator widget.

Konfabulator widget.



Soon, in text editors and Eclipse. Soon, in text editors and Eclipse.

(54)

JSLint JSLint

 Warning: JSLint will hurt your feelings.Warning: JSLint will hurt your feelings.

 If you follow its advice, JSLint will make your If you follow its advice, JSLint will make your programs better.

programs better.

 http://www.JSLint.com/http://www.JSLint.com/

(55)