javaEE 初阶 — 如何构造一个 HTTP 请求

小灰灰 2023-10-08 23:38 68阅读 0赞

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

*  使用 form 表单标签构造
 *   *  1 构造 GET 请求
     *  2 构造 POST 请求
 *  使用 ajax 构造
 *   *  1 什么是异步
     *  2 代码中如何使用 ajax
 *  使用第三方工具构造
 *   *  1 postman 工具的安装
     *  2 postman 工具的使用

## 使用 form 表单标签构造 ##

### 1 构造 GET 请求 ###

使用 **form** 表单构造 HTTP 请求，需要用到两个属性。  
第一个属性是 **action**，表示的是提交给哪个服务器；第二个属性是 **method**，表示的是方法，Get 或者 Post。

![5cdaa318877649bb93b1514e5c36b423.png_pic_center][]  
  
点击提交后，使用 **fiddler** 抓包并观察结果。  
  
![b740106b6a99432183cfbbb3f5e9ffb9.png_pic_center][]  
  
上图中的 Get 就是代码中的 **method** 属性里的值，圈出的部分就是用户在输入框中输入的内容。

**https://www.sogou.com** 即是 action 属性的值。

此时的请求是只有 **首行** 部分是可以根据代码更改的，其余部分都是浏览器自主添加的。

### 2 构造 POST 请求 ###

post 请求与 get 请求的代码是一样的，只是 **method** 属性里的值要改为 **post**。  
  
![8dc26207913c40f5adfaa6a065375cc7.png_pic_center][]  
  
body 部分就是用户输入的值，首行部分的 url 就是 action 属性里的值。  
  
对于 form 构造的 post 请求来说，body 里的数据格式就和 query string 是非常相似的，也就是键值对结构。  
键和对之间使用 & 来分割，键和值之间使用 = 来分割。

form 标签只能构造 GET 和 POST，无法构造 PUT、DELETE、OPTIONS 等方法的请求。

## 使用 ajax 构造 ##

这是一种功能更加强大的构造 http 请求的方式，ajax（阿贾克斯），这是通过 **js** 构造 http 请求的方式。  
全称是 **Asynchronous JavaScript and XML**，a 表示的是 **异步的**。

### 1 什么是异步 ###

既然有异步，肯定也有同步，下面来举个例子解释。

假如，张三要和相恋多年的网恋对象奔现，他来到火车站等它的女朋友。  
**同步的等待**：在等的过程中，张三就一直死盯着出站口，直到看到他的女朋友为止，然后立马过去迎接她。  
**异步的等待**：张三也可以一边玩手机，一边等待，等到女朋友来了以后主动与张三打招呼。

**同步** 的意思就是 A 等待 B 时，会一直盯着 B，A 负责关注 B 什么时候就绪。  
**异步** 的意思就是 A 等待 B 时，不会一直盯着 B，B 就绪了之后，主动通知 A。

html 中 通过 ajax 发起请求操作之后，就属于是异步的方式。

当代码执行发送请求操作之后，不必等待服务器响应回来，就可以立即先往下执行。  
当服务器的响应回来之后，再有浏览器通知到代码中。

### 2 代码中如何使用 ajax ###

**jquery** 里提供了 ajax api，这是针对原生的 api 的封装，使用起来比较简单。  
  
搜索 **jquery cdn** ，选择当前域名。  
  
![b64a3117a638486281ff91f691a70516.png_pic_center][]  
  
点击之后，在出现的页面选择当前的版本下载。  
  
![83c0493328af41119dbe8a026c2a6422.png_pic_center][]  
  
右键选择复制链接地址后打开  
  
![0df92c48c2ea4cc591737a3a7383b2f6.png_pic_center][]  
  
![5cd7007525454c739ed4a341608f06fa.png_pic_center][]  
  
然后再将这个链接复制到 **script** 标签中的 **src** 属性中。

**$.ajax()** 中的 $ 在 jQuery 中是一个特殊的全局对象，在 jQuery 中的 api 都是以 $ 的方法的形式引出的。  
它只有一个参数，是一个 js 对象，也就是大括号里的键值对。

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

![f98ead46f68a400b9debbe71637a349b.png_pic_center][]  
打开检查者根据，查看控制台可以发现此时报了错。

