OSS BarCamp Mumbai - JSON Presentation and Demo

  • 3,362 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,362
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JSON Introduction and Usage Mumbai – 24 th March 2007 OSS BarCamp Ketan Khairnar
  • 2. Agenda
    • JSON Introduction
    • JSON Examples
    • JSON in context with Developers
    • XML-JSON Comparison
  • 3.
    • 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
  • 4.
    • 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
  • 5.
    • 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
  • 6. Agenda
    • JSON Introduction
    • JSON Examples
    • JSON in context with Developers
    • XML-JSON Comparison
  • 7. JSON Examples {&quot;widget&quot;: { &quot;debug&quot;: &quot;on&quot;, &quot;window&quot;: { &quot;title&quot;: &quot;Sample Konfabulator Widget&quot;, &quot;name&quot;: &quot;main_window&quot;, &quot;width&quot;: 500, &quot;height&quot;: 500 }, &quot;image&quot;: { &quot;src&quot;: &quot;Images/Sun.png&quot;, &quot;name&quot;: &quot;sun1&quot;, &quot;hOffset&quot;: 250, &quot;vOffset&quot;: 250, &quot;alignment&quot;: &quot;center&quot; } }} <widget> <debug>on</debug> <window title=&quot;Sample Konfabulator Widget&quot;> <name>main_window</name> <width>500</width> <height>500</height> </window> <image src=&quot;Images/Sun.png&quot; name=&quot;sun1&quot;> <hOffset>250</hOffset> <vOffset>250</vOffset> <alignment>center</alignment> </image> </widget> {&quot;menu&quot;: { &quot;id&quot;: &quot;file&quot;, &quot;value&quot;: &quot;File:&quot;, &quot;popup&quot;: { &quot;menuitem&quot;: [ {&quot;value&quot;: &quot;New&quot;, &quot;onclick&quot;: &quot;CreateNewDoc()&quot;}, {&quot;value&quot;: &quot;Open&quot;, &quot;onclick&quot;: &quot;OpenDoc()&quot;}, {&quot;value&quot;: &quot;Close&quot;, &quot;onclick&quot;: &quot;CloseDoc()&quot;} ] } } } <menu id=&quot;file&quot; value=&quot;File&quot; > <popup> <menuitem value=&quot;New&quot; onclick=&quot;CreateNewDoc()&quot; /> <menuitem value=&quot;Open&quot; onclick=&quot;OpenDoc()&quot; /> <menuitem value=&quot;Close&quot; onclick=&quot;CloseDoc()&quot; /> </popup> </menu>
  • 8. Agenda
    • JSON Introduction
    • JSON Examples
    • JSON in context with Developers
    • XML-JSON Comparison
  • 9.
    • XML Vs JSON Examples
    • The same text expressed as XML:
    • <menu id=&quot;file&quot; value=&quot;File&quot; >
    • <popup>
      • <menuitem value=&quot;New&quot; onclick=&quot;CreateNewDoc()&quot; />
      • <menuitem value=&quot;Open&quot; onclick=&quot;OpenDoc()&quot; />
      • <menuitem value=&quot;Close&quot; onclick=&quot;CloseDoc()&quot; />
    • </popup>
    • </menu>
    JSON Access: menu.popup.menuitem[1][“@onclick”] JSON in context with Developers {&quot;menu&quot;: { “ @ id&quot;: &quot;file&quot;, “ @ value&quot;: &quot;File:&quot;, &quot;popup&quot;: { &quot;menuitem&quot;: [ {“ @ value&quot;: &quot;New&quot;, “ @ onclick&quot;: &quot;CreateNewDoc()&quot;}, {“ @ value&quot;: &quot;Open&quot;, “ @ onclick&quot;: &quot;OpenDoc()&quot;}, {“ @ value&quot;: &quot;Close&quot;, “ @ onclick&quot;: &quot;CloseDoc()&quot;} ] } } } Our Convention {&quot;menu&quot;: { &quot;id&quot;: &quot;file&quot;, &quot;value&quot;: &quot;File:&quot;, &quot;popup&quot;: { &quot;menuitem&quot;: [ {&quot;value&quot;: &quot;New&quot;, &quot;onclick&quot;: &quot;CreateNewDoc()&quot;}, {&quot;value&quot;: &quot;Open&quot;, &quot;onclick&quot;: &quot;OpenDoc()&quot;}, {&quot;value&quot;: &quot;Close&quot;, &quot;onclick&quot;: &quot;CloseDoc()&quot;} ] } } } Standard
  • 10.
    • Request XML in Serverside Scripting
    • <RG ID=&quot;UI_BA_MYTXNS_DELETE&quot; BranchCode=&quot;999&quot; LoCode=&quot;1&quot;>
    • <bindRows>
    • <bindParams>
    • <b1>6028</b1>
    • </bindParams>
    • </bindRows>
    • </RG>
    • Corresponding JSON Object
    • {RG:
    • &quot;@ID&quot; : &quot;UI_BA_MYTXNS_DELETE&quot;,
    • &quot;@BranchCode&quot; : &quot;999&quot;,
    • &quot;@LoCode&quot; :1,
    • &quot;bindRows&quot; : {
    • bindParams :{
    • &quot;b1&quot; :6028
    • }
    • }
    • }
    JSON in context with Developers Adding bindparams/bindrows Building JSON object using JavaScript Object
  • 11. JSON in context with Developers
    • Response XML from ASP call
    • <?xml version=&quot;1.0&quot;?>
    • <?xml-stylesheet type='text/xsl' href='Picklist.xsl'?>
    • <List>
    • <TotalRows>3</TotalRows>
    • <Columns C1=&quot;TASK_CODE&quot; C2=&quot;PARENTTASK&quot; C3=&quot;TASK_LEVEL&quot; C4=&quot;TASK_DESCRIPTION&quot; C5=&quot;TXT__KEY&quot; C6=&quot;FLG_TASK_TYPE&quot; C7=&quot;TXT_TASK_LITERAL&quot; C8=&quot;FLG_OPN_BAT&quot; C9=&quot;COD_MODULE&quot; C10=&quot;_INQUIRY&quot; C11=&quot;IS_MAINTENANCE&quot; C12=&quot;IS_DEP_WDR&quot;/>
    • <Tags/>
    • <Rows>
    • <Row C1=&quot;CHM01&quot; C2=&quot;0&quot; C3=&quot;4&quot; C4=&quot; Product Definition&quot; C5=&quot; &quot; C6=&quot;F&quot; C7=&quot; &quot; C8=&quot;N&quot; C9=&quot; &quot; C10=&quot;N&quot; C11=&quot;N&quot; C12=&quot;N&quot;/>
    • <Row C1=&quot;CHM02&quot; C2=&quot;0&quot; C3=&quot;4&quot; C4=&quot;Interest Rate Tiers&quot; C5=&quot; &quot; C6=&quot;F&quot; C7=&quot; &quot; C8=&quot;N&quot; C9=&quot; &quot; C10=&quot;N&quot; C11=&quot;N&quot; C12=&quot;N&quot;/>
    • <Row C1=&quot;CHM04&quot; C2=&quot;0&quot; C3=&quot;4&quot; C4=&quot;Bank Parameter&quot; C5=&quot; &quot; C6=&quot;F&quot; C7=&quot; &quot; C8=&quot;N&quot; C9=&quot; &quot; C10=&quot;N&quot; C11=&quot;N&quot; C12=&quot;N&quot;/>
    • </Rows>
    • </List>
    • var sNode =respXmldoc.selectSingleNode(&quot;// List &quot;);
    • var nNode = new Object;
    • nNode[&quot;List&quot;] =xml2ObjJSON(sNode )
    • Accessing TASK_DESCRIPTION of first row is done as follows
    • nNode.List.Rows.Row[0][&quot;@C4&quot;]
  • 12. JSON in context with Developers
    • Sample server responses in JSON format
  • 13. 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
  • 14. Agenda
    • JSON Introduction
    • JSON Examples
    • JSON in context with Developers
    • XML-JSON Comparison
  • 15. XML-JSON Comparison
    • JSON explicitly defines itself as a &quot;fat-free alternative to XML&quot;.
    • 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
  • 16.
    • 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
  • 17. 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.
  • 18. The browser hosts an application, not content e.g kayak.com kiko.com 30boxes.com Ajax Discussion
  • 19. Ajax Discussion Definition : DOM :  CRUD ,innerHTML CSS :  selector,className XMLHttpRequest  responseXML responseText
  • 20. The server delivers data, not content Google reader Google maps Yahoo pipes Ajax Discussion
  • 21.  
  • 22. User interaction with the application can be fluid and continuous Ajax Discussion
  • 23.
    • 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
  • 24.
    • 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
  • 25.