AJAX day_04(6.8)JSON

一、 AJAX的响应消息类型

1. 简单的文本字符串

比如写一个最简单的"验证用户名是否存在"接口的返回值就是exists或non-exists

响应消息是这样的： HTTP/1.1 200 OK content-type:text/plain;charset=utf-8 空行 non-exists

我们的处理方式：

if(result == 'exists'){unameMsg.innerHTML = '该用户名已被占用'

}else{unameMsg.innerHTML = '该用户名可以使用'}

2. 响应消息是一段HTML片段

响应消息是这样的： HTTP/1.1 200 OK content-type:text/html;charset=utf-8 空行 `<td>1</td><td>MacBook</td><td>8999</td>`

我们的处理方案：

tr.innerHTML= xhr.responseText

这种写法比较少用，因为对格式要求限制较多，td必须放在tr中，很不方便

我们学子商城也没有使用过这种写法，服务器端就应该单纯的响应结果数据，不应该控制样式

3. 响应消息是一段XML

一种用于描述批量数据的语言(可扩展标记语言)

XML从语法上来说是标记语言，但注意XML的标签是随意起的，与HTML不同

响应消息是这样的： HTTP/1.1 200 OK content-type:application/xml;charset=utf-8 空行 `<list>       <product lid="105">            <title>Dell小新</title>            <price>5499</price>       </product>       <product lid="106">            <title>MacBook </title>            <price>8499</price>       </product> </list>`

我们的处理方案：

客户端拿到XML格式的响应数据后，还需要使用解释器程序将其转为JS对象

4. 响应消息是一段JSON

JSON也可以用来描述批量数据，但是语法比XML简单的多

响应消息是这样的： HTTP/1.1 200 OK content-type:application/json;charset=utf-8 空行 `[    {        "lid":105,        "title":"Dell小新",        "price":5499    },    {        "lid":106,        "title":"MacBook",        "price":8499    } ]`

我们的处理方案：

JSON格式的数据特别好处理，且使用广泛！

二、学习JSON

JSON(Java Script Object Notation) JS对象表示法，是一种语言，这种语言借鉴了JS语法的一部分，用来描述数据，把数据转换成为字符串格式，在不同的系统中可以任意交换

目前，所有主流的编程语言都支持JSON，把JSON数据转为自己的内部数据

1.JSON的语法规则

（1）一段JSON本质上是一段字符串 （2）一段JSON字符串只能有一个根——这个根要么是对象"{ }"，要么是数组"[ ]" （2）一个JSON对象中可以有多个键值对，格式："键名":"键值"，注意：键名必须用引号！ （4）JSON键值可以是如下类型："字符串"、数字、true/false、对象、数组、null （5）JSON中的键名与字符串键值必须加引号并且是双引号 （6）JSON中两个数据之间使用‘逗号’分割，但注意最后一个数据不可以加逗号 （7）JSON中没有注释这么一说

        JSON的对象类型没有JS那么多，比如Date/数字类/自定义类型等等全部不能使用

2.下列的数据哪个是正确的JSON片段

1 {  } 正确 2 [  ] 正确 3 {  },{  } 错误，不能有2个根 4 [  ],[  ]错误，不能有2个根 5 [1,20,true,] 错误，最后一个元素后不能有逗号 6 {age:20} 错误，属性名必须使用双引号包裹 7 {"age":20,"birthday":"2000-02-19"} 正确 8 {"birthday":new Date()} 错误，JSON中没有Date日期类 9 {"name":"WEBTN2204","members":["当当","豆豆"]} 正确 10 [{"age":18},{"age":20},{"age":23}] 正确 11 [{"age":18},/*{"age":20},*/{"age":23}] 错误，JSON中没有注释

 

JSON的序列化：Object->JSON

提示：我们Node.js服务器中的res.send()自带序列化功能,所以我们不用写

JSON的反序列化：JSON->Object

JSON.parse(JSON字符串) 返回的是一个JS对象

示例：