<html>
<body>
<h2>1.JSON简介</h2>
  <p>JSON 是javascript对象的表示法(JavaScript Object Notation)；</p>
  <p>JSON 是轻量级的文本数据交换格式；</p>
  <p>JSON 独立于语言；</p>
  <p>JSON 具有自我描述性,更易理解；</p>
<h2>2.JSON 语法</h2>
  <div>
<h3>1*JSON 语法规则</h3>
<p>JSON 语法是 JavaScript 对象表示法语法的子集。</p>
<ul>
<li>数据在名称/值对中</li>
<li>数据由逗号分隔</li>
<li>花括号保存对象</li>
<li>方括号保存数组</li>
</ul>
</div>
<div>
<h3>2*JSON 名称/值对</h3>
<p>JSON 数据的书写格式是：名称/值对。</p>
<p>名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：</p>
<pre>"firstName" : "John"</pre>
<p>这很容易理解，等价于这条 JavaScript 语句：</p>
<pre>firstName = "John"</pre>
</div>
<div>
<h3>3*JSON 值</h3>
<p>JSON 值可以是：</p>
<ul>
<li>数字（整数或浮点数）</li>
<li>字符串（在双引号中）</li>
<li>逻辑值（true 或 false）</li>
<li>数组（在方括号中）</li>
<li>对象（在花括号中）</li>
<li>null</li>
</ul>
</div>
<div>
<h3>4*JSON 对象</h3>
<p>JSON 对象在花括号中书写：</p>
<p>对象可以包含多个名称/值对：</p>
<pre>{ "firstName":"John" , "lastName":"Doe" }</pre>
<p>这一点也容易理解，与这条 JavaScript 语句等价：</p>
<pre>
firstName = "John"
lastName = "Doe"
</pre>
</div>
<div>
<h3>5*JSON 数组</h3>
<p>JSON 数组在方括号中书写：</p>
<p>数组可包含多个对象：</p>
<pre>
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
</pre>
<p>在上面的例子中，对象 "employees" 是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录。</p>
</div>
<div>
<h3>6*JSON 使用 JavaScript 语法</h3>

<p>因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。</p>

<p>通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：</p>

<h4>例子</h4>

<pre>
var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];
</pre>

<p>可以像这样访问 JavaScript 对象数组中的第一项：</p>

<pre>employees[0].lastName;</pre>

<p>返回的内容是：</p>

<pre>Gates</pre>

<p>可以像这样修改数据：</p>

<pre>employees[0].lastName = "Jobs";</pre>
</div>
<div>
<h3>7*JSON 文件</h3>
<ul>
<li>JSON 文件的文件类型是 ".json"</li>
<li>JSON 文本的 MIME 类型是 "application/json"</li>
</ul>
</div>
<div>
<h2>在 JavaScript 中创建 JSON 对象</h2>
<p>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br />
</p>
<script type="text/javascript">
var JSONObject= {
"name":"Bill",
"street":"Fifth Avenue New York 666",
"age":56,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
</script>
</div>
</body>
</html>