Using JSON Dr Charles Severance www wa 4

  • Slides: 20
Download presentation
Using JSON Dr. Charles Severance www. wa 4 e. com http: //www. wa 4

Using JSON Dr. Charles Severance www. wa 4 e. com http: //www. wa 4 e. com/code/json-01. zip http: //www. wa 4 e. com/code/json-02 -chat. zip

Time Browser Database Server Web Server D O M Send Request Parse Response Apache

Time Browser Database Server Web Server D O M Send Request Parse Response Apache My. Sql PHP ind. php Java. Script JQuery http: //www. wa 4 e. com/code/rrc/ P D O

Data on the Web • With the HTTP Request/Response well understood and well supported,

Data on the Web • With the HTTP Request/Response well understood and well supported, there was a natural move toward exchanging data between programs using these protocols. • We needed to come up with an agreed way to represent data going between applications and across networks.

Agreeing on a “Wire Format” PHP Array Python Dictionary { } Java. Script Object

Agreeing on a “Wire Format” PHP Array Python Dictionary { } Java. Script Object "name" : "Chuck", "phone" : "303 -4456" a. k. a. “Wire Protocol” - What we send on the “wire” Java Hash. Map

JSON is a “Wire Format” Serialize { Java. Script Object } De-Serialize "name" :

JSON is a “Wire Format” Serialize { Java. Script Object } De-Serialize "name" : "Chuck", "phone" : "303 -4456" PHP Array

Java. Script Object Notation • • Douglas Crockford – “Discovered” JSON Object literal notation

Java. Script Object Notation • • Douglas Crockford – “Discovered” JSON Object literal notation in Java. Script https: //www. youtube. com/watch? v=kc 8 BAR 7 SHJI

www. json. org Derived from the Java. Script “constant” syntax Similar to Python Dictionary

www. json. org Derived from the Java. Script “constant” syntax Similar to Python Dictionary syntax

Associative Arrays Objects • • Java. Script Associative Arrays are actually objects with member

Associative Arrays Objects • • Java. Script Associative Arrays are actually objects with member variables. They can be accessed with either associative array syntax or object syntax.

balls = { "golf": "Golf balls", "tennis": "Tennis balls", "ping": "Ping Pong balls" };

balls = { "golf": "Golf balls", "tennis": "Tennis balls", "ping": "Ping Pong balls" }; balls. soccer = "Soccer balls"; balls['lacross'] = "Lacross balls"; console. dir(balls);