这是因为搜狗的服务器没有处理我们的请求，因此这里的代码只能看到构造的请求无法获取正确的响应。  
就好比在肯基基吃法，你点的却是麦当当，人家当然不会理你。  
  
等到自己实现一个服务器的时候，就可以给自己的服务器发送请求了，这个时候自然就可以处理了。

补充的三点。  
  
**第一点**  
  
![13165ad69c03427f95488811c4685dce.png_pic_center][]  
  
当代码中有多个 请求 的时候，会按照自上而下的顺序执行，但是收到响应与回调函数的执行顺序就不确定了，  
因为网络会发生后发先至。

**第二点**  
  
当其中的一个请求挂了的时候，如果是在发送请求之前就出现异常了，而且异常还是在主线程的话，  
此时是无法继续执行后面的代码的。

如果是在发送请求之后，异常出现在响应的回调里，那就是另外的回调线程异常，不会影响主线程。

**第三点**  
  
和 form 相比，ajax 的更能更加的强大。

*  支持 put、delete 等方法。
 *  ajax 发送的请求可以是灵活设置的 **header**。
 *  ajax 发送的请求的 body 也是可以灵活设置的。

## 使用第三方工具构造 ##

这里使用的是 **postman**，也是未来公司里经常会使用到的。

而且这还是一个带有对象的软甲——**postwoman**，更能和 postman 差不多。

### 1 postman 工具的安装 ###

1、打开搜索引擎，搜索 **postman**，注意域名，选择官网的。  
  
![b105b254578247cd836774c220b763c6.png_pic_center][]

2、在出现的页面中按需下载  
  
![f7f93955befd4b1e936a8b3b6a490e34.png_pic_center][]  
我选择下载 windows 版  
  
![2da251d601cc4a1388c2b5455291c4e8.png_pic_center][]

3、下载安装好以后，打开并创建一个 工作空间  
  
![da7243411bd34789b7f9419aa35d4775.png_pic_center][]  
  
  
选择创建好的工作空间打开。  
  
![f2508ffbcce646648311baecc443f0b1.png_pic_center][]  
  
  
4、创建好一个工作空间后，点击下面的 + 号创建一个标签页。  
  
![ceebcd947b19419890e9b69a378096f9.png_pic_center][]  
  
  
这里就创建好了一个**标签页**。  
  
![f1a766537fdb41b8852eb900585c8bfb.png_pic_center][]

### 2 postman 工具的使用 ###

可以在以下位置设置请求的方法。  
  
![1393f4a464c04a70b46e2d9a9ed23052.png_pic_center][]  
  
总共有以下这么几种方法可以设置。  
  
![f95a1ba26c67489089606392c5608946.png_pic_center][]

这个位置写的就是 url  
  
![c87941b8add643d9a83e78e921b57741.png_pic_center][]  
  
![295811dde193475f99ecd988bcc59012.png_pic_center][]  
  
也可以设置它的 **headers** 以及 **body**  
  
![5ca166f67ee6484baa93e2c35878a256.png_pic_center][]  
  
  
  
![567480ec55ce43c4b0875a421bf4c7f1.png_pic_center][]  
  
构造完毕之后，点击发送即可。  
  
![a8f480c83e3c49908aa3c0869f2d8b2f.png_pic_center][]  
  
  
  
以下就是得到的响应  
  
![0e3527f65e454ebb8cf1193fc05fa0e3.png_pic_center][]  
可以选择观察它的 body、cookies、headers 部分。

postman 还有一个比较牛逼的功能：

那就是，**可以生成构造请求的代码，方便我们在自己的程序中集成。**

![31ce0ff374af4414b15edbc9c1989b29.png_pic_center][]

