安装过程一路next即可，安装好之后就可以进行抓包处理了，在抓包之前，首先需要打开Fiddler，然后在浏览器访问需要抓包的网站进行访问，然后Fiddler中就会出现很多抓到的包，通过抓到的内容就可以后续HTTP的学习了。注意：现在的网站基本都是HTTPS协议，，HTTPS只不过比HTTP多了一层加密解密，更安全了，这里并不影响我们的学习。

下面就以搜狗主页为例进行抓包：

在抓取HTTPS包之前需要进行配置，如下：

抓包步骤：

抓包之前可以先清除左边之前的抓包内容，快捷键：ctrl+a 全选后，delete进行清除。

5.HTTP请求/响应抓包结果的学习

（1）HTTP请求结果

（2）HTTP响应结果

注意:这里header之后的空行是一个报头结束的标记。

二.HTTP请求

1.认识URL结构

平时我们俗称的 "网址" 其实就是说的 URL (Uniform Resource Locator 统一资源定位符).互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它.

2.了解URL中的encode

encode是一个函数，可将字符串以URL编码，用于编码处理。

编码原理为：

将需要转码的字符转为16进制，然后从右到左，取4位(不足4位直接处理)，每2位做一位，前面加上%，编码成%XY格式。

比如：空格ASCII码是32，对应16进制是20，那么urlencode编码结果是:%20,但在新标准中空格对应的是+。

3.认识HTTP请求中的方法

（1）GET方法

常用于获取服务器上的某个资源。在浏览器中直接输入 URL, 此时浏览器就会发送出一个 GET 请求。另外, HTML 中的 link, img, script 等标签, 也会触发 GET 请求。

（2）POST方法

POST 方法也是一种常见的方法. 多用于提交用户输入的数据给服务器(例如登陆页面)。通过 HTML 中的 form 标签可以构造 POST 请求, 或者使用 JavaScript 的 ajax 也可以构造 POST 请求。

（3）关于GET和POST方法的不同点总结

get一般用于请求数据，post一般用于提交数据
get传递的数据一般在query string中存放，body为空；而post传递的数据一般在body中存放，query string一般为空。
get请求一般是幂等的，post请求一般不是幂等的。（幂等的：如果多次得到的请求都一样，则就为幂等的）
get可以被缓存，post不能被缓存（由幂等的决定）

（6）了解其他方法

PUT 与 POST 相似，只是具有幂等特性，一般用于更新
DELETE 删除服务器指定资源
OPTIONS 返回服务器所支持的请求方法
HEAD 类似于GET，只不过响应体不返回，只返回响应头
TRACE 回显服务器端收到的请求，测试的时候会用到这个

4.认识header(请求报头)

（1）Host

表示服务器主机的地址和端口

（2）Content-Length

表示 body 中的数据长度

（3）Content-Type

表示请求的 body 中的数据格式

其中body中的常见格式有以下3种：

