4.6 http协议学习

1.http协议：超文本传输协议

=>基于请求响应模式的，无状态的，无链接的应用层协议，一般应用于web程序中

=>制定客户端（前端）与服务器（后端）通讯的规则

• 请求响应模式  

        客户端(发起请求)===> 服务端 服务端（响应数据）====>客户端

• 无状态 

        http协议不会保存相应的状态数据，需要的话手写代码进行保存

•  无链接

每次请求响应完成，链接自动断开

url=====>统一资源定位符：定位网络中资源

格式：http://ip:port/path/res

http协议工作原理：

1. 建立连接，客户端与服务端建立连接     xhr.open()
2. 发送请求，客户端向服务端发起一个请求    xhr.send()
3. 响应数据，服务端在接收到客户端请求后，响应相应的数据给客户端
4. 连接断开 

1.客户端与服务端建立连接

三次握手协议

2.发送请求

请求是一串有格式的文本信息===>请求包：请求行 、请求头、请求正文

        请求行：包含请求方法（method:get  post  put delete)，请求地址，协议版本

        请求头部：格式==>名称：值

                ip:对应的ip         content-type:text/html    //数据类型

        请求正文： 例如：username='admin'&password='123'

get请求，username='admin'&password='123'跟在url地址后面

post请求，username='admin'&password='123'放在请求正文中

3.响应数据：有格式的文本信息==>响应包：状态行、响应头部、响应正文

        状态行：协议，状态码， 状态码描述

        状态码： 200（OK）        4XX（客户端出错）  404（请求url地址出错）

                        5XX(服务端出错)       500（服务端程序出错）

        （响应头部、响应正文类似请求头部和请求正文）

4.断开连接   =====>四次挥手

ajax异步网络通讯

==>允许浏览器与服务器通信而无需刷新当前页面的技术，不需要刷新整个页面，只刷新局部页面

ajax核心对象    XMLHttpRequest

        方法  open(method,url,false|true)        建立连接

                 send()    发送请求

get请求时，直接send()即可

post请求时，参数放在send方法中作为参数发送

         

 <button>确定</button>
    <script>
        var btn=document.querySelector('button')
        btn.onclick=function(){
            let xhr=new window.XMLHttpRequest();
            xhr.open('get','http://10.7.178.117:3000/productlist')
            xhr.send();
            xhr.onreadystatechange=function(){
                //就绪码
                if(xhr.readyState==4){
                    //状态码
                    if(xhr.status==200){                      
                        let data=xhr.responseText;
                        console.log(JSON.parse(data));
                    }
                }
            }
        }
    </script>