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ღღღ