从JS到AJAX-13JSON

1、2一、一、 概述概述服务器应答服务器应答Ajax请求时，有两种不同的方式请求时，有两种不同的方式返回数据，返回数据，responseXML和和responseText。Douglas Crockford创建了另一种数据传创建了另一种数据传输格式，我们称之为输格式，我们称之为JavaScript对象表示法对象表示法(JavaScript Object Notation )。它是一种。它是一种轻量级的数据交换格式。易于人阅读和编写。同时轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它是基于也易于机器解析和生成。它是基于JavaScript的的一个子集。一个子集。 JSON采用完

2、全采用完全独立于语言的文本格式独立于语言的文本格式，但，但是也使用了是也使用了类似于类似于C语言家族的习惯语言家族的习惯。这些特性使。这些特性使JSON成为理想的数据交换语言。成为理想的数据交换语言。 3二、二、 JSON语法语法2.1 JSON构建的结构构建的结构n “名称名称/值值”对的集合：对的集合：A collection of name/value pairs，不同的语言中，它被理解为，不同的语言中，它被理解为对对象象(object)，纪录，纪录(record)，结构，结构(struct)，字典字典(dictionary)，哈希表，哈希表(hash table)，有键列表，有键列表(

3、keyed list)，或者关联数组，或者关联数组 (associative array)。n 值的有序列表：值的有序列表：An ordered list of values，在，在大部分语言中，它被理解为大部分语言中，它被理解为数组数组(array)。这些都是常见的数据结构。现代计算机语言都以某种形这些都是常见的数据结构。现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。的编程语言之间交换成为可能。4Object 对象在对象在 JSON 中是用中是用 包含一系包含一系列无序的列无序的 Key-V

4、alue 键值对表示的，实际上键值对表示的，实际上此处的此处的 Object 相当于相当于 Java 中的中的 Map，而，而不是不是 Java 的的 Class 。注意。注意 Key 只能用只能用 String 表示表示。52.2 JSON具体形式具体形式o 对象：一个无序的对象：一个无序的“名称名称/值值对对”集合。集合。对象以对象以“”开始，以开始，以“”结束。每个结束。每个“名称名称”后跟一个后跟一个“:”，“名称名称/值值对对”之间使用之间使用“,”分隔。分隔。6o 数组：是值（数组：是值（value）的有序集合。数组以）的有序集合。数组以“”开始，开始，“”结束。值之间使用结束。值

5、之间使用“,”分分隔。隔。7o 值：值：value，可以是双引号括起来的字符串（，可以是双引号括起来的字符串（String）、数值）、数值(number)、true、false、null、对象、对象(object)或者数组或者数组(array)。这些。这些结构可以嵌套。结构可以嵌套。82.3 JSON数据格式数据格式o字符串（字符串（string）是由）是由双引号包围的任意数双引号包围的任意数量量Unicode字符的集合字符的集合，支持使用反斜线转，支持使用反斜线转义。一个字符（义。一个字符（character）即一个单独的字）即一个单独的字符串（符串（character string）。）。

6、o字符串（字符串（string）与）与C或者或者Java的字符串非的字符串非常相似。常相似。 9o String 的完整表示结构的完整表示结构：10o Number 可以根据整型或浮点数表示如下可以根据整型或浮点数表示如下。这与绝大多数编程语言的表示方法一致，。这与绝大多数编程语言的表示方法一致，例如：例如：n 12345（整数）（整数） n -3.9e10（浮点数）（浮点数） 11XML和和JSON都使用结构化方法来标记数据，都使用结构化方法来标记数据，下面来做一个简单的比较。现假设有一个用户数据下面来做一个简单的比较。现假设有一个用户数据包括：用户名、密码、所在部门、性别、年龄。包括：用户

