JSON数据

二、JSON数据

1、什么是json：javascirpt Object Notation，是一种轻量级的前后端数据交换格式（数据格式）

2、特点：

（1）容易阅读和编写

（2）语言无关系：和任何的开发没有关系

（3）便于编译、解析

3、语法要求

（1）是一个键值对，一个键对应一个值

（2）每个数据项之间用逗号分隔

（3）用{}保存对象

（4）用[]保存数组

4、常用方法

JSON.stringify（参数）：将参数里面的数据转换为json格式的字符串

5、使用场景

在前后端交互时，凡是需要将结构化的数据转化为文本时，都可以使用JSON。

三、node的http模块：使用node创建http服务器（重点）

1、web服务器：网站服务器，主要提供网上信息的浏览服务

2、web资源：

（1）静态资源：服务器没有修改的，客户端每次请求的结果都是一样的资源。

（2）动态资源：经过服务器处理的资源信息。

3、http协议：（HyperText Transfer Protocol）超文本传输协议。规范了客户端和服务器之间进行交互的数据格式。是基于请求与响应的协议

（1）请求（request）：客户端（浏览器）向服务器发送信息（发送请求信息）---  http请求

（2）响应（response）服务器接收到客户端的请求后所做出的的响应  ---  http响应

（3）协议内容：

基本信息：请求地址（url）、请求方式（get、post）、请求-响应是否完成、路由地址（ip地址）

响应头信息：http协议版本号、200是一个状态码（表示请求响应已经完成）、响应文本的格式

请求头信息：User - Agent（客户端浏览器的内核）、Hose（请求服务器的地址和端口号）、Accept发送请求的文本格式

（4）状态码：不同状态的状态码反映了请求-响应过程的完成情况

200：请求-响应的过程已经成功完成。

204：请求-响应的过程已经完成，但是没有响应数据

以3开头的状态码：表示页面重定向了，也就是说服务器端页面已经发生跳转，此时的页面已经不再是我们想要的页面

404：客户端请求的资源不存在

403：服务器拒绝请求

400：请求的语法错误

500：服务器错误，无法响应请求

503：服务器无法使用

（5）响应信息的格式：‘大类型/具体类型’的定义方式

text/plain：普通文本格式

text/html：html文本

text/css：css文件

application/javascript：js文件

login.html文件：

server.js文件

四、ajax：（难点）

1、同源和跨域

（1）、同源（Origin）：协议、域名、端口号相同就是同源

例如：http://www.a.com:8080/test/index.html地址的同源

   http://www.a.com/dir/path.html  --- 成功，协议是http、域名是www.a.com、端口号是8080

http://www.child.a.com/dir/page.html  --- 失败，非同源，域名不同

https://www.a.com/dir/page.html   --- 失败，非同源，协议不同

http://www.a.com:8089/test/index.html  ---  失败，端口号不同

（2）、引入同源策略的原因：

是浏览器的一种安全机制，即客户端的脚本（javascript程序）在没有明确授权的情况下是不能访问对方的资源。

不受同源策略限制的操作：

页面中的链接（超链接）、页面的重定向、表单提交

（3）、跨域：只要协议、域名、端口号有一个不同就属于跨域。

产生跨域的原因：

因为javascript的同源策略（js只能访问和操作自己域下的资源，不能访问和操作其他域下的资源）。

跨域的解决方案：

a、cros：服务器设置http响应头中Access-Content-Allow-Origin值，解除跨域限制。限制是若在服务器端不做配置就无法跨域，严重依赖服务器端。

b、jsonp：利用script标签具有跨域的特征，在本地的回调函数中实现跨域。

c、反向代理（Reverse Proxy）：在客户端独立的解决跨域问题。

//设置允许来自哪里的跨域访问:'*'表示所有的跨域

    res.setHeader("Access-Control-Allow-Origin", "*");

    //设置允许跨域访问的方式：服务器接收哪些方式的跨域访问

    res.setHeader("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS")

     //设置请求头中允许携带的参数

    res.setHeader("Access-Control-Allow-Headers", "Content-Type,request-origin");

2、什么是ajax：Asynchronous JavaScript And XML ，异步的javascript的XML支持

（1）xml：是一种前后端交互时使用的文件格式。用户可以自定义标签

（2）异步：客户端向服务器发起请求后不会等待服务器的响应（处理结果），继续执行自己的流程；当服务的响应信息到了后，调用客户端的回调函数，对响应信息进行处理即可。

（3）异步优点：

a、减轻服务器的负担

b、节省带宽（防止带宽被大量占用，等待时间变长）

c、用户体验感好

（4）Ajax技术：不是新技术，只是对html、javascript、xml这些技术的整合。整合后可以实现页面的局部刷新

3、Ajax实现过程

（1）创建ajax的和新对象：XMLHttpRequest，使用该对象向服务器发起请求，是一个一步的请求，实现页面的局部刷新

W3C标准的浏览器创建XMLHttpRequest对象的方法：

let xhr = new XMLHttpRequest( )

非W3C标准的浏览器创建时：

let xhr = new ActiveObject( )

（2）XMLHttpRequest对象的属性：

a、onreadystatechange：本质是一个事件，当请求响应的状态发生改变时触发。

b、readyState：请求响应的状态值。

c、responseText：服务器给客户端响应的字符串

d、status：服务器响应的http状态码（200 表示请求响应已经成功）

（3）XMLHttpRequest对象的方法：

a、open（'method'、'url'）：建立和服务器之间的连接。

参数一：表示发起请求的方法（get、post）

参数二：表示服务器的地址

b、send（content）：发送请求，参数通常为null。

示例：通过XMLHttpRequest对象向服务器发起异步请求

html页面：

服务器端：

练习：通过ajax实现对用户名的验证。若用户名不是abc可用，不是就可以用。验证过程在服务器端完成。

html：

服务器：

五、jQuery中对ajax的封装

1、$.ajax(url,[setting])

html:

服务器：