application/x-www-form-urlencoded: form 表单提交的数据格式
multipart/form-data: form 表单提交的数据格式(在 form 标签中加上enctyped="multipart/form-data" . 通常用于提交图片/文件.
application/json: 数据为 json 格式.相当于JavaScript中对象中键值对的格式.

（4）User-Agent

表示浏览器/操作系统的属性

（5）Referer

示这个页面是从哪个页面跳转过来的

（6）Cookie（重点）

Cookie 中存储了一个字符串, 这个数据可能是客户端(网页)自行通过 JS 写入的, 也可能来自于服务器(服务器在 HTTP 响应的 header 中通过 Set-Cookie 字段给浏览器返回数据)。

Cookie具有身份标识的功能，对于不同域名下的Cookie都是不同的，所以不会引起冲突。

在第一次进行登录请求的时候不会携带Cookie信息，在登录响应的里面包含有3个Set-Cookie属性，只有携带gitee-session-n的属性，里面的属性值是加密后的信息，这个信息就是用户当前登录的身份标识，也成为”令牌“。后续访问当前主页的其他页面时，就会携带刚才获取到的Cookie信息，直到令牌过期/下次重新登录，该信息才会失效。

上面不同的页面请求中Cookie中携带的信息是相同的。

5.登录过程的简单示意图

6.认识body（请求正文）

正文中的内容格式与header中的Content-Type有关

对应的有三种形式如下：

（1）application/x-www-form-urlencoded（表单提交的格式）

（2）multipart/form-data（通常用于提交图片和视频）

（3）application/json（提交的数据格式为js）

三.认识HTTP响应

1.常见的响应状态码

（1）200 OK

表示访问成功

（2）404 Not Found

表示没有找到访问资源

资源存在：

资源不存在：

（3）403 拒绝访问

有的页面访问需要权限，如果没有登录直接访问，则会出现403，例如没有登录自己的码云账号来查看自己的私有仓库，则会出现403。

通过Fiddler也可以查看结果

（4）405 Method Not Allowed

HTTP中支持的方法有GET，POST，PUT,DELETE等，如果对方的服务器不支持这些方法，，则会出现405.

（5）500 Internal Server Error

服务器内部出错，一般是服务器代码执行过程中遇到了一些特殊情况，如服务器崩溃，则会出现500状态码。

（6）504 GatewayTimeout

服务器超时，当服务器负载过大，服务器处理单条请求需要的时间就会增加，可能就会出现超时的这种状态码。

（7）302 Move temporarily

临时重定向，从一个页面跳转到另一个页面，一般在登录页面比较常见

（8）301 Moved Permanently

永久重定向，当浏览器收到这种响应后，之后的请求都会被修改为Location中的新地址。

2.认识响应报头（Header）

格式与请求报头基本相同，Content-Type和Content-Length格式和请求中的格式也相同，其中 Content-Type中常见的取值有如下几种：

text/html : body 数据格式是 HTML
text/css : body 数据格式是 CSS
application/javascript : body 数据格式是 JavaScript
application/json : body 数据格式是 JSON

3.认识响应正文（body）

body中的格式取决于header中的Content-Type，与其中的类型对应。

四.通过form表单构造HTTP请求

1.form表单的作用

form表单是HTML中的一个标签，通常可以给服务器发送请求如GET或POST请求。

2.熟悉form中的属性

action:构造http请求的URL是什么。
method：构造http请求的方法是什么。

一般在form表单中使用input标签，所以也要直到input标签中的属性含义和使用方法。

type：表示输入框的类型；text是文本，password是密码，submit是提交按钮。
name：表示构造出http请求中的querystring中的key，其中querystring中value是输入框中的内容。
value：input标签中的值，对于submit来说就是按钮上显示的文本。

3.使用form构造发送请求实例

（1）form发送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>
    <!-- 这里的URL是随便写的 -->
    <form action="http://www.abc.com" method="get">
        <input type="text" name="user">
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>
</body>
</html>

（2）form发送POST请求

<!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>
    <form action="http://www.abc.com" method="post">
        <input type="text" name="user">
        <input type="password" name="password"> 
        <input type="submit" value="提交">
    </form>
</body>
</html>

五.使用ajax构造HTTP请求

1.了解什么是Ajax和Ajax的特点

ajax 全称 Asynchronous Javascript And XML, 是 2005 年提出的一种 JavaScript 给服务器发送
HTTP 请求的方式。
特点：可以不需要刷新页面/页面跳转就能进行数据传输。

所以通过在javascript中构造HTTP请求。

2.发送get请求

在创建之前需要了了解Ajax中XMLHttpRequest对象中的一些方法

（1）onreadystatechange :存储函数，每当readyState属性改变时就会调用该函数。

（2）readyState：里面包含XMLHTTPRequest的状态，共有4种，如下：

0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成，响应已准备就绪

（3）states：包含两种结果：200 ok 和 404 未找到页面

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>
    
</body>
<script>
    //创建对象
    let httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        //readstate状态码的含义
        //0:请求未初始化
        //1:服务器连接已建立
        //2:请求已接收
        //3:请求处理中
        //4:请求已完成，响应已准备就绪
        if(httpRequest.readyState == 4) {
            //打印请求状态码
            console.log(httpRequest.status);
            //打印http响应中的body部分
            console.log(httpRequest.responseText);
        }
    }
    //设置URL和方法名
    httpRequest.open('GET', 'http://42.192.83.143:8089/AjaxMockServer/info');
    //发送http请求
    httpRequest.send();
</script>
</html>

3.发送POST请求

发请求前，需要甚至body中的内容。先使用setRequestHeader设置Content-Type，再通过send的参数设置body内容

post请求示例

数据格式为application/x-www-form-urlencoded

<!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>
    
</body>
<script>
    //创建对象
    let httpRequest = new XMLHttpRequest();
    //默认异步处理响应
    httpRequest.onreadystatechange = function() {
        //readyState表示当前状态
        //0:请求未初始化
        //1:服务器链接已建立
        //2:请求已接收
        //3:请求处理中
        //4:请求完成，响应就绪
        if(httpRequest.readyState == 4) {
            //获取响应状态码
            console.log(httpRequest.status);
            //获取响应body
            console.log(httpRequest.responseText);
        }
    }
        //设置请求方法和URL
        httpRequest.open('POST','http://42.192.83.143:8089/AjaxMockServer/info');
        //设置请求头
        httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        //发送请求
        httpRequest.send('name=zhangsan&age=18');
