数据交互

1、表单(最简单、基本)

(1)、属性

    (a)、action：提交到哪里
    (b)、method：提交方式，如：GET；POST；PUT；HEADER；DELETE；自定义
    (c)、name：必须加，可以重复
    (d)、submit按钮：提交

<form action="localhost/1.php" method="post">
    用户名：<input type="text" name="user"><br>
    密码：<input type="password" name="pwd"><br>
    <input type="submit" value="提交">
</form>

(2)、方式

GET和POST安全性差不多，https才安全
GET和POST的区别：
    GET:容量小(32KB级别)、地址栏传输看得见、有缓存；利于分享、收藏
    PSOT:容量大(1GB级别)、http-body里传输看不见、无缓存；不利于分享、收藏

(3)、校验

<form action="localhost/1.php" method="post">
    用户名：<input type="text" name="user"><br>
    密码：<input type="password" name="pwd"><br>
    <input type="submit" value="提交">
</form>
<script>
    const $ = document.querySelectorAll.bind(document);
    let form = $("form")[0];
    let user = document.getElementsByName("user")[0];
    form.onsubmit = function(){
        if(user.value == ""){
            alert("用户名不能为空");
            return;
        }
    }
</script>

2、ajax(不用刷新)

客户端(浏览器)

//简单的原生xhr请求的写法
<script>
    const $ = document.querySelectorAll.bind(document);
    $("#btn1")[0].onclick = function () {
        //创建一个xhr的对象，以便发送请求
        let xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject(Microsoft.XMLHTTP);
        }
        // 连接,第三个参数表示是否异步
        xhr.open("get", "1.php", true);
        // 发送
        xhr.send();
        xhr.onreadystatechange = function () {
            switch (xhr.readyState) {
                case 0:
                    console.log("初始化中，建立连接");
                    break;
                case 1:
                    console.log("已连接");
                    break;
                case 2:
                    console.log("已发送");
                    break;
                case 3:
                    console.log("已接收--头");
                    break;
                case 4:
                    console.log("已接收--body");
                    break;
                default: 
                    console.log("哈哈哈");
                    break;
            }
        }
    }
</script>

xhr对象的readyState和status(状态码)的解释

状态码301：永久重定向---浏览器不会再次请求旧的地址
状态码302：临时重定向---浏览器下次还会请求旧的地址
状态码304：缓存---请求的文件未被修改
状态码404：未找到文件
content-type常用的三种方式

服务端

3、jsonp(跨域、简单、有风险)

jsonp是利用script标签可以进行跨域访问数据的方式，动态的添加script标签利用回调函数完成代码执行的过程，解决跨域访问数据的问题，将来jsonp会用的越来越少，了解下即可。

<input type="text" name="搜索" id="search">
<ul id="content"></ul>
<script>
    function show(json) {
        let ct = $("#content")[0];
        ct.innerHTML = "";
        json.s.forEach(str => {
            let li = document.createElement("li");
            li.innerText = str;
            ct.appendChild(li);
        })
    }
</script>
<script>
    const $ = document.querySelectorAll.bind(document);
    $("#search")[0].oninput = function () {
        let os = document.createElement("script");
        document.body.appendChild(os);
        os.src =`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${encodeURIComponent(this.value)}&cb=show`;
    }
</script>

4、websocket

ajax和websocket的比较

5、http协议

http 容易被攻击
https security 安全

1. http1.0 一次性连接
2. http1.1 保持连接
3. http2.0
   (1)、强制https
   (2)、自带双向通信
   (3)、多路复用

6、TCP/IP五层模型