Ajax基础-3以及JSON基础

hello，everyone，还记得我们昨天的内容吗？我们一起来复习一下，请看【我 i 前台】专题中的 → Ajax基础-2，O(∩_∩)O哈哈~? 今天来学习如何使用Ajax 的第六步，你总还记得吧？假如有的小伙伴在之前没有学习 Ajax基础-1，Ajax基础-2的话，今天的内容最好先搁置一下，去看前边的，由于这几篇是有先后顺序的，嘿嘿~?

我们第五步中获取了返回的数据，即console.log(xhr.responseText);

那获取到的数据是什么呢？我给大家放一个获取到数据的截图：

获取到的数据内容

这种数据格式是JSON。那么，

Ⅰ、什么是JSON呢？

JSON(javascript object notation) 全称是javascript对象表示法，它是一种数据交换的文本格式，用于读取结构化数据，目的是取代繁琐的XML格式，所以它不是一种编程语言。

Ⅱ、JSON的语法规则

JSON的语法可以表示以下三种类型的值：

⑴ 简单值：简单值使用的语法与JS相同，可以在JSON中表示字符串、数值、布尔值和null。其中字符串必需使用双引号表示，不能使用单引号；数值必需以十进制表示；并且不能使用NaN和 Infinity；注意一点，JSON不支持JS中的undefined。

⑵? 对象：对象作为一种复杂数据类型，表示的是一组有序的键值对，而键值对中的值可以是简单值，也可以是复杂数据类型的值。JSON中对象的键名必需放在双引号中，由于JSON没有末尾的分号；注意，同一个对象中不应该出现两个同名属性。

⑶? 数组 ： 数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数组来访问其中的值。注意，数组或者对象最后一个成员的后面不能加逗号。

那么知道了上面的知识，比方上面截图，获取的数据中显示：整体来说我们获取的是一个对象，code键对应的就是简单值number，slider键对应的是一个数组，数组中放着几个对象，这样通过Ajax请求把服务端给我们的数据都获取到了，获取到以后就拿这个数据进行渲染，那么就回到今天的正题了，Ajax请求的最后一步。由于JSON数据中code和slider 是string类型的，所以需要转换类型，需要用到JSON对象中的两个方法

①JSON.parse()? ?用于将JSON字符串转化成对象

②JSON.stringify()? ? 用于将一个值转为字符串，该字符串应符合JSON格式，并且可以被JSON.parse()方法复原

代码如下：

渲染数据

小结：通过Ajax向服务端请求了一个JSON文件，获取到少量数据，这些数据是图片轮播的形式，里面有图片的地址和链接地址，而后通过Ajax实现了将数据渲染到Dom当中。

Ajax基础步骤总结：

第一步创立XMLHttpRequest对象；

第二步创立了请求，用的是open的方法；

第三步设置状态请求变化的函数，是onreadystatechange的事件触发的函数，状态为4的时候响应完成，表示可以在用户端调用；而后判断调用成功时，我们怎样获取数据；

第四步用send发生请求，发送的时候假如用post请求时，传递的参数要写在send中，同时设置头部信息；

第五步用responseText获取信息，它返回的结果是字符串，我们需要用JSON对象中提供的JSON.parse()转换成JSON对象；

最后一步实现了局部升级，将数据渲染到DOM中。

同时今天也详情了新的数据格式JSON，它不是一种编程语言，而是一种数据转换格式，另外它的三种基本类型和方法。以上是原生的Ajax讲解。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????OVER???