1.0.0 Summary
Tittle：【EatBook】-NO.1.EatBook.1.JavaData.1.001-《JSON 必知必会-Introduction to JavaScript Object Notation》-
Style：Java-Json
Series：O'Reilly Turing
Publishing House：人民邮电
Page Number：129
Since：2017-04-06
End：2017-04-06
Total Hours：4
Degree Of Diffculty：low-2
Degree Of Mastery：frequently-1
Practical Level：A-1
Desired Goal：All relation to JSON
Archieve Goal：foundation usge, secure concept
Gerneral Evaluation：snack book
Read From：EBook
Reader:kingdelee
Source Code：https://github.com/lindsaybassett/json
Related Links：
http://shop.oreilly.com/product/0636920041597.do
https://jsonformatter.curiousconcept.com/
http://jsonlint.com/
http://www.cnblogs.com/kingdelee/
Cover：
1.1.0
Json is a data interchange format
1.2.0 K-V Form
Json is base on JavaScript Object Notation literal(字面量).
{
"brand": "Crocs",
"color": "pink",
"size": 9,
"hasLaces": false
}
1.2.1 Illegal
None of ""
{
title: "This is my title.",
body: "This is the body."
}
Error of ''
{
'title': 'This is my title.',
'body': 'This is the body.'
}
1.2.2 Contain Numbers
Value can be string, number, boolean, null, obj, array.
{
"brand": "Crocs",
"size": 9,
"hasLaces": false,
"color": null
}
1.2.3 MIME
application/json
1.3.1 Emun Form
[
"witty",
"charming",
"brave",
"bold"
]
1.3.2 Object Form
{
"person": {
"name": "Lindsay Bassett",
"heightInInches": 66,
"head": {
"hair": {
"color": "light blond",
"length": "short",
"style": "A-line"
},
"eyes": "green"
}
}
}
1.3.3 Nest ""
Illegal
{
"promo": "Say "Bob's the best!" at checkout for free 8oz bag of kibble."
}
Legal
{
"promo": "Say "Bob's the best!" at checkout for free 8oz bag of kibble."
}
1.3.4 BackLash
Illegal
{
"location": "C:Program Files"
}
Legal
{
"location": "C:\Program Files"
}
Escape character:
/ slash(正斜线)
backward channel(退格符)
f form feed character(换页符)
tab character(制表符)
newline(换行符)
carriage return(回车符)
u 后面跟十六进制字符
1.3.5 array
mixture in array:
{
"eggCarton": [
"egg",
null,
"egg",
"egg",
"egg",
5,
"egg"
]
}
string in array:
{
"students": [
"Jane Thomas",
"Bob Roberts",
"Robert Bobert",
"Thomas Janerson"
]
}
number in array:
{
"scores": [
93.5,
66.7,
87.6,
92
]
}
array nest object:
{
"test": [
{
"question": "The sky is blue.",
"answer": true
},
{
"question": "The earth is flat.",
"answer": false
},
{
"question": "A cat is a dog.",
"answer": false
}
]
}
array nest array:
{
"tests": [
[
true,
false,
false,
false
],
[
true,
true,
true,
true,
false
],
[
true,
false,
true
]
]
}
legal empty json object:
{}
Json array:
[
{
"user": "bobbarker"
},
{
"phone": "555-555-5555"
}
]
legal empty json array:
[]
Point:
1.json array is a executable javascript, explorer will parse and executed:
[{"Id":3,"Name":hyddd,"Money":10000}]
2.json object is not a executable javascript, explorer won't parse and executed:
{"Id":3,"Name":hyddd,"Money":10000}
1.4.0 Schema
http://json-schema.org/
1.5.0 Secure
CSRF
XSS
1.5.1
Don't use JSON.eval():
<!DOCTYPE html>
<html>
<head>
<title>Introduction to JavaScript Object Notation</title>
<script>
var jsonString = '{"animal":"cat"}';
var myObject = eval("(" + jsonString + ")");
alert(myObject.animal);
</script>
</head>
<body>
<h1>Introduction to JavaScript Object Notation</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Introduction to JavaScript Object Notation</title>
<script>
var jsonString = "alert('this is bad')";
var myObject = eval("(" + jsonString + ")");
alert(myObject.animal);
</script>
</head>
<body>
<h1>Introduction to JavaScript Object Notation</h1>
</body>
</html>
use JSON.parse() in instead of JSON.eval():
<!DOCTYPE html>
<html>
<head>
<title>Introduction to JavaScript Object Notation</title>
<script>
var jsonString = '{"animal":"cat"}';
var myObject = JSON.parse(jsonString);
alert(myObject.animal);
</script>
</head>
<body>
<h1>Introduction to JavaScript Object Notation</h1>
</body>
</html>
1.5.2 Use escape character instead of html code
no secure:
{
"message": "<div onmouseover="alert('gotcha!')">hover here.</div>"
}
secure perhaps:
<div>
1.6.0
serialized and deserialized:
<!DOCTYPE html>
<html>
<head>
<title>Introduction to JavaScript Object Notation</title>
<script>
var myXMLHttpRequest = new XMLHttpRequest();
var url = "http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139";
myXMLHttpRequest.onreadystatechange = function() {
if (myXMLHttpRequest.readyState === 4 && myXMLHttpRequest.status === 200) {
// the JSON response deserialized
var myObject = JSON.parse(myXMLHttpRequest.responseText);
// let's display the weather on the page
var description = "It's " + myObject.weather[0].description + " and " + myObject.main.temp + " degrees in " + myObject.name + ".";
document.getElementById("weather").innerHTML = description;
// The object serialized
var myJSON = JSON.stringify(myObject);
// let's display this in the div with the id "json"
document.getElementById("json").innerHTML = myJSON;
}
else if (myXMLHttpRequest.readyState === 4 && myXMLHttpRequest.status !== 200)
{
// fail.
document.getElementById("weather").innerHTML = "failed.";
document.getElementById("json").innerHTML = "failed.";
document.getElementById("error").innerHTML = "Unable to connect to the open weather map API. Are you connected to the internet? Is <a href='http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139'>this page</a> responsing? If it's not, try again later."
}
}
myXMLHttpRequest.open("GET", url, true);
myXMLHttpRequest.send();
</script>
</head>
<body>
<h1>Introduction to JavaScript Object Notation</h1>
<h2>The Weather</h2>
<div id="weather">
loading...
</div>
<h2>The JSON as a String</h2>
<div id="json">
loading...
</div>
<div id="error">
</div>
</body>
</html>
1.6.1 CORS Secure
Insecure:
Access-Control-Allow-Credentials:true Access-Control-Allow-Methods:GET, POST Access-Control-Allow-Origin:*
Secure:
Access-Control-Allow-Methods:POST Access-Control-Allow-Origin:http://www.somebank.com
1.6.2 JSON-P
example10.json:
getTheAnimal({
"animal": "cat"
});
<!DOCTYPE html>
<html>
<head>
<title>Introduction to JavaScript Object Notation</title>
<script>
// example 6-11, modified to alert the variable "myAnimal"
function getTheAnimal(data) {
var myAnimal = data.animal; // will be "cat"
alert(myAnimal);
}
// example 6-12, modified for the src file to load from example10.json
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "example10.json";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
<h1>Introduction to JavaScript Object Notation</h1>
</body>
</html>
1.7.0 some example
{
"total_rows": 2,
"offset": 0,
"rows": [
{
"id": "ddc14efcf71396463f53c0f880001538",
"key": "Barker",
"value": null
},
{
"id": "3636fa3c716f9dd4f7407bd6f700076c",
"key": "Jackson",
"value": null
}
]
}