JSON Introduction_H5之家 - 中国HTML5教程资源分享第一站

JSON - Introduction

❮ Previous Next ❯

JSON: JavaScript Object Notation.

JSON is a syntax for storing and exchanging data.

JSON is an easier-to-use alternative to XML.

The following JSON example defines an employees object, with an array of 3 employee records:

JSON Example

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

The following XML example also defines an employees object with 3 employee records:

XML Example

<employees>
    <employee>
      <firstName>John</firstName> <lastName>Doe</lastName>
    </employee>
    <employee>
      <firstName>Anna</firstName> <lastName>Smith</lastName>
    </employee>
    <employee>
      <firstName>Peter</firstName> <lastName>Jones</lastName>
    </employee>
</employees>

What is JSON?

* JSON uses JavaScript syntax, but the JSON format is text only, just like XML.
Text can be read and used as a data format by any programming language.

JSON - Evaluates to JavaScript Objects

The JSON format is syntactically identical to the code for creating JavaScript objects.

Because of this similarity, instead of using a parser (like XML does), a JavaScript program can use standard JavaScript functions to convert JSON data into native JavaScript objects.

Try it Yourself

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

JSON Example

<!DOCTYPE html>
<html>
<body>

<h2>JSON Object Creation in JavaScript</h2>

<p id="demo"></p>

<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';

var obj = JSON.parse(text);

document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>

</body>
</html>

Try it Yourself »

Much Like XML Because Much Unlike XML Because

The biggest difference is:

XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function.

Why JSON?

For AJAX applications, JSON is faster and easier than XML:

Using XML

Using JSON

Fetch a JSON string

JSON.Parse the JSON string

❮ Previous Next ❯