数据交互的四种方式/表单实现/AJAX 原理与原生GET方式请求的实现/跨域

数据交互

1. 表单---最简单、最基本的、HTTP所有的数据请求都是表单
2. ajax---最常用的、不用刷新页面；默认不可跨域提交,可以使用CORS进行跨域
3. JSONP---常用来跨域,因为安全性太差基本被淘汰
4. WebSocket---性能比ajax高、速度快、双向、可跨域
    ajax是单向的:浏览器向服务器发送请求、默认不可以跨域
    WebSocket是双向的:浏览器与服务器之间可以相互发送请求、默认可以跨域

表单

    //当用户网络环境比较差时，表单提交的成功率比AJAX要好
    

        //提交的数据，根据name
        //提交
    

document.querySelectorAll 与 document.querySelector

    //语法：elementList = document.querySelectorAll(selectors); 
        1. elementList 是一个静态的 NodeList 类型的对象.
        2. selectors 是一个由逗号连接的包含一个或多个CSS选择器的字符串.
    //下面的例子返回了HTML文档中的body元素的所有p后代元素:
        var matches = document.body.querySelectorAll('p');
    //下面的例子返回了id为'test'的元素的所有class属性为'highlighted'的所有div后代元素的p子元素:
        var el = document.querySelector('#test');
        var matches = el.querySelectorAll('div.highlighted > p');
    //手动写$用法的两种方式
        const $ = function(...args){
            return document.querySelectorAll(...args)
        }
    //第二种需要将this绑定在document上；
        const $ = document.querySelectorAll.bind(document);

AJAX 原理与原生GET方式请求的实现

    //AJAX 请求与表单的请求是一样的效果。
    //AJAX 常用写法 
        $.ajax({
            url:'1.php',//1.php内容
            data:{a:12,b:5},
            type:'get',
            dataType:'text',
            success(str){
                alert(str)
            },
            error(){
                alert("失败")
            },
            finish(){
                //无论成功失败只要AJAX完成就走这个方法。
            }
        }); 
    //AJAX实现
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();//不兼容IE6 此时状态码为0：初始化
        }else{
            var xhr = new ActiveXObject('Microsoft.XMLHttp');//兼容IE6
        }
    //开启连接
        xhr.open('get','1.php?a=4&b=6',true);//连接方法、URL、true开启异步,false关闭异步，此时状态码为1：已连接
    //发送数据
        xhr.send();//post请求的情况下，此处参数为请求体里的内容。本demo中用的get请求，数据应当在URL中，所以此处没参数。
    //接受
        xhr.onreadystatechange = function (){
            var state = xhr.readyState);//xhr.readyState 0:初始化；1:已连接；2:已发送；3:已接收-头信息；4:已接收-体信息
            if(xhr.readyState==4){
                alert(xhr.status)//HTTP状态码；1xx:消息；2xx:成功;3xx:重定向;4xx:客户端错误;5xx:服务器错误;6+:扩展状态;
                if(xhr.status>=200&&xhr.status<300||shr.status==304){
                    alert("成功"+xhr.responseText);//返回的文本；JSON需要自己去解析，responseXML,返回的XML数据；
                }else{
                    alert("失败")
                }
            }
        }

扩展

跨域

只要域名、端口、协议(http与https),有一个不同就会产生跨域。
常用的跨域解决方案：表单、AJAX、jsonp、WebSocket

http前世今生

http0.9
    HTTP 0.9是第一个版本的HTTP协议，确定了HTTP是无状态通信，已过时。
    它的组成极其简单，只允许客户端发送GET这一种请求，且不支持请求头。
    由于没有协议头，造成了HTTP 0.9协议只支持一种内容，即纯文本。
    不过网页仍然支持用HTML语言格式化，同时无法插入图片。
http1.0
    新增如下功能：
    请求与响应支持头域
    响应对象以一个响应状态行开始
    响应对象不只限于超文本
    开始支持客户端通过POST方法向Web服务器提交数据，支持GET、HEAD、POST方法
    支持长连接（但默认还是使用短连接），缓存机制，以及身份认证
http1.1
    是目前使用最广泛的协议版本。HTTP 1.1 所有的连接默认都是长连接。
    允许HTTP设备在事务处理结束之后将TCP连接保持在打开的状态，
    以便未来的HTTP请求重用现在的连接，直到客户端或服务器端决定将其关闭为止。
    在GET、POST请求之外新增加了OPTIONS,PUT, DELETE, TRACE, CONNECT方法。
http2.0    
    下一代版本，主要功能有
    强制HTTPS、自带双相通信、多路复用
http协议
    基本的互联网通信协议都有在RFC文件内详细说明，所以任何一个协议都是RFC
    http是RFC 2016  
    原文地址：https://datatracker.ietf.org/doc/rfc2616/?include_text=1
    https是RFC 2818

GET与POST

get请求发送在请求头中，有大小限制，有缓存，当链接会被分享、收藏时,用get请求（例如淘宝购物页面）
post请求发送在请求体中，无大小限制，没有缓存

TCP协议与UDP协议

TCP协议--传输控制协议
    该协议保证数据传输到达，保证质量，保证顺序。
    应用场景:对质量要求高，对实时性要求不高的需求（HTTP协议通常基于TCP协议）
UDP协议--用户数据报协议
    该协议不保证数据传输到达，不保证质量，不保证顺序。
    应用场景：对质量要求不高，对是实时性要求高的需求，（IP电话、视频直播）

OSI七层交换"参考"模型

实际为五层模型,表现层与会话层不实际存在

1. 物理层 建立、维护、断开物理连接。
2. 链路层 建立逻辑连接、进行硬件地址寻址、差错校验等功能。例如ARP、ICMP协议
3. 网络层 进行逻辑地址寻址，实现不同网络之间的路径选择。 例如IP协议
4. 传输层 负责通信稳定性，定义传输数据的协议端口号，以及流控和差错校验。 例如TCP协议
5. 表现层 （×五层模型中合并到应用层）数据的表示、安全、压缩。
6. 会话层 （×五层模型中合并到应用层）建立、管理、终止会话。
7. 应用层 处理应用细节，网络服务与最终用户的一个接口。 例如 HTTP协议

HTTP状态码

1xx:消息；
2xx:成功;
3xx:重定向;
    301 永久重定向（浏览器永远不会再次请求老地址）；
    302 临时重定向（浏览器下次还会重新请求老地址-常用）；
    304 缓存:
        浏览器向服务器发送请求,并发送浏览器缓存的文件版本，
        服务器判断有没有更新，若没有就返回304； 
4xx:客户端错误;
5xx:服务器错误;
6xx+：扩展状态;