HTTP协议 ｜ 青训营

用户930356816767
74 阅读4分钟

HTTP协议

HTTP（Hyper Text Transfer Protocol）超文本传输协议，是一种用于在Web浏览器和服务器之间交换数据的应用层协议。基于TCP/IP通信协议进行传送数据，并采用请求-响应模型来进行通信，指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。

HTTP协议特点

  • 支持服务器、客户端模式：使用浏览器作为客户端来访问服务端。
  • 灵活：可以传输任意类型的数据对象。
  • 简单方便：客户向服务器请求服务时，只需传送请求方法和路径即可。
  • 无状态：可以使用Cookie和Session两种技术来保持HTTP连接状态。
  • 无连接：限制每次连接只处理一个请求，即请求一次，释放一次，节省传输时间。

HTTP协议基本组成

请求报文

HTTP请求报文包括四部分，分别是请求行：请求类型(GET、POST等) / url路径 / http协议版本(HTTP/1.1)；请求头：Host:baidu.com 、Cookie:name=guigu、 Content-type:application/x-www-form-urlencoded 、ser-Agent:chrome 83；空行；请求体：如果是GET请求，此为空；如果是POST请求，请求体可以不为空 username=admin&password=admin等。

响应报文

HTTP响应报文也包括四部分，分别是请求行：http协议版本(HTTP/1.1) 响应状态码(200) 响应状态字符串(OK)，另外不同的响应状态码代表不同的状态，比如：404 找不到、403 被禁止、401 未授权、500 内部服务器错误；响应头：Content-Type:text/html;charset=utf-8、Content-clength:2048、Content-encoding:gzip；空行；响应体。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const result=document.getElementById("result");
        const btn=document.getElementsByTagName('button')[0];
        btn.onclick=function(){
            const xhr=new XMLHttpRequest();
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
            xhr.send();
            xhr.onreadystatechange=function(){
                //判断
                if(xhr.readyState===4){//服务端返回了所有的结果
                    //判断响应状态码 200 404 403...
                    if(xhr.status>=200&&xhr.status<300){//2xx都是成功
                        //处理结果 行 头 空行 体
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体

                        //设置result的文本
                        result.innerHTML=xhr.response;
                    }
                }
            }
        }
    </script>
</body>
</html>

在如上例子中，要想实现点击按钮，发送AJAX GET请求，首先需要创建对象，然后进行初始化，设置请求方法和url，然后发送请求，再进行事件绑定，处理服务器端返回的结果。并且打印出了状态码、状态字符串、所有响应头以及响应体。

其中，url可以帮助我们唯一定位互联网上的某一个资源，相当于是互联网资源的身份证号。包括传送协议、服务器（通常为域名或者IP地址）、端口号（以数字方式表示，若为HTTP的默认值“:80” HTTPS的默认值“:443”可省略）、请求资源路径、传递数据。（在URL中传递数据是以key=value的结构进行数据绑定，以“?”字符为起点，每个参数以“&”隔开，再以“=”分开参数名称与数据，通常以UTF8的URL编码，避开字符冲突的问题）。

image.png

const express=require('express');
const app=express();

app.get('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');

    response.send('Hello AJAX');
});

app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中");
})

在相应的server.js代码中，首先需要引入express，然后创建应用对象，创建路由规则，其中request 是对请求报文的封装；response是对响应报文的封装，设置响应头，设置允许跨域，设置响应体，最后监听端口启动服务。

image.png

从这个小案例中可以看出，浏览器与服务器之间通过应答模式进行通信，浏览器的缓存策略大致如下：浏览器向服务器发送请求，请求资源；服务器返回资源并通过响应头决定缓存策略;浏览器根据响应头的策略决定是否缓存资源，如果为是，就会将响应头与资源一同缓存下来；在浏览器再次请求并命中资源的时候，此时浏览器会检查上次缓存的缓存策略，根据策略的不同、是否过期等判断是直接读取本地缓存还是与服务器协商缓存。

缓存策略包括三种，存储策略、过期策略、协商策略。其中，存储策略发生在收到请求响应后，用于决定是否缓存相应资源；过期策略发生在请求前，用于判断缓存是否过期；协商策略发生在请求中，用于判断缓存资源是否更新。

总结

随着互联网技术的不断进步和发展，HTTP技术也在不断创新和完善。了解什么是HTTP协议、HTTP的基本组成、HTTP的状态码、HTTP的GET、POST方法以及版本是很重要的，另外了解到GET和POST方法之间的一些区别和联系，两者都是HTTP方法指请求消息中的操作类型，不过GET在浏览器回退时是无害的，而POST会再次提交请求；GET请求只能进行url编码，而POST支持多种编码方式；GET请求在URL中传送的参数是有长度限制的，而POST则没有等一些区别。还是值得深入探讨的。

avatar
文章
阅读
粉丝