[5cdaa318877649bb93b1514e5c36b423.png_pic_center]: https://img-blog.csdnimg.cn/5cdaa318877649bb93b1514e5c36b423.png#pic_center
[b740106b6a99432183cfbbb3f5e9ffb9.png_pic_center]: https://img-blog.csdnimg.cn/b740106b6a99432183cfbbb3f5e9ffb9.png#pic_center
[8dc26207913c40f5adfaa6a065375cc7.png_pic_center]: https://img-blog.csdnimg.cn/8dc26207913c40f5adfaa6a065375cc7.png#pic_center
[b64a3117a638486281ff91f691a70516.png_pic_center]: https://img-blog.csdnimg.cn/b64a3117a638486281ff91f691a70516.png#pic_center
[83c0493328af41119dbe8a026c2a6422.png_pic_center]: https://img-blog.csdnimg.cn/83c0493328af41119dbe8a026c2a6422.png#pic_center
[0df92c48c2ea4cc591737a3a7383b2f6.png_pic_center]: https://img-blog.csdnimg.cn/0df92c48c2ea4cc591737a3a7383b2f6.png#pic_center
[5cd7007525454c739ed4a341608f06fa.png_pic_center]: https://img-blog.csdnimg.cn/5cd7007525454c739ed4a341608f06fa.png#pic_center
[f98ead46f68a400b9debbe71637a349b.png_pic_center]: https://img-blog.csdnimg.cn/f98ead46f68a400b9debbe71637a349b.png#pic_center
[13165ad69c03427f95488811c4685dce.png_pic_center]: https://img-blog.csdnimg.cn/13165ad69c03427f95488811c4685dce.png#pic_center
[b105b254578247cd836774c220b763c6.png_pic_center]: https://img-blog.csdnimg.cn/b105b254578247cd836774c220b763c6.png#pic_center
[f7f93955befd4b1e936a8b3b6a490e34.png_pic_center]: https://img-blog.csdnimg.cn/f7f93955befd4b1e936a8b3b6a490e34.png#pic_center
[2da251d601cc4a1388c2b5455291c4e8.png_pic_center]: https://img-blog.csdnimg.cn/2da251d601cc4a1388c2b5455291c4e8.png#pic_center
[da7243411bd34789b7f9419aa35d4775.png_pic_center]: https://img-blog.csdnimg.cn/da7243411bd34789b7f9419aa35d4775.png#pic_center
[f2508ffbcce646648311baecc443f0b1.png_pic_center]: https://img-blog.csdnimg.cn/f2508ffbcce646648311baecc443f0b1.png#pic_center
[ceebcd947b19419890e9b69a378096f9.png_pic_center]: https://img-blog.csdnimg.cn/ceebcd947b19419890e9b69a378096f9.png#pic_center
[f1a766537fdb41b8852eb900585c8bfb.png_pic_center]: https://img-blog.csdnimg.cn/f1a766537fdb41b8852eb900585c8bfb.png#pic_center
[1393f4a464c04a70b46e2d9a9ed23052.png_pic_center]: https://img-blog.csdnimg.cn/1393f4a464c04a70b46e2d9a9ed23052.png#pic_center
[f95a1ba26c67489089606392c5608946.png_pic_center]: https://img-blog.csdnimg.cn/f95a1ba26c67489089606392c5608946.png#pic_center
[c87941b8add643d9a83e78e921b57741.png_pic_center]: https://img-blog.csdnimg.cn/c87941b8add643d9a83e78e921b57741.png#pic_center
[295811dde193475f99ecd988bcc59012.png_pic_center]: https://img-blog.csdnimg.cn/295811dde193475f99ecd988bcc59012.png#pic_center
[5ca166f67ee6484baa93e2c35878a256.png_pic_center]: https://img-blog.csdnimg.cn/5ca166f67ee6484baa93e2c35878a256.png#pic_center
[567480ec55ce43c4b0875a421bf4c7f1.png_pic_center]: https://img-blog.csdnimg.cn/567480ec55ce43c4b0875a421bf4c7f1.png#pic_center
[a8f480c83e3c49908aa3c0869f2d8b2f.png_pic_center]: https://img-blog.csdnimg.cn/a8f480c83e3c49908aa3c0869f2d8b2f.png#pic_center
[0e3527f65e454ebb8cf1193fc05fa0e3.png_pic_center]: https://img-blog.csdnimg.cn/0e3527f65e454ebb8cf1193fc05fa0e3.png#pic_center
[31ce0ff374af4414b15edbc9c1989b29.png_pic_center]: https://img-blog.csdnimg.cn/31ce0ff374af4414b15edbc9c1989b29.png#pic_center