7、名、密码、所在部门、性别、年龄。n用用XML表示如下：表示如下：张三张三 123456技术部技术部男男30n用用JSON表示如下：表示如下：“user:name:张三张三,password:123456,department:技术部技术部,sex:男男, age:30实例比较实例比较12三、数据传输格式三、数据传输格式o JSON和和XML都可用作数据传输的格式。与都可用作数据传输的格式。与 XML 一样，一样，JSON 也是基于纯文本的数据格也是基于纯文本的数据格式。并且它们都使用式。并且它们都使用Unicode编码，同样具编码，同样具有可读性。有可读性。o XML比较适合于标记文档比较适合

8、于标记文档，而，而JSON却更适却更适合于行数据交换处理合于行数据交换处理。o XML格式比较复杂，但是几乎所有数据类型格式比较复杂，但是几乎所有数据类型都可以使用都可以使用XML格式传输，而且许多应用程格式传输，而且许多应用程序都支持序都支持XML格式的导出和导入。格式的导出和导入。o 选择数据传输格式关键看要传送的数据类型。选择数据传输格式关键看要传送的数据类型。133.1 JSON的优势的优势o JS内置支持：使用内置支持：使用JS的的eval方法方法可以轻松可以轻松地将地将JSON转换成转换成JS对象和数组。对象和数组。o JSON是类型化的：是类型化的：JSON对象具有对象具有JS的

9、数的数据类型（字符串、数字、数组、对象等）。据类型（字符串、数字、数组、对象等）。o JSON可以解析为可以解析为JS：为了增加安全性，可：为了增加安全性，可以利用以利用解析器转换解析器转换JSON。o 结构简单：结构简单：XML有元素、属性、文本等多种有元素、属性、文本等多种对象结构。对象结构。JSON只有只有“名名-值值”对和数组。对和数组。o 占用空间少：简单的结构使得占用空间少：简单的结构使得JSON在庞大在庞大数据内容的传输时，占用较少的空间。数据内容的传输时，占用较少的空间。14四、四、JavaScript 处理处理 JSON 数据数据 接下来需要解决客户端如何使用接下来需要解决客

10、户端如何使用 JavaScript 处理处理 JSON 格式的数据。格式的数据。 person :name: Jack,address: city: 广州广州,street: 荔湾区荔湾区,postcode: 510380“n 假定服务器返回的假定服务器返回的 JSON 数据如下：数据如下：n注意，若文本内容中有中文字符，需要保存为注意，若文本内容中有中文字符，需要保存为Unicode格式格式154.1 使用使用eval方法方法eval方法：方法：eval方法以方法以JS的字符串作为的字符串作为参数，参数，可以将字符串内容转换为对象，或直接可以将字符串内容转换为对象，或直接看成命令运行看成命令

11、运行。将包含将包含JSON格式的字符串利用格式的字符串利用eval函数函数转换后，可以得到转换后，可以得到一组包含数据的一组包含数据的JS对象对象。注意，将注意，将JSON字符串转换为字符串转换为JS对象的时对象的时候，要在传递参数的时候加上候，要在传递参数的时候加上”(” 和和“)”16var jsonObj =eval(+ request.responseText+);for(i=0;ijsonObj.person.length;i+)var pname=jsonO;var city=jsonObj.personi.address.city;var stree

12、t=jsonObj.personi.address.street;17o 演示演示184.2 使用使用JSON解析器解析器o JSON解析器支持解析器支持将对象和数组转换成将对象和数组转换成JSON文本文本，或者，或者从从JSON文本创建对象和文本创建对象和数组数组。o JSON解析器是解析器是JSON组织提供的一个脚本组织提供的一个脚本。可以通过。可以通过/json.js下下载。载。o 使用前需要添加对脚本的引用使用前需要添加对脚本的引用194.2.1 对象到字符串对象到字符串o 引用脚本后，引用脚本后，toJSONString方法将被作为方法将被作为JS对象或数组的

13、一个成员方法之一。通过调对象或数组的一个成员方法之一。通过调用该方法直接将用该方法直接将对象或数组的内容转换成对象或数组的内容转换成JSON字符串字符串。20var member=new Object();=TOM;member.age=18;member.fav=new Array(math,english,chinese);var jstr=member.toJSONString();214.2.2 字符串到对象字符串到对象/数组数组o parseJSON方法可以替代方法可以替代eval将将JSON字符串转换成对象或数组字符串转换成对象或数组。22五、服务器端的五、服

