JSON 教程

1JSON
1、什么是 JSON ?
      1.1JSON:JavaScript 对象表示法(JavaScript Object Notation)。
      1.2JSON 是存储和交换文本信息的语法。类似 XML。
      1.3JSON 比 XML 更小、更快,更易解析。

2、JSON - 转换为 JavaScript 对象
     2.1JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

2简介

1、类似 XML
          1.1 JSON 是纯文本
1.2JSON 具有“自我描述性”(人类可读)
1.3JSON 具有层级结构(值中存在值)
1.4JSON 可通过 JavaScript 进行解析
1.5JSON 数据可使用 AJAX 进行传输

2、相比 XML 的不同之处

    * 没有结束标签
    * 更短
    * 读写的速度更快
    * 能够使用内建的 JavaScript eval() 方法进行解析
    * 使用数组
    * 不使用保留字


3、为什么使用 JSON?
     3.1对于 AJAX 应用程序来说,JSON 比 XML 更快更易使用:
     3.2使用 XML
读取 XML 文档
使用 XML DOM 来循环遍历文档
读取值并存储在变量中
     3.3使用 JSON
读取 JSON 字符串
用 eval() 处理 JSON 字符串

3语法

1、JSON 语法规则
     1.1JSON 语法是 JavaScript 对象表示法语法的子集。

    * 数据在名称/值对中
    * 数据由逗号分隔
    * 花括号保存对象
    * 方括号保存数组


2、JSON 名称/值对
     2.1JSON 数据的书写格式是:名称/值对。
"firstName" : "John"


3、JSON 值
     3.1JSON 值可以是:

    * 数字(整数或浮点数)
    * 字符串(在双引号中)
    * 逻辑值(truefalse* 数组(在方括号中)
    * 对象(在花括号中)
    * null


4、JSON 对象
     4.1JSON 对象在花括号中书写:
{ "firstName":"John" , "lastName":"Doe" }


5、JSON 数组
     5.1JSON 数组在方括号中书写:
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}


6、JSON 使用 JavaScript 语法
     6.1因为 JSON 使用 JavaScript 语法,所以无需额外的软件就能处理 JavaScript 中的 JSON。
var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];


7、JSON 文件

    * JSON 文件的文件类型是 ".json"
    * JSON 文本的 MIME 类型是 "application/json"


4使用

1、把 JSON 文本转换为 JavaScript 对象
     1.1JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 JavaScript 对象,然后在网页中使用该数据。

2、JSON 实例 - 来自字符串的对象
var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';


3、JSON 解析器
Web 浏览器支持Web 软件支持
    * Firefox (Mozilla) 3.5
    * Internet Explorer 8
    * Chrome
    * Opera 10
    * Safari 4


    * jQuery
    * Yahoo UI
    * Prototype
    * Dojo
    * ECMAScript 1.5

 

posted @ 2013-06-17 13:02  cnmotive  阅读(313)  评论(0编辑  收藏  举报