安装过程一路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）两种加密方式的优缺点

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