OSS BarCamp Mumbai - JSON Presentation and Demo

JSON Introduction and Usage Mumbai – 24 th March 2007 OSS BarCamp Ketan Khairnar

Agenda JSON Introduction JSON Examples JSON in context with Developers XML-JSON Comparison

What is JSON? JSON (JavaScript Object Notation) is a lightweight data-interchange format. The advantages of using JSON as server interchange format. easy to parse and generate JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. JSON output text can be compiled directly in JavaScript into JavaScript objects using eval(): var myObj = eval( '(' + jsontext + ')' ); Minimal, Textual, Light-weight and not a document model JSON is built on two structures: A collection of name/value pairs. In various languages, this is realized as an object , record, struct, dictionary, hash table, keyed list, or associative array. object e.g {}, { members } where members  string : value (separated by comma) An ordered list of values. In most languages, this is realized as an array , vector, list, or sequence. array e.g [] , [ elements ] where elements  value (separated by comma) JSON Introduction

JSON Values Strings Sequence of 0 or more Unicode characters No separate character type A characters is represented as a string with a length of 1 Wrapped in "double quotes" Backslash escapement Numbers Integer/Real/Scientific No octal or hex No NaN or Infinity. Use null instead Booleans true false Objects Objects are unordered containers of key/value pairs and are wrapped in { } , separates key/value pairs and : separates keys and values Keys are strings and Values are JSON values Arrays Arrays are ordered sequences of values and are wrapped in [] , separates values JSON does not talk about indexing. An implementation can start array indexing at 0 or 1. Null : A value that isn't anything JSON Introduction

Some Examples of Values Objects { "name": "Jack B. Nimble", "at large": true, "grade": "A", "format": { "type": "rect", "width": 1920, "height": 1080, "interlace": false, "framerate": 24 } } Arrays ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] [ [0, -1, 0],[1, 0, 0], [0, 0, 1] ] JSON Introduction

JSON Examples {"widget": { "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" } }} <widget> <debug>on</debug> <window title="Sample Konfabulator Widget"> <name>main_window</name> <width>500</width> <height>500</height> </window> <image src="Images/Sun.png" name="sun1"> <hOffset>250</hOffset> <vOffset>250</vOffset> <alignment>center</alignment> </image> </widget> {"menu": { "id": "file", "value": "File:", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } } } <menu id="file" value="File" > <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup> </menu>

XML Vs JSON Examples The same text expressed as XML: <menu id="file" value="File" > <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup> </menu> JSON Access: menu.popup.menuitem[1][“@onclick”] JSON in context with Developers {"menu": { “ @ id": "file", “ @ value": "File:", "popup": { "menuitem": [ {“ @ value": "New", “ @ onclick": "CreateNewDoc()"}, {“ @ value": "Open", “ @ onclick": "OpenDoc()"}, {“ @ value": "Close", “ @ onclick": "CloseDoc()"} ] } } } Our Convention {"menu": { "id": "file", "value": "File:", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } } } Standard

Request XML in Serverside Scripting <RG ID="UI_BA_MYTXNS_DELETE" BranchCode="999" LoCode="1"> <bindRows> <bindParams> <b1>6028</b1> </bindParams> </bindRows> </RG> Corresponding JSON Object {RG: "@ID" : "UI_BA_MYTXNS_DELETE", "@BranchCode" : "999", "@LoCode" :1, "bindRows" : { bindParams :{ "b1" :6028 } } } JSON in context with Developers Adding bindparams/bindrows Building JSON object using JavaScript Object

JSON in context with Developers Response XML from ASP call <?xml version="1.0"?> <?xml-stylesheet type='text/xsl' href='Picklist.xsl'?> <List> <TotalRows>3</TotalRows> <Columns C1="TASK_CODE" C2="PARENTTASK" C3="TASK_LEVEL" C4="TASK_DESCRIPTION" C5="TXT__KEY" C6="FLG_TASK_TYPE" C7="TXT_TASK_LITERAL" C8="FLG_OPN_BAT" C9="COD_MODULE" C10="_INQUIRY" C11="IS_MAINTENANCE" C12="IS_DEP_WDR"/> <Tags/> <Rows> <Row C1="CHM01" C2="0" C3="4" C4=" Product Definition" C5=" " C6="F" C7=" " C8="N" C9=" " C10="N" C11="N" C12="N"/> <Row C1="CHM02" C2="0" C3="4" C4="Interest Rate Tiers" C5=" " C6="F" C7=" " C8="N" C9=" " C10="N" C11="N" C12="N"/> <Row C1="CHM04" C2="0" C3="4" C4="Bank Parameter" C5=" " C6="F" C7=" " C8="N" C9=" " C10="N" C11="N" C12="N"/> </Rows> </List> var sNode =respXmldoc.selectSingleNode("// List "); var nNode = new Object; nNode["List"] =xml2ObjJSON(sNode ) Accessing TASK_DESCRIPTION of first row is done as follows nNode.List.Rows.Row[0]["@C4"]