who = { "name": 'Chuck', "age": 29, "college" : true, "offices" : [ '3350

who = { "name": 'Chuck', "age": 29, "college" : true, "offices" : [ '3350 DMC', '3437 NQ' ], }; "skills" : { "fortran": 10, "C++": 5, "python" : '7' } JSON Syntax Strin g Intege r Boolea n List/Arra y Object

<html><head/><body> <script type="text/javascript"> who = { "name": 'Chuck', "age": 29, "college": true, "offices" :

<html><head/><body> <script type="text/javascript"> who = { "name": 'Chuck', "age": 29, "college": true, "offices" : [ '3350 DMC', '3437 NQ' ], "skills" : { 'fortran': 10, 'C++': 5, 'python' : '7' } }; window. console && console. log(who); </script> <p>Check out the console. log to see the cool object</p> <pre>. . json-01/syntax. php Constant

<? php sleep(2); header('Content-Type: application/json; charset=utf-8'); $stuff = array('first' => 'first thing', 'second' =>

<? php sleep(2); header('Content-Type: application/json; charset=utf-8'); $stuff = array('first' => 'first thing', 'second' => 'second thing'); echo(json_encode($stuff)); json-01/json. php { "first" : "first thing", "second" : "second thing" }. . . $(document). ready( function () { $. get. JSON('json. php', function(data) { $("#back"). html(data. first); window. console && console. log(data); }) } ); . . . json-01/index. php

<? php session_start(); if ( isset($_POST['reset']) ) { $_SESSION['chats'] = Array(); header("Location: index. php");

<? php session_start(); if ( isset($_POST['reset']) ) { $_SESSION['chats'] = Array(); header("Location: index. php"); return; } if ( isset($_POST['message']) ) { if ( !isset ($_SESSION['chats']) ) $_SESSION['chats'] = Array(); $_SESSION['chats'] [] = array($_POST['message'], date(DATE_RFC 2822)); header("Location: index. php"); return; } ? > <html> <head> <script type="text/javascript" src="jquery. min. js"> </script> </head> json-02 -chat/index. php

<body> <h 1>Chat</h 1> <form method="post" action="index. php"> <p> <input type="text" name="message" size="60"/> <input

<body> <h 1>Chat</h 1> <form method="post" action="index. php"> <p> <input type="text" name="message" size="60"/> <input type="submit" value="Chat"/> <input type="submit" name="reset" value="Reset"/> </p> </form> <div id="chatcontent"> <img src="spinner. gif" alt="Loading. . . "/> </div> <script type="text/javascript" src="jquery. min. js"> </script> <script type="text/javascript">. . json-02 -chat/index. php

function update. Msg() { window. console && console. log('Requesting JSON'); $. get. JSON('chatlist. php',

function update. Msg() { window. console && console. log('Requesting JSON'); $. get. JSON('chatlist. php', function(rowz){ window. console && console. log('JSON Received'); window. console && console. log(rowz); $('#chatcontent'). empty(); for (var i = 0; i < rowz. length; i++) { entry = rowz[i]; $('#chatcontent'). append('<p>'+entry[0] + '<br/>  '+entry[1]+"</p>n"); } set. Timeout('update. Msg()', 4000); } // Make sure JSON requests are not cached $(document). ready(function() { $. ajax. Setup({ cache: false }); update. Msg(); }); json-02 -chat/index. php

json-02 chat/chatlist. php <? php session_start(); sleep(5); header('Content-Type: application/json; charset=utf-8'); if ( !isset($_SESSION['chats']) )

json-02 chat/chatlist. php <? php session_start(); sleep(5); header('Content-Type: application/json; charset=utf-8'); if ( !isset($_SESSION['chats']) ) $_SESSION['chats'] = array(); echo(json_encode($_SESSION['chats'])); [ ] ["Hello", "Fri, 01 Apr 2016 00: 47: 38 +0200"], ["Lunch? ", "Fri, 01 Apr 2016 00: 47: 53 +0200"]

json-03 -crud http: //www. wa 4 e. com/code/json-03 -crud. zip

json-03 -crud http: //www. wa 4 e. com/code/json-03 -crud. zip

Summary • • • JSON is very simple and powerful. It is well supported

Summary • • • JSON is very simple and powerful. It is well supported and performance in many languages. Java. Script and PHP have excellent support.

Acknowledgements / Contributions These slides are Copyright 2010 - Charles R. Severance (www. dr-chuck.

Acknowledgements / Contributions These slides are Copyright 2010 - Charles R. Severance (www. dr-chuck. com) as part of www. wa 4 e. com and made available under a Creative Commons Attribution 4. 0 License. Please maintain this last slide in all copies of the document to comply with the attribution requirements of the license. If you make a change, feel free to add your name and organization to the list of contributors on this page as you republish the materials. Initial Development: Charles Severance, University of Michigan School of Information Insert new Contributors and Translators here including names and dates Continue new Contributors and Translators here

Additional Source Information • Image of Douglas Crockford is Copyright Charles R. Severance and

Additional Source Information • Image of Douglas Crockford is Copyright Charles R. Severance and licensed as CC-BY

JSON JSON example n JSON stands for JavaJSON JSON example n JSON stands for Java
Processing JSON in NET JSON JSON NET LINQtoJSONProcessing JSON in NET JSON JSON NET LINQtoJSON
JSON JSON as an XML Alternative l JSONJSON JSON as an XML Alternative l JSON
JSON Serialization Specifications JWS JSON Serialization JWE JSONJSON Serialization Specifications JWS JSON Serialization JWE JSON
JSON JSON as an XML Alternative l JSONJSON JSON as an XML Alternative l JSON
JSON Serialization Specifications JWS JSON Serialization JWE JSONJSON Serialization Specifications JWS JSON Serialization JWE JSON
Using AJAX JSON Dr Charles Severance www djUsing AJAX JSON Dr Charles Severance www dj
2015 Severance Stroke Center Severance Stroke Center 42015 Severance Stroke Center Severance Stroke Center 4
Severance Childrens Hospital SEVERANCE Department of Briefing sessionSeverance Childrens Hospital SEVERANCE Department of Briefing session
Mengenal JSON DWI SUSANTO Mengenal JSON Javascript ObjectMengenal JSON DWI SUSANTO Mengenal JSON Javascript Object
JSON ADsafe and Misty Douglas Crockford Yahoo JSONJSON ADsafe and Misty Douglas Crockford Yahoo JSON
Python basics II JSON subprocess 1 JSON JavaPython basics II JSON subprocess 1 JSON Java
JSON OVERVIEW AND PARSING What is JSON JavaJSON OVERVIEW AND PARSING What is JSON Java
Rapid Json NEXT Rapid Json https github commiloyiprapidjsonRapid Json NEXT Rapid Json https github commiloyiprapidjson
JSON Object and JSON Schema Week 2 3JSON Object and JSON Schema Week 2 3
The JSON Saga JSON The worlds best lovedThe JSON Saga JSON The worlds best loved
PHP and JSON Topics Review JSON Reading aPHP and JSON Topics Review JSON Reading a
JSON Programming Javaorg json File New Java ProjectJSON Programming Javaorg json File New Java Project
JSON IDU 0075 Sissejuhatus veebiteenustesse What is JSONJSON IDU 0075 Sissejuhatus veebiteenustesse What is JSON