JSON tutorial, json tutorial

Source: Internet
Author: User
Tags javascript eval

JSON tutorial, json tutorial
JSON tutorial

Note:

You can use the Baidu JSON parser to check whether the JSON you have written is correct.

 

Refer:

JSON tutorial
Http://www.w3school.com.cn/json/index.asp

JSON tutorial | cainiao tutorial
Http://www.runoob.com/json/json-tutorial.html

 

 

JSON: JavaScript Object Notation (JavaScript Object Notation ).

JSON is the syntax for storing and exchanging text information. Similar to XML.

JSON is smaller, faster, and easier to parse than XML.

Examples used in each chapter
{"employees": [{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" },{ "firstName":"Thomas" , "lastName":"Carter" }]}

This employee object is an array containing three employee records (objects.

What is JSON?
  • JSON refers to the JavaScript Object Notation (JavaScript Object Notation)
  • JSON is a lightweight text data exchange format.
  • JSON is independent of the Language *
  • JSON is self-descriptive and easy to understand.

* JSON usageJavaScript syntaxTo describe the data object, but the JSONIndependent from languages and platforms. The JSON parser and JSON library support many different programming languages.

JSON-convert to JavaScript Object

The JSON text format is syntactically the same as the code used to create JavaScript objects.

Because of this similarity, there is no need for a parser. JavaScript programs can use built-in eval () functions to generate native JavaScript objects using JSON data.

 

 

Try it yourself-instance

With our editor, you can edit JavaScript code online and click a button to view the result:

<Html> <body> var JSONObject= {"name":"Bill Gates","street":"Fifth Avenue New York 666","age":56,"phone":"555 1234567"};Document. getElementById ("jname "). innerHTML = JSONObject. namedocument. getElementById ("jage "). innerHTML = JSONObject. agedocument. getElementById ("jstreet "). innerHTML = JSONObject. streetdocument. getElementById ("jphone "). innerHTML = JSONObject. phone </script> </body> 

Try it yourself

Similar to XML
  • JSON is plain text
  • JSON is "self-descriptive" (human readable)
  • JSON has a hierarchical structure (Values exist in values)
  • JSON can be parsed using JavaScript
  • JSON data can be transmitted using AJAX
Differences from XML
  • No end tag
  • Shorter
  • Faster read/write speed
  • Ability to parse using the built-in JavaScript eval () method
  • Use Arrays
  • Do not use reserved words
Why use JSON?

For AJAX applications, JSON is easier to use than XML:

Use XML
  • Read XML documents
  • Use xml dom to traverse documents cyclically
  • Read the value and store it in the variable.
Use JSON
  • Read JSON strings
  • Use eval () to process JSON strings

JSON syntax is a subset of JavaScript syntax.

 

 

JSON syntax rules

JSON syntax is a subset of the syntax of JavaScript Object Notation.

  • Data in name/value pairs
  • Data is separated by commas (,).
  • Brackets save objects
  • Square brackets Save the Array
JSON Name/value pair

JSON data is written in the format of name/value pair.

Name/value pair includes the field name (in double quotation marks), followed by a colon, followed by a value:

"firstName" : "John"

This is easy to understand. It is equivalent to this JavaScript statement:

firstName = "John"
JSON Value

The JSON value can be:

  • Number (integer or floating point number)
  • String (in double quotation marks)
  • Logical value (true or false)
  • Array (in square brackets)
  • Object (in curly brackets)
  • Null
JSON object

JSON objects are written in curly brackets:

The object can contain multiple name/value pairs:

{ "firstName":"John" , "lastName":"Doe" }

This is easy to understand and is equivalent to this JavaScript statement:

firstName = "John"lastName = "Doe"
JSON Array

JSON array is written in square brackets:

An array can contain multiple objects:

{"employees": [{ "firstName":"John" , "lastName":"Doe" },{ "firstName":"Anna" , "lastName":"Smith" },{ "firstName":"Peter" , "lastName":"Jones" }]}

In the preceding example, the object "employees" is an array containing three objects. Each object represents a record about someone (with a surname and a name.

JSON uses JavaScript syntax

Because JSON uses JavaScript syntax, JSON in JavaScript can be processed without additional software.

With JavaScript, you can create an array of objects and assign values as follows:

Example
var employees = [{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" },{ "firstName":"Thomas" , "lastName": "Carter" }];

You can access the first entry in the JavaScript Object array as follows:

employees[0].lastName;

The returned content is:

Gates

You can modify the data as follows:

employees[0].lastName = "Jobs";

Try it yourself

In the following sections, you will learn how to convert JSON text into JavaScript objects.

JSON File
  • The JSON file type is ". json"
  • The MIME type of JSON text is "application/json"

 

 

Converts JSON text to JavaScript objects.

One of the most common usage of JSON is to read JSON data (as a file or as HttpRequest) from the web server, convert JSON data into JavaScript objects, and then use the data on the web page.

To make it easier for you, we use strings as input for demonstration (rather than files ).

JSON instance-object from string

Create a JavaScript string containing the JSON Syntax:

var txt = '{ "employees" : [' +'{ "firstName":"Bill" , "lastName":"Gates" },' +'{ "firstName":"George" , "lastName":"Bush" },' +'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

Because the JSON syntax is a subset of JavaScript syntax, the JavaScript function eval () can be used to convert JSON text to JavaScript objects.

The eval () function uses a JavaScript compiler that parses JSON text and generates JavaScript objects. Text must be enclosed in parentheses to avoid syntax errors:

var obj = eval ("(" + txt + ")");

Use JavaScript objects on a webpage:

Example
<p>First Name: <span id="fname"></span><br />Last Name: <span id="lname"></span><br /></p><script type="text/javascript">document.getElementById("fname").innerHTML = obj.employees[1].firstNamedocument.getElementById("lname").innerHTML = obj.employees[1].lastName</script>

Try it yourself

JSON parser

Tip: the eval () function can compile and execute any JavaScript code. This hides a potential security issue.

It is safer to use the JSON parser to convert JSON into JavaScript objects. The JSON parser can only recognize JSON text, rather than compile scripts.

In the browser, this provides native JSON support, and the JSON parser is faster.

Newer browsers and the latest ECMAScript (JavaScript) standards all contain native support for JSON.

Web browser support Web software support
  • Firefox (Mozilla) 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4
  • JQuery
  • Yahoo UI
  • Prototype
  • Dojo
  • ECMAScript 1.5

Try it yourself

For older browsers, you can use the JavaScript Library: https://github.com/douglascrockford/JSON-js

The JSON format was originally developed by Douglas Crockford.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.