HTTP协议详解(二)_网络协议

1.http 响应详解

1.1认识状态码(status code)

1.3 认识响应正文(body)

2.构造 http 请求

2.1 通过form表单构造请求

2.2 通过ajax构造请求

2.3 使用第三方工具构造请求

开始之前我们先复习一下http协议格式

1.http 响应详解

我们先抓包来看看http响应,此处是抓取登录gitte时的http响应

我们可以看到这个http响应分为四个部分

版本号就是当前使用http协议的具体版本,前文也提到过.我们现在来看看状态码和状态码的描述

1.1认识状态码(status code)

状态码:表示访问一个页面的结果(成功或失败,或者其他情况...)

http的响应状态码是非常多的,并且都表示不同的含义,我们先看看具体有哪些:

最常见的状态码:

200 ok :访问成功了

404 notfound:表示访问的资源不存在

我们看看抓包结果

404后跟着的就是状态描述

403 forbidden:表示访问被拒绝,也是比较常见的状态.有的页面通常需要用户具有一定的权限才能访问(登陆后才能访问). 如果用户没有登陆直接访问, 就容易见到 403

302 found:表示重定向,类似于呼叫转移.比如我有一个手机号,后来换了个号,此时办理一个呼叫转移业务就不需要告诉他们新号码,直接用旧号码打电话,就会自动转移到新的号码.这里出现这个状态就是转移到另一个新的页面

我们抓取gitte登陆页面登录成功后自动跳转到主页

并且302这样的响应报文中,会在header里带有location属性,通过这个属性找到新的要跳转的地址

302和301本质是相同的,都是重定向.302是临时重定向,资源只是临时被移动.301是永久重定向,请求的资源已被永久的移动到新uri，返回信息会包括新的uri，浏览器会自动定向到新uri。今后任何新的请求都应使用新的uri代替

浏览器的重定向和请求转发的区别是什么?

重定向是http协议中提供的机制,为了方便进行网站迁移这样的工作.请求转发则是servlet/spring中提供的机制,看看具体区别

重定向:涉及到两次交互,可以重定向到外部资源,跳转到别的网站

请求转发:只有一次交互,只能在服务器内部的资源之间转发,更加高效,只有一次交互

500 :服务器内部错误,代码抛出异常了,无法完成请求

504 gateway(网关)time-out:响应时间太久了,浏览器等不及.就是充当网关或代理的服务器，未及时从远端服务器获取请求,

这么多状态码可分为几大类:

分类	分类描述
1xx	信息，服务器收到请求，正在处理
2xx	成功，操作被成功接收并处理
3xx	重定向，需要进一步的操作以完成请求
4xx	客户端错误，请求包含语法错误或无法完成请求
5xx	服务器错误，服务器在处理请求的过程中发生了错误

这里的状态码是rfc标准中明确规定的,不能由程序员自定义,在http协议中还有不少地方可以自己定义:

响应报头的基本格式和请求报头的格式基本一致

类似于 content-type , content-length 等属性的含义也和请求中的含义一致

content-type

响应中的 content-type 常见取值有以下几种:

1.3 认识响应正文(body)

正文的具体格式取决于 content-type,我们分别抓取上述几种格式的正文观察,此处抓取的是登录某站后的http响应

2.构造 http 请求

2.1通过form表单构造请求

form (表单) 是 html 中的一个常用标签. 可以用于给服务器发送 get 或者 post 请求,注意单词拼写,是form不是from!

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
</head>
<body>
    <!-- 允许用户和服务器之间交换数据,用户提交数据 -->
    <!-- action:提交给哪个服务器? -->
    <!-- method:具体的方法 -->
    <form action="https://www.baidu.com" method="get">
        <!-- 提交的数据,对于form,数据是键值对的结构 -->
        <input type="text" name="studentname">
        <!-- inputsubmit 构造了提交按钮, value描述了按钮中的文本-->
        <!-- 点击按钮就会触发提交form表单的操作 ,也就是狗仔请求发送给服务器-->
        <input type="submit" value="提交">
    </form>
</body>
</html>

通过抓包观察结果

网页地址栏:也显示了querystring

和代码进行对比

除了首行之外,其它的都是浏览器自主添加的,不是代码控制的

现在把get替换成post

抓包结果

可以看到数据从querystring移动到了body中

2.2通过ajax构造请求

除了浏览器地址栏额能构造get请求,form表单能构造get和post请求之外,也能用ajax构造请求,功能更强大

ajax 全称 asynchronous javascript and xml, 是 2005 年提出的一种 javascript 给服务器发送 http 请求的方式,特点是可以不需要刷新页面/页面跳转就能进行数据传输

asynchronous:异步的.简单的理解为:a等待b有两种等待方式.如果a始终关注b,观察b什么时候就绪,就是同步等待;异步是a不时刻关注b的动向,b就绪之后还就通知a,这是异步等待

ajax就是异步的方式,发送请求之后,不必等待服务器响应,就可以立即往下执行,当服务器响应回来之后,再由浏览器通知到代码中

jquery针对js原生的ajax的api进行封装,简单实用

使用前首先要引入jquery

搜索jquery cdn然后使用第一个版本的就可以

复制链接到js代码中

发送get请求

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
</head>
<body>
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $.ajax({
            type:'get',
            url:'https://www.baidu.com?studengname=zhangsan',
            //success声明了一个回调函数,会在服务器响应返回到浏览器的时候,触发该回调,体现了  异步
            success:function(data){
                //data是响应的正文部分
                console.log("服务器返回的响应到达浏览器之后,浏览器出发该回调,通知到当前代码中");
            }
        });
        console.log("浏览器继续向下执行其它代码");
    </script>
</body>
</html>

在jquery中,$.ajax中的$是一个特殊的全局对象,jquery的api都是以$的方法的形式来引出的,ajax只有一个参数,是一个js对象,使用{}表示的键值对.

上述代码只是发送了请求,无法获取到正确的响应,因为发送给百度的服务器没有处理我们的请求,如果发送给自己写的服务器,就能正确处理了