7-2 前后分离（加载JSON、加载分页）

• 什么是JSON？
  JavaScript Object Notation（标记）
  JS对象标记语言
• HTML
  超文本标记语言

JSON

• JSON是一门语言
  跟HTML、CSS、XML、JS一样，是一门独立的语言
• JSON不是编程语言，是标记语言（标记语言一般是用来给数据加上一些展示性的标记或者是逻辑上的标记的）
  跟HTML、XML、Markdown一样，用来展示数据
  里面没有if else这些
  只是：a标签——表示链接，h1标签——表示标题

1.学习JSON

1.1铁轨图

• JSON中文官网
  1.一页纸就说明了JSON的所有语法
  2.会看铁轨图就会用JSON
  3.空格可以不写，但少了引号就是错
  4.和JS非常相似，因为就是抄袭的JS，取JS的精华发明了一个专门表示数据的标记语言
  

1.2 JSON 支持的类型

• string：只支持双引号，不支持单引号和无引号
• number：普通数字和科学计数法
• bool：true 和 false
• null：没有undefined
• object：对象，没有函数
• array：数组，JSON的array是一个类型
• 就只有这个六种，注意跟JS的其中数据类型区别开
• 不支持函数，不支持变量（所以也不支持引用），if else也不支持
• JSON表示六种数据类型

2.加载JSON

2.1 步骤

• 加载 5.json
• 请求到之后，得到JSON的字符串，如何解析成为JS的对象

{
  "name":"frank",
  "age":18,
  "xxx":null
}

• 解析代码：使用一个全新东西，声明一个对象等于JSON.parse(request.response)
JSON.parse可以把符合JSON语法的字符串变成对应的对象或者是其他东西
• 得到这个数据想干啥干啥

console.log(request.response);//字符串
const object = JSON.parse(request.response);
console.log(object);//对象

2.2 应用

• 想将标题变成 ： Hello + 用户名
  平时进入网页后，会有欢迎XXX(用户昵称)
  这类技术:1.HTML里写好，2.AJAX请求之后添加上去
• 在HTML中将h1标签改为
  <h1>AJAX Hello <span id="myName"></span></h1>
• 在main.js中修改添加
  myName.textContent = object.name;
  

3.window.JSON

• 全局变量，是一个对象

3.1 JSON.parse

• 将符合JSON语法的字符串转换成JS对应类型的数据
• JSON字符串 => JS数据
  1.string =>布尔true
  2.string => 对象
• 由于JSON只有六种语法，所以转成的数据也只有6种
• 如果不符合JSON语法，则直接抛出一个error对象
• 一般用 try catch 捕获错误
  1.将要运行的变量放到 try 里面
  2.捕获：就是把这个错误抓住，不让别人看见，自己偷偷将它解决掉，写出正确的保底代码
  3.这是JSON常用的语法，因为不能保证string是否能够转换

let object
try{
  object = JSON.parse(`{"name":frank}`)
}catch(error){
  console.log('出错了，错误详情是：')
  console.log(error)
  object = {"name":'no name'}//出错了给object一个保底值
}
console.log(object) //无论正确与否都能运行

3.2 JSON.stringify

• JSON.parse的逆运算，将JS的数据变成符合JSON语法的字符串
• JS数据 => JSON字符串
  JS对象=>string
• 由于JS的数据类型比JSON多，所以不一定能成功
• 如果失败，就抛出一个error对象
  

综合应用：加载分页

• 一个AJAX的典型应用：加载分页
• 创建一个 db 目录（表示数据库），创建3个文件 page1.json、 page2.json、 page3.json
  1.里面的内容为：{ "id":1,...,"id":10 }
  2.三个文件分别为：1-10，11-20，21-30

1.加载page1

• page1直接采用静态渲染
• 所谓的后端技术：在HTML里做个标记，然后把数据拿到后填写到这个标记里
• 在HTML中做标记（page1的内容出现的地方）

    <div>
        {{page1}}
    </div>

• 在渲染第一页的时候就把{{page1}}替换成page1的内容
• 将server.js中index.html的部分修改

let string = fs.readFileSync("public/index.html").toString();
const page1 = fs.readFileSync("db/page1.json").toString(); //获取page1的内容，转化为字符串
string = string.replace("{{page1}}", page1); //替换内容
response.write(string);
response.end();

• 这样就把page1中的内容直接展示到了页面中，这就是前后端不分离的渲染技术

2.加载page2

• 和之前的加载方式一样，添加一个button监听到下一页
• 使用AJAX请求，四个步骤
• 注意：此处的open中url直接写/page2

2.1 如何渲染

• 首先将response得到的string变成一个JS数组
  json.parse
• 对数组中的每一项都插到li的里面
• 然后将li放到ul中

//main.js
const array = JSON.parse(request.response);
array.forEach((item) => {
const li = document.createElement("li");
li.textContent = item.id;
xxx.appendChild(li); //xxx是ul的id

3.加载page3

• 这里不需要添加按钮，希望能第二次点击下一页时出现page3的内容
• 加一个数字，记录一下当前页面
• 请求open的URL中的页面不要写死，写成/page${n+1}，双引号改成反引号。（注意：前面的n要用let声明，因为会变）
• 结束之后要记得 n+=1，因为前面页面+1是局部变量