Web-Json data exchange format

Foreword

Learning WEB cannot avoid data transmission, and for data transmission between the browser and the server, there must be a unified format. The main text format is Json

Json overview

JSON (JavaScript Object Notation) is a text format used for data exchange.
Similar to XML, it is just a data format that can be used in any programming language.

1. Json is a key-value storage, key supports String, number, value supports most types
2. Json itself is a string, but there is a specific format, that is, a string of all symbols in this format, called Json, and all languages ​​support string, that is, Json can be used with any programming language
3. Json is used for data exchange and is a lightweight data exchange format (then XML is a heavyweight data format)
4. Json origin and JavaScript, JSON syntax is a subset of javaScript syntax

Json syntax

First of all, we know that Json's definition is a text format
for data exchange, and data exchange must consider the amount of data and data type
exchanged, that is, the data exchanged must be array collections and objects

To describe an object in JavaScript, use curly brackets {}, describe an array with brackets []

Json syntax is a subset of JavaScript, so naturally

Describe a msg object:

    var msg =  {
   	 	"name" : "zhangsan",
    	"id" : 123, 
    	"country" : "China"
    }

Describe an msg array:

    var msg = [
        {"name" : "zhangsan", "id" : 123, "country" : "China"},
        {"name" : "lisi","id" : 1234,"country" : "US"},
    ]

The format is: key: value The form of key-value pairs

Json is always just a data format, the said Json object is a JavaScript object that conforms to the Json format

Precautions

Data types supported by Json:

• Number: number (integer or floating point)
• String: String (in double quotes), must be English double quotes (""), some weak languages ​​can support single quotes
• Boolean: logical value (true or false)
• Array: Array (in square brackets), generally in the Value position, […]
• Object: Object (in curly brackets), generally in the Value position, {…}
• null: null

In Json's data, there can be no quotes, commas, special operators, /、*、-、+、>>etc.

Json grammar rules are a subset of JavaScript

Json get element value

Json syntax is a subset of JavaScript, you can simply get the Json element through JS syntax

<script>
    var data = {
        "name" : "zhangsan",
        "country" : "China"
    }

    alert(data.name+" - "+data.country)
</script>

But as mentioned earlier, the value can also be Number type data, and Number type data can not be taken like this,
but data [1] or data [“1”]

<script>
    var data = {
        "name" : "zhangsan",
        "country" : "China",
        "1" : "法外狂徒"
    }
    alert(data["1"])
</script>

Convert

eval method

The eval () function uses a JavaScript compiler, which can parse JSON text (JavaScript strings) and then generate JavaScript objects

But use brackets to enclose the string:

<script>
    var data = '{"name":"zhangsan","country":"China"}';
    var jsonData = eval("("+data+")");
    alert(jsonData.name);
</script>

parse method

JSON.parse () is a commonly used JSON conversion method in Javascript, which can convert strings that conform to Json syntax into Json objects

<script>
    var data = '{"name":"zhangsan"}';
    alert(data.name);
    var jsonData=JSON.parse(data);
    alert(jsonData.name);
</script>

The first pop-up box is undefined, because this is a string, you can not get Json data through JS

parse is a Json object after conversion

stringify method

Of course, there is also a method stringify to convert Json objects into strings with symbolic Json rules

<script>
    var data = {"name":"zhangsan"};
    var jsonData=JSON.stringify(data)
    alert(jsonData.name)
    alert(jsonData);
</script>

The first pop-up box is underfined, indicating that the converted is not a Json object

This is a string

The stringify method can also convert Json string contentJSON.stringify(value[, replacer[, space]])

There can be 3 parameters,
just a parameter value, that is, the Json object to be converted

var jsonData=JSON.stringify(data)

Two parameters: the replacer parameter can be function or Array

If the replacer parameter is a function
function, it can take two parameters: key and value, and the return value

• If a Number is returned, the converted string is added to the JSON string
• If a String is returned, the string is added to the JSON as an attribute value
• If a Boolean is returned, "true" or "false" is added to the JSON string as the attribute value
• If it returns undefined, the property value will not be output in the JSON string
  

<script>
    var data = {"name":"zhangsan","country":"China"};
    var jsonData=JSON.stringify(data,function (key, value) {
        if (key == "name"){
            value = "法外狂徒"
        }
        return value;
    })
    alert(jsonData)
</script>

The stringify method will judge each key-value pair of our Json

If the parameter replacer is an array
, the key of the result set only outputs hits, and the attribute of miss is filtered.

<script>
    var data = {"name":"zhangsan","country":"China"};
    var jsonData=JSON.stringify(data,["name"]);
    alert(jsonData);
</script>

The third parameter space is to beautify the output of Json,
but to use the third parameter must bring the second parameter

1. space is a number, indicating the interval between each element

<script>
    var data = {"name":"zhangsan","country":"China"};
    var jsonData=JSON.stringify(data,null,2);
    alert(jsonData);
</script>

2. space is the customized space beautification output of 'tab', using "\ t"

var jsonData=JSON.stringify(data,null,"\t");

3. space is a string, add a fixed string

var jsonData=JSON.stringify(data,null,"hello");

Lightweight data exchange format

Why is Json a lightweight data exchange format? Why is XML a heavyweight data exchange format?

The Json data format is relatively simple, easy to read and write, the format is compressed, and the occupied bandwidth is small, unlike the various tags that exist in the XML format, the file is huge, the file format is complex, and the transmission takes up the bandwidth

Use an example to show:
a book object: need to have a book name name, author object author, price price
author object needs to describe the author name authorName, achievement
Json said:

    var book = {
        "name" : "时间简史",
        "author" : {
            "authorName" : "霍金",
            "achievement" : "physicist"
        },
        "price" : 100
    }

And in XML:

<book>
    <name>时间简史</name>
    <author>
        <authorName>霍金</authorName>
        <achievement>physicist</achievement>
    </author>
    <price>100</price>
</book>

Various tags are
not only this, there are constraints on XML. If price is a number and is not empty, you need to write a constraint file, and it takes time to parse the XML file (dom4j, Xpath, Jsoup, etc.) Whether different browsers have different parsing methods
and Json itself is a string of strings, which is too simple to parse, and there are no various label specifications

Can you
really understand XML about some basics of XML? -Does XML Basics
really understand XML? -XML parsing method

So Json gradually became the mainstream data exchange format

Because, after all, I am engaged in the Java backend, and the review of Json is roughly that. Json still has a lot to dig into.