JSON in context with Developers Sample server responses in JSON format

JSON in context with Developers JSON Utility Functions xml2ObjJSON : This function accepts DOM element. Returns JSON Object objJSON2Xml : This function accepts JSON object returns xml string objJSON2StrJSON : This function accepts JSON object and returns its JSON string. Returns false if there is any error strJSON2ObjJSON: This function accepts JSON string as parameter and returns its JSON object. Returns false if there is any error

XML-JSON Comparison JSON explicitly defines itself as a "fat-free alternative to XML". JSON and XML share the following properties: Both are formats that depict an object as a plain-text string. Being plain-text string formats, both are suitable for transfer across HTTP. This means that both are suitable as inputs and outputs for a web service. Each format is supported by libraries in numerous languages, including Javascript. There are libraries to convert from native objects to either format and back again to native objects. Java : JSONTools http://developer.berlios.de/projects/jsontools/ And simple Java marshalling http://www.json.org/java/index.html PHP : http://www.php.net/releases/5_2_0.php

JSON has several advantages over XML: JSON is more compact and the lack of tags can make it easier for humans to comprehend the underlying data. It's often claimed that JSON is faster for browsers to parse, though a recent investigation suggests XML parsing actually scales better. JSON is a concrete data format inherently capable of describing data structures. XML, in contrast, is really a meta-format, designed for giving semantic meaning to parts of a document, and a developer has many choices to make about the precise XML dialect to use it to describe a data structure. Each mapping strategy has its own conventions - for example, developers need to decide on tag names and decide between tag attributes or nested tags. Consequently, a server-side XML-object mapping framework may not be message-compatible with a Javascript counterpart, and never underestimate the amount of meetings and emails that will be necessary to resolve a seemingly trivial argument over data formats. In that sense, JSON is comparable to a well-defined XML dialect rather than XML itself. Within browsers, JSON has wider support and more consistent handling, because it's based on sandard Javascript. JSON happens to be quite compatible with YAML, another XML alternative that's gaining traction in the dynamic scripting community. XML-JSON Comparison

XML-JSON Comparison XML has several advantages over JSON: XML is vastly more familiar to the IT community than JSON. XML is more self-documenting. The header identifies which XML format is being used, and there's often a schema or DTD which defines the format precisely. XML is inherently designed for giving semantic meaning to documents. XML is usually a better choice for describing documents where order, text/element intermixing, and semantic structural meaning are desired. XML has much more support in terms of libraries and tool support. JSON libraries tend to be simply about conversion, which its advocates would probably argue is all that's required. XML, on the other hand, has support in terms of DTD and Schema validators, XPath tools to interrogate the data, XSLT processors to perform translations, and so on. Furthermore, many IDEs, editors, and debugging environments make XML easy to work with. For any given task, developers usually have the luxury of choosing between several competing implementations. XML has good browser support, too. DOM interrogation, XPath and XSLT, are all possible in modern browsers.

The browser hosts an application, not content e.g kayak.com kiko.com 30boxes.com Ajax Discussion

Ajax Discussion Definition : DOM :  CRUD ,innerHTML CSS :  selector,className XMLHttpRequest  responseXML responseText

The server delivers data, not content Google reader Google maps Yahoo pipes Ajax Discussion

User interaction with the application can be fluid and continuous Ajax Discussion

Ajax rich clients Rich? Client… How Patterns: predictive fetch On demand JavaScript User feedback Common validations Messaging/data options :API Del.icio.us / yahoo JSON APIs Ajax Discussion

Demos and Info: http://www.kawa.net/works/js/jkl/parsexml-e.html http://ajaxify.com/run/json/ http://jsontools.berlios.de/ http://oss.metaparadigm.com/jsonrpc/demos.html

OSS BarCamp Mumbai - JSON Presentation and Demo

More Related Content

What's hot (20)

Similar to OSS BarCamp Mumbai - JSON Presentation and Demo (20)

Recently uploaded (20)

OSS BarCamp Mumbai - JSON Presentation and Demo