高效便捷构造 Http 请求

客官°小女子只卖身不卖艺 2024-03-23 11:38 30阅读 0赞

#### 文章目录 ####

*   *  如何构造http请求
     *   *  使用 form 标签构造http请求.
         *   *  form 的重要参数:
             *  input 的重要参数:
         *  使用 Ajax 构造 http 请求
         *   *  代码中如果使用 ajax
             *  和 form 相比 ajax 功能更强
         *  构造 http 请求测试

> ### 如何构造http请求 ###

对于Get请求:

1.  地址栏直接输入
2.  点击收藏夹
3.  html 中的 link script img a…
4.  form 标签

这里我们重点强调 form 标签构造的 http请求

#### 使用 form 标签构造http请求. ####

<form action="https://www.leetcode.com" method="get">
        <input type="text" name="studentName">
        
        
        <input type="submit" value="提交">
      </form>

##### form 的重要参数: #####

*  action: 构造 http 请求的 URL 是什么
 *  method:构造 http 请求的方法是 GET 还是 POST(form 仅支持 GET 和 POST)

##### input 的重要参数: #####

*  type:表示输入框的类型 , text 表示文本 , password 表示密码 , submit 表示提交按钮
 *  name: 表示构造出 http 请求的 query string 里的 key. query string 里的value 就是用户输入框中的内容
 *  value: input 标签的值 , 对于 type 为 submit 类型来说 , value 就对应了按钮上显示的文本.

将构造好的请求提交给 leetcode 服务器(leetcode 不会处理该请求, 因此也不会对该请求作出响应) ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GSACTr09-1681365307358)(C:/Users/86178/AppData/Roaming/Typora/typora-user-images/image-20230404153111038.png)\]][img-GSACTr09-1681365307358_C_Users_86178_AppData_Roaming_Typora_typora-user-images_image-20230404153111038.png]

然后用 fiddler 抓包查看详细过程.

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VUMxG7Kj-1681365307359)(https://gitee.com/liu-xuixui/clouding/raw/master/img/image-20230404152936636.png)\]][img-VUMxG7Kj-1681365307359_https_gitee.com_liu-xuixui_clouding_raw_master_img_image-20230404152936636.png]

![在这里插入图片描述][22ac6156ffc24fb8a045bb2f02f9fa98.png]

再看看post请求的抓包结果:  
![在这里插入图片描述][3dce71a8215e40ac8c0d015151140293.png]

明显可以看到和 GET 请求的报文有所区别:

1.  POST 请求首行没有 query string
2.  POST 请求多了正文(body) , 且query string 在 body 中.

但 form 标签构造请求有其局限性 , 就是只能构造 GET 和 POST 请求 , 因此我们引入Ajax.

--------------------

#### 使用 Ajax 构造 http 请求 ####

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

JavaScript 中可以通过 ajax 的方式构造 http 请求

Asynchronous 异步是指 , 一行代码执行"发送请求" 操作之后 , 不必等待服务器响应回来 , 就可以立即先往下执行 , 当服务响应回来之后 , 在由浏览器通知到我们代码中.

##### 代码中如果使用 ajax #####

1.  js 原生的 ajax 的 api , 较为难用
2.  jquery 中提供的 ajax api , 针对原生的 api 的封装 , 简单很多

jquery 的下载网址:

https://www.bootcdn.cn/jquery/

![image-20230404184524493][]

引入 jquery 较为方便的办法就是直接 复制链接 到script 标签中.

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script>

jquery 中 $ 是一个特殊的全局变量.

jquert 中的 api 都是以 $ 方法法形式引出 , 其中只有一个参数 , 是一个 js 对象(**\{\} 表示的键值对**)

$.ajax();

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script>
        $.ajax({
        
          type: 'get',
          url: 'http://www.leetcode.com?studentName=zhangsan',
          // 此处 success 就声明了一个回调函数 , 就会在服务器响应返回到浏览器的时候触发该回调
          // 正数此处的 回调 体现了 "异步"
          success: function(data){
        
            console.log("当服务器返回的响应到达浏览器之后 , 浏览器会触发该回调 , 通知到我们的代码中");
          }
        });
      </script>
     console.log("浏览器立即往下执行后续代码");

Tips: 上述代码构造的请求 , 只能看到请求 , 无法获取到正确的响应 , 因为 leetcode 服务器并没有处理我们的请求 , 因此在控制台会发生报错.(相当于在火锅店吃炒菜)  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXo1jnBr-1681365307360)(C:/Users/86178/AppData/Roaming/Typora/typora-user-images/image-20230404184302353.png)\]][img-YXo1jnBr-1681365307360_C_Users_86178_AppData_Roaming_Typora_typora-user-images_image-20230404184302353.png]

##### 和 form 相比 ajax 功能更强 #####

1.  支持put , delete 等方法
2.  ajax 发送的请求可以灵活设置 header 和 body

--------------------

#### 构造 http 请求测试 ####

通过上述学习 , 可以发现无论是 form 还是 ajax 构造请求的代码书写起来都不是很便捷 , 如果用代码来构造大量的 http 请求 , 显然是很麻烦的. 因此我们可以使用 第三方免费工具 postman 来向服务器发送测试请求.

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AmWkSlxW-1681365307360)(C:/Users/86178/AppData/Roaming/Typora/typora-user-images/image-20230404185920445.png)\]][img-AmWkSlxW-1681365307360_C_Users_86178_AppData_Roaming_Typora_typora-user-images_image-20230404185920445.png]

除了手动构造之外 , postman 还有一个非常牛逼的功能 , 可以生成构造请求的代码 , 方便我们在程序中集成.

![在这里插入图片描述][13dd6ba3070a4ba39acf7c685a4b6adf.png]

[img-GSACTr09-1681365307358_C_Users_86178_AppData_Roaming_Typora_typora-user-images_image-20230404153111038.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/8b5517a66f084608b20e805c57f9508f.png
[img-VUMxG7Kj-1681365307359_https_gitee.com_liu-xuixui_clouding_raw_master_img_image-20230404152936636.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/c9dc5e1d1e374944a70e8b9d7f323a90.png
[22ac6156ffc24fb8a045bb2f02f9fa98.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/cf2c2efd57d3420fbed1f6ad0a774b3c.png
[3dce71a8215e40ac8c0d015151140293.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/bfc9450da86a47ed98af4443d63a9da5.png
[image-20230404184524493]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/fb7e814ef8c54abf83214966c841452b.png
[img-YXo1jnBr-1681365307360_C_Users_86178_AppData_Roaming_Typora_typora-user-images_image-20230404184302353.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/07213816c2364d319c0325713bb0cec7.png
[img-AmWkSlxW-1681365307360_C_Users_86178_AppData_Roaming_Typora_typora-user-images_image-20230404185920445.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/007d2786661d46d9a22bc50c8bf22c8d.png
[13dd6ba3070a4ba39acf7c685a4b6adf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/16a8c641a5574542b0f97cedd671f83e.png