</script>
</html>

4.对Ajax进行封装

上面的代码写起来比较麻烦，我们可以进行简单的封装

<!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>
    
</body>
<script>
    //这里封装一个Ajax函数其中带有一个js对象参数，之后直接调用该函数即可
    function ajax(args) {
        let httpRequest = new XMLHttpRequest();
        //设置回调函数
        httpRequest.onreadystatechange = function() {
            if(httpRequest.readyState == 4) {
                //调用回调函数打印响应内容
                args.callback(httpRequest.status, httpRequest.responseText);
            }
        }
        httpRequest.open(args.metod,args.url);
        //如果args中Content-Type属性有内容，就设置Content-Type请求头
        if(args.contentType) {
            httpRequest.setRequestHeader('Content-Type', args.contentType);
        }
        //如果args中body中包含请求正文，就调用send(body)
        if(args.body) {
            httpRequest.send(args.body);
        }else {
            httpRequest.send();
        }
    }
    //定义js对象
    let request = {
        metod:'POST',
        url:'http://42.192.83.143:8089/AjaxMockServer/info',
        contentType:'application/x-www-form-urlencoded',
        body:'uesrname=asdf&password=124',
        callback:function(states,response) {
            console.log('状态码：'+states+'响应正文'+response);
        }
    };
    //调用Ajax函数
    ajax(request);
</script>
</html>

六.了解HTTPS

1.为什么引入https

https也是应用层协议，只不过在http的基础上引入了加密层，因为http是明文传输，在传输过程中有可能被篡改/被劫持的可能，存在安全性问题。

2.HTTPS工作过程

（1）了解两种加密方式

为了保证数据安全，在传输过程中需要对数据进行加密，加密之后明文就会变成密文，之后通过密钥对密文进行解密成明文。其中加密又分为对称加密和非对称加密。

对称加密：通过同一个 "密钥" , 把明文加密成密文, 并且也能把密文解密成明文。

非对称加密：需要用到两个密钥，这两个密钥之间是配对的，一个是公钥，另一个是私钥。

通过私钥对明文进行加密成密文，然后使用公钥对密文进行解密变成明文；

或者通过公钥对明文进行加密成密文，后使用密钥对密文进行解密成明文都可以。

（2）两种加密方式的优缺点

由于一个服务器同一个时刻需要给多个客户端提供服务，为了保证安全，需要每一个客户端都有不同的密钥，如果维护每一个客户端与密钥之间的关系太麻烦了，但是在客户端与服务端建立联系的时候协定密钥，相当于将密钥进行明文传输了，就没有意义了，但是再对密钥再进行加密传输又行不通，所以有了非对称传输，非对称传输虽然解决了这种问题，但是私钥与公钥之间的配对速度是比较慢的，所以在进行加密的时候是两种方式都存在。在具体的使用中是对协商密钥的时候使用非对称加密，之后只有客户端和服务器有密钥，即使数据被劫持也破解不了里面的内容，所以之后的数据传输使用对称加密就可以了。

（3）了解证书

为了解决客户端如何获取公钥和避免公钥被黑客伪造，于是就引入了证书，证书里面包含公钥和网站的身份信息。

证书相当于一个结构化的字符串，里面包含了证书发布机构，有效日期，公钥等...。

（4）HTTPS的工作过程（这里是简化的，需要了解更深的可以查找一些资料来学习）

非对称加密生成对话密钥，里面包含了2次明文传输的随机字符串和1次密文传输的随机字符串，客户端和服务端通过这3个字符串生成对话密钥。
客户端与服务端之后的传输数据是对称加密进行传输的。请求时，客户端使用1中生成的对话密钥进行加密传输，之后客户端使用对话密钥进行解密。响应的时候也是使用同一个对话密钥。

标签：httpRequest,协议,HTTP,请求,form,body,响应,深入,应用层
来源： https://blog.csdn.net/weixin_47651920/article/details/122738066

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

应用层协议的深入学习

一.HTTP协议

1.了解什么是HTTP协议

2.深入理解应用层协议

3.理解HTTP协议的工作过程

4.Fiddler抓包工具的使用

（1）Fiddler是什么

（2）Fiddler下载路径

（3）Fiddler使用方法