交互方式和JSON

一、交互方式

1. cookie

Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提，就是客户端浏览器允许使用Cookie并对此做出相应的设置。

客户端将数据存储在cookie中，cookie会放在请求头中随着HTTP请求发送给服务端，由服务端解析数据。同样服务端可以产生cookie，发送给客户端，客户端接收到cookie后保存在本地。

2. session

• session 是另一种记录服务器和客户端会话状态的机制
• session 是基于 cookie 实现的，session 存储在服务器端，sessionId 会被存储到客户端的cookie 中

session 认证流程：

1. 用户第一次请求服务器的时候，服务器根据用户提交的相关信息，创建对应的 Session
2. 请求返回时将此 Session 的唯一标识 SessionID 返回给浏览器
3. 浏览器接收到服务器返回的 SessionID 后，会将此信息存入到 Cookie 中，同时 Cookie 记录此 SessionID 属于哪个域名
4. 当用户第二次访问服务器的时候，请求会自动把此域名下的 Cookie 信息也发送给服务端，服务端会从 Cookie 中获取 SessionID，再根据 SessionID 查找对应的 Session 信息，如果没有找到说明用户没有登录或者登录失效，如果找到 Session 证明用户已经登录可执行后面操作。

 3. token

Token 是访问接口（API）时所需要的资源凭证。

简单 token 的组成：

uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token 的前几位以哈希算法压缩成的一定长度的十六进制字符串）

特点：

• 服务端无状态化、可扩展性好
• 支持移动端设备
• 安全
• token 完全由应用管理，所以它可以避开同源策略

1. access token

Access Token 的身份验证流程：

1. 客户端使用用户名跟密码请求登录
2. 服务端收到请求，去验证用户名与密码
3. 验证成功后，服务端会签发一个 token 并把这个 token 发送给客户端
4. 客户端收到 token 以后，会把它存储起来，比如放在 localStorage 里
5. 客户端每次发起请求的时候需要把 token 放到请求的 Header 里传给服务端
6. 服务端收到请求，然后去验证客户端请求里面带着的 token ，如果验证成功，就向客户端返回请求的数据

2. Refresh Token

refresh token 是专用于刷新 access token 的 token。

如果没有 refresh token，也可以刷新 access token，但每次刷新都要用户输入登录用户名与密码，会很麻烦。有了 refresh token，可以减少这个麻烦，客户端直接用 refresh token 去更新 access token，无需用户进行额外的操作。

 

Access Token 的有效期比较短，当 Acesss Token 由于过期而失效时，使用 Refresh Token 就可以获取到新的 Token，如果 Refresh Token 也失效了，用户就只能重新登录了。

4. 表单

form 是 HTML 中的一个表单标签，可以用于给服务器发送 GET 或者 POST 请求。

form 的重要参数：

• action：用来构造 HTTP 请求的 URL 是什么
• method：用来构造 HTTP 请求的方法（form 只支持 GET 或 POST 方法）

input 的重要参数在 form 标签中的含义：

• type：表示输入框的类型（text 表示文本、password 表示密码、submit 表示提交按钮）
• name：表示构造出的 HTTP 请求的 query string 的 key
• value：表示 input 标签的值（对于 type 为 submit 类型来说，value 就对应了按钮上显示的文本）
• input 标签的内容：表示 query string 的 value

当我们用 form 表单构造好了 HTTP 请求，点击 submit 提交按钮，就可以将请求发送出去

4.1 get请求

<form action="http://aaaaa/myPath" method="get">
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="submit" name="提交">
</form>

 

 4.2 发送 POST 请求

<form action="http://aaaaa/myPath" method="post">
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="submit" name="提交">
</form>

 

5. jsonp

 一种非官方跨域数据交互协议，利用具有src属性标签不受跨域限制的特性，通过动态创建script标签来从服务器端引入js代码，从而获得服务器传来的数据，只能是get方法。

6. websocket

 浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

7. ajax

 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步提交。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。

异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来

AJAX相当于是在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给 Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
 

二、JSON

2.1 什么是json

• JSON，全称是 JavaScript Object Notation，即 JavaScript对象标记法。
• JSON是一种轻量级（Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。
• JSON 的名称中虽然带有JavaScript，但这是指其语法规则是参考JavaScript对象的，而不是指只能用于JavaScript 语言。

2.2 json的语法规则

• 数组（Array）用方括号(“[]”)表示。
• 对象（0bject）用大括号(“{}”)表示。
• 名称/值对(name/value）组合成数组和对象。
• 名称(name）置于双引号中，值（value）有字符串、数值、布尔值、null、对象和数组。
• 并列的数据之间用逗号(“,”）分隔

{
    "id": 1,
    "name": "ran",
    "age": 18,
    "isLogin": true,
    "vip": null,
    "haslearn": [{
            "classname": "c语言",
            "teacher": "feng"
        },
        {
            "classname": "高数",
            "teacher": "sun"
        }
    ]
}

2.3 JSON的解析和生成（JSON 和 JS 对象互转）

1. 要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

    <script>
        var str = '{"name": "123","password":"000000"}';
        var obj = JSON.parse(str);
        console.log(obj);
    </script>

 

2. 要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法

   <script>
        var str = {"name": '123',"password":'000000'};
        var obj = JSON.stringify(str);
        console.log(obj);
    </script>