前端数据交互

数据交互：

1.http协议

2.form

3.ajax--不能跨域，官方单向

4.jsonp--跨域不推荐（不支持post）

5.websocket--双向

-----------------------------------------------------------

http协议---协议

1.无状态-----客户端访问服务器之后，服务器不能记住客户端

2.连接过程----客户端发送请求到服务器，服务器返回数据

3.x消息包含：发送包含发送header（<=32k 以行做单位），body（<=2G）

返回包含header（<=32k），body（<=2G）

----------------------------------------------------------

http缓存

1.加随机数或者时间戳

2.在请求头里设置Canche-Control： Date

-------------------------------------------------------------

http和https

https证书（自验证证书和机构证书）

--------------------------------------------------------------

http 1.0 短链接

http 1.1 主流长连接----keep alive html css js img

http 2.0 （试图加入状态）websocket

--------------------------------------------------------------

form

1.action---提交到哪儿

2.method----GET/POST/PUT/DELETE/HEAD/[自定义(需要服务器配置)]

GET 数据放到URL里面传输数据量小。缓存

POST 放到body里数据量大，不会缓存

GET——向服务器获取信息

　　　　POST，PUT——向服务器发送数据

　　　　DELETE——删除数据

　　　　HEAD——让服务器只发送头信息回来（不需要内容）

3.name=”数据字段名字“

　4. enctype="[application/x-www-form-urlencoded（默认的）] [multipart/form-data(上传文件)] [text/plain（纯文本）]" 文件上传时规定一种数据传输类型

　　　　　　application/x-www-form-urlencoded （name=‘aa'&age=20）（小数据）

　　　　　　multipart/form-data(上传文件，大数据量)

----------------------------------------------------------------------------------------

ajax原理——XMLHttpRequest

　　XMLHttpRequest——不兼容IE6

　　　　onreadystatechange（当通信发生完成）——五种状态 0初始状态（xhr对象刚创建完成）1连接（连接到服务器）2发送请求（刚刚send完成）3接收完成（指head头详细接收完成）4接收完成（指body体接收完成）

　　　　status——http状态码

　　　　　　　　　　1xx 消息

　　　　　　　　　　2xx 成功

　　　　　　　　　　3xx 重定向

　　　　　　　　　　　　301——永久重定向

　　　　　　　　　　　　302 ——临时重定向

　　　　　　　　　　　　304——缓存

　　　　　　　　　　4xx 客户端请求错误

　　　　　　　　　　5XX 服务器错误

　　　　　　　　　　6XX 自定义

接收响应数据：

　　xhr.responseText

　　xhr.response

<script>
    window.onload = function(argument) {
        let btn = document.querySelector("#btn");

        btn.onclick = function() {
            let xhr = new XMLHttpRequest();
            // alert(xhr.readyState)//0
            xhr.open('GET', './1.txt', true);
            // alert(xhr.readyState)//1
            xhr.send();
            // alert(xhr.readyState)//2
            xhr.onreadystatechange = function() {
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<=300||xhr.status===304){
                        console.log(xhr.response)
                    }else{
                        console.log(xhr.status)
                    }
                }
            }
        }
    }
    </script>
    <input type="button" id="btn" value="send">

-----------------------------------------------

eval——不安全

JSON.stringify()----------转化为字符串

JSON.parse()-------转化为json对象

jsonp