JSON getting started learning case notes

JSON getting started learning case notes
1. What is JSON:

JSON is JavaScript Object Notation. It is a lightweight data exchange format and is very suitable for server-to-JavaScript interaction. JSON (JavaScript Object Notation) is a lightweight data exchange format. Easy for reading and writing, and easy for machine parsing and generation. It is based on a subset of JavaScript. JSON uses a completely language-independent text format, but it also uses a habit similar to the C language family (including C, C ++, C #, Java, JavaScript, Perl, Python, and so on ). These features make JSON an ideal data exchange language.

JSON is a text-based Open Data exchange format. Like XML, it is easy for readers to read, independent from the platform, and has a wide range of implementations. JSON-formatted data is lightweight and can be easily analyzed by JavaScript, making it an ideal data exchange format for Ajax web applications. JSON is mainly a data format, so it is not limited to Ajax web applications. In any situation, as long as the application needs to exchange or store structured information as text, it can be used.

JSON is prepared for JavaScript by nature. Therefore, the JSON data format is very simple. You can use JSON to transmit a simple String, Number, or Boolean, or an array, or a complex Object.

JSON (JavaScript Object Natation): It is a lightweight data exchange format. Like XML, it is based on plain text data format, it can express data such as String, Number, Boolean, array, and even object.

It is suitable for the interaction between the server and the JavaScript client. JSON is actually a subset of the JavaScript syntax.

 

2. Background of JSON:

Many people publicize the cross-platform and cross-language advantages of XML. However, unless it is applied to Web Services, developers often use their brains for XML parsing in common Web applications, whether the server generates or processes XML, or the client parses XML using JavaScript, it often leads to complicated code and extremely low development efficiency. In fact, for most Web applications, they do not need complicated XML to transmit data at all, and XML scalability is rarely advantageous. Many AJAX applications even directly return HTML fragments to build dynamic Web pages. Compared with returning XML and parsing it, returning HTML fragments greatly reduces the complexity of the system, but at the same time lacks some flexibility. The emergence of JSON can be said to meet this requirement. It is easy to integrate into HTML pages to meet Ajax requirements.

JSON provides another data exchange format for Web application developers. JSON provides better simplicity and flexibility than XML or HTML fragments.

 

3. Value Representation

String, value, true, false, null, Object, or array.

String

"Abc", "\ r \ n", "\ u00A9"

Value

123,-123.5

Boolean

True and false

Null

An object is an unordered set of 'name/value' pairs. An object starts with "{" (left parenthesis) and ends with "}" (right Parenthesis. Each "name" is followed by a ":" (colon); "," (comma) is used to separate the "name/value" pairs.

 

An array is an ordered set of values. An array starts with "[" (left square brackets) and ends with "]" (right square brackets. Values are separated by commas.

Array Representation

Use [] to contain all elements. Each element is separated by a comma. The element can be any value.

For example:

["Abc", 123, true, null]

Access the element and use the index number, starting from 0.

Complex Data Representation

The value in an Object or array can also be another Object or array to indicate more complex data.

For example:

List list = new ArrayList ();

List. add (emp)

[

{"Name": "Zhang San", "age": 18, "loves": ["reading", "playing games"]},

{"Name": "Wang Wu", "age": 20, "loves": ["Travel"]}

]

Value can be a string, number, true, false, null, object, or array enclosed by double quotation marks ). These structures can be nested.

Object Representation

It is represented by {} containing a series of unordered Key-Value pairs. The Key and Value are separated by a colon, and each key-value is separated by a comma.

For example:

{"Bookname": "Ajax basics ",

"Publisher": "Electronic Industry Publishing House ",

"Price": 56.0

}

Access the data and obtain the corresponding value through obj. key.

 

4. Comparison between JSON and XML

2. Readability: the readability of JSON and XML is comparable. One side is the suggested syntax and the other side is the standard label format, which makes it difficult to distinguish between the two.

2. XML is inherently scalable, and JSON is also available. Nothing is XML, and JSON is not.

2. Difficulty in encoding XML has a variety of encoding tools, such as Dom4j and JDom. JSON also provides tools provided by json.org, but JSON encoding is much easier than XML, JSON code can be written without tools, but it is not easy to write XML.

2. Difficulty in decoding XML parsing the parent node of the child node should be considered, which is confusing, while the difficulty in JSON Parsing is almost 0.

2. Popular XML has been widely used in the industry, and JSON is just the beginning. However, in the specific field of Ajax, the future development of XML must be in JSON. Then Ajax should be changed to Ajaj (Asynchronous JavaScript and JSON.

 

5. Conversion

For example:

 

<Script type = "text/javascript">

Var j = "{'name': 'zhang fan', 'age': 25 }";

Var obj = eval ("(" + j + ")");

Alert (obj. name );

</Script>

 

JQeury's special method for processing JSON format data

$. GetJSON (url [, data] [, callback])

The url is required. The requested server URL

Data (optional) passed parameter, in the format of {name: value ,...}

Callback (optional) callback function parameter. It is a JSON object after resolution.

 

5. JSON application example: the following code shows that JSON data storage is much simpler than XML

 

  <Script type = "text/javascript"> function showUser () {// create a user object var user = {"username": "andy", "age ": 20, "info": {"tel": "123456", "cellphone": "191198765"}, "address": [{"city": "Beijing ", "postcode": "222333" },{ "city": "newyork", "postcode": "555666"}]} // create a table object var tb = document. createElement ("table"); // set the border of the table to 2 TB. border = 2; tb. width = 300; tb. height = 8; tb. align = "center"; // create the table title object var caption = tb. createCaption (); caption. innerHTML = "User Information"; // insert the row var tr = tb in the table. insertRow (0); // Insert the column var td = tr in the row. insertCell (0); td. innerHTML = "username"; var td = tr. insertCell (1); td. innerHTML = user. username; // insert the row var tr1 = tb in the table. insertRow (1); // Insert the column var td1 = tr1.insertCell (0); td1.innerHTML = "age"; var td1 = tr1.insertCell (1); td1.innerHTML = user. age; var tr2 = tb. insertRow (2); // Insert the column var td2 = tr2.insertCell (0); td2.innerHTML = "tel"; var td2 = tr2.insertCell (1); td2.innerHTML = user.info. tel; var tr3 = tb. insertRow (3); // Insert the column var td3 = tr3.insertCell (0); td3.innerHTML = "cellphone"; var td3 = tr3.insertCell (1); td3.innerHTML = user.info. cellphone; var tr4 = tb. insertRow (4); // Insert the column var td4 = tr4.insertCell (0); td4.innerHTML = "city"; var td4 = tr4.insertCell (1); td4.innerHTML = user. address [0]. city; var tr5 = tb. insertRow (5); // Insert the column var td5 = tr5.insertCell (0); td5.innerHTML = "postcode"; var td5 = tr5.insertCell (1); td5.innerHTML = user. address [0]. postcode; var tr6 = tb. insertRow (6); // Insert the column var td6 = tr6.insertCell (0); td6.innerHTML = "city"; var td6 = tr6.insertCell (1); td6.innerHTML = user. address [1]. city; var tr7 = tb. insertRow (7); // Insert the column var td7 = tr7.insertCell (0); td7.innerHTML = "postcode"; var td7 = tr7.insertCell (1); td7.innerHTML = user. address [1]. postcode; document. getElementById ("bd "). appendChild (tb) ;}</script>

 

The following code shows how JSON simplifies the creation of JavaScript objects.

 

<Script type = "text/javascript"> function person (name, age, home) {this. name = name; this. age = age; this. home = home;} var p = new person ("Mary", 3, "Scotland"); // alert (p. name + p. age + p. home); var pj = {"name": "Mary Sue j", "age": 3, "home": "Scotland j"} alert (pj. name + pj. age + pj. home); </script>

<Script type = "text/javascript"> var j = "{'name': 'zhang fan', 'age': 25 }"; var obj = eval ("(" + j + ")"); alert (obj. name); </script>