14、务器端的JSON支持支持o JSON是属于客户端脚本是属于客户端脚本Javascript的一的一个子集。服务器端语言个子集。服务器端语言并没有直接支持将服并没有直接支持将服务器对象转换成务器对象转换成JSON格式的方法格式的方法。o 通过引入第三方的库或组件等方法，可以让通过引入第三方的库或组件等方法，可以让服务器端也顺利支持服务器端也顺利支持JSON格式数据的读格式数据的读/写（序列化写（序列化/反序列化）反序列化）o 在在网站上，列出了各种语网站上，列出了各种语言实现言实现JSON支持的方法。支持的方法。2324六、发送六、发送JSON数据数据 o JSON作为一种

15、传输格式，除了浏览器作为一种传输格式，除了浏览器能正常解析其内容外，客户端也可以将能正常解析其内容外，客户端也可以将发送的参数以发送的参数以JSON格式传递。格式传递。o 浏览器发送服务器请求的方式常见的有浏览器发送服务器请求的方式常见的有两种。两种。n Getn Post256.1 Get方式方式o 通过通过 GET 以名称以名称/值对发送值对发送 JSON将将 JSON 数据发给服务器的最简单方法数据发给服务器的最简单方法是将其转换成文本，然后以名称是将其转换成文本，然后以名称/值对的值值对的值的方式进行发送。请务必注意，的方式进行发送。请务必注意，JSON 格格式的数据是相当长的一个对象

16、，如下所示：式的数据是相当长的一个对象，如下所示：26var people = programmers: firstName: Brett, lastName:McLaughlin, email: brettnewI , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: , authors: firstName: Isaac, lastName: Asimov, genre: science fiction , firstName: Tad, lastName: Wi

17、lliams, genre: fantasy , firstName: Frank, lastName: Peretti, genre: christian fiction 27如果要以名称如果要以名称/值对将其发送到服务器端，应值对将其发送到服务器端，应该如下所示：该如下所示：var url = organizePeople.aspx?people= + people.toJSONString();xmlHttp.open(GET, url, true);xmlHttp.onreadystatechange = updatePage;xmlHttp.send(null); 28这看起来不错，

18、但却存在一个问题：在这看起来不错，但却存在一个问题：在 JSON 数据中会有空格和各种字符，数据中会有空格和各种字符，Web 浏览器往往浏览器往往要尝试对其继续编译。要确保这些字符不会在服要尝试对其继续编译。要确保这些字符不会在服务器上（或者在将数据发送给服务器的过程中）务器上（或者在将数据发送给服务器的过程中）引起混乱，需要在引起混乱，需要在 JavaScript escape() 函函数中做如下添加：数中做如下添加：var url = organizePeople.aspx?people= + escape(people.toJSONString(); xmlHttp.open(GET,

19、url, true);xmlHttp.onreadystatechange = updatePage;xmlHttp.send(null); 29o escape函数可以处理空格、斜线和其他任函数可以处理空格、斜线和其他任何可能影响浏览器的内容，并将它们转换成何可能影响浏览器的内容，并将它们转换成 Web 可用字符（比如，空格会被转换成可用字符（比如，空格会被转换成 %20，浏览器并不会将其视为空格处理，而，浏览器并不会将其视为空格处理，而是不做更改，将其直接传递到服务器）。之后是不做更改，将其直接传递到服务器）。之后，服务器会（通常自动）再把它们转换回它们，服务器会（通常自动）再把它们转换回它们传输后的本来传输后的本来 “面目面目”。30这种做法的缺点有两个：这种做法的缺点有两个：n在使用在使用 GET 请求发送大块数据时，对请求发送大块数据时，对 URL 字符字符串有长度限制。虽然这个限制很宽泛，但对象的串有长度限制。虽然这个限制很宽泛，但对象的 JSON 字符串表示的长度常常超出。字符串表示的长度常常超出。n在