【计算机网络】如何让客户端构造一个HTTP请求

末蓝、 2024-02-19 09:24 31阅读 0赞

![在这里插入图片描述][3010533138594e98a4088ac1602bc9ce.gif_pic_center]

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

*  前言
 *  1. 在浏览器搜索栏中输入 URL
 *  2. 一些特殊的 HTML 标签触发GET请求
 *  3. form 表单构造 HTTP 请求
 *  4. ajax 构造 HTTP 请求
 *  5. postman 构造 HTTP 请求
 *   *  5.1 进入 postman 网站下载 postman
     *  5.2 打开 postman

## 前言 ##

前面我们学习了关于 HTTP 的相关知识，HTTP 是浏览器和服务器之间通信使用的协议，当我们使用浏览器访问某个服务器的时候，会生成一个 HTTP 请求发送给服务器，这个请求又是如何产生的呢？那么今天我将为大家分享几种构造 HTTP 请求的方法。

## 1. 在浏览器搜索栏中输入 URL ##

当我们在浏览器的搜索栏中输入 URL 的时候，就会生成一个 HTTP 请求。

![在这里插入图片描述][384a070c0bfc4ae9b85d8e600dcfc0e5.png]

![在这里插入图片描述][615ade34675a4ceea4be3b2bba70bfdc.png]

## 2. 一些特殊的 HTML 标签触发GET请求 ##

在HTML中，有一些特殊的标签可以触发GET请求，最常见的是<form>标签和<a>标签。

1.  <form> 标签：当你在标签中设置method="get"时，它会触发GET请求。用户在提交表单时，浏览器会向服务器发送GET请求。例如：

在这个例子中，当用户填写搜索框并点击"Search"按钮时，浏览器会向"/search"路径发送一个GET请求，请求中包含用户在搜索框中输入的内容。

1.  <a> 标签：你可以使用<a>标签的href属性来定义当用户点击链接时要导航到的URL。如果你在href属性中使用?字符，那么它会触发一个GET请求。例如：

在这个例子中，当用户点击这个链接时，浏览器会向当前URL的路径发送一个带有"page=1"查询参数的GET请求。如果当前URL是"\[http://example.com/some/path?another=value"，那么点击这个链接后，浏览器会向"http://example.com/some/path?page=1&another=value"发送GET请求。

## 3. form 表单构造 HTTP 请求 ##

HTML的元素可以用于创建一个表单，用户可以在该表单中输入数据。当用户提交表单时，浏览器将构造一个HTTP请求，并将表单数据作为请求体发送到服务器。

构造HTTP请求的过程如下：

1.  浏览器获取表单数据：当用户在表单中输入数据后，浏览器会将这些数据存储起来，并等待用户提交表单。
2.  用户提交表单：当用户点击“提交”按钮或按下回车键时，浏览器会触发表单的提交事件。
3.  浏览器构造HTTP请求：浏览器根据表单元素的类型和属性，构造一个HTTP请求。对于GET请求，浏览器会将表单数据编码成URL参数，并附加到URL中。对于POST请求，浏览器会将表单数据作为请求体发送。
4.  浏览器向服务器发送请求：浏览器将构造好的HTTP请求发送到服务器，并等待服务器的响应。
5.  服务器处理请求：服务器收到请求后，会解析请求体中的数据，并根据需要对数据进行处理。服务器可能会返回一个HTML页面作为响应，或者将数据存储在数据库中。
6.  浏览器接收响应：浏览器收到服务器的响应后，会解析响应内容并将其显示给用户。如果响应是一个HTML页面，浏览器会将其渲染成可视化页面。如果响应是其他类型的数据（如JSON），浏览器会根据需要进行处理和显示。

我们这里先创建出一个`.html` 文件，然后用 VScode 打开这个文件。  
![在这里插入图片描述][392f9c9e85b845ec8a01858904ad483c.png]  
![在这里插入图片描述][dcba533fa37145fcbe36bc0e20fed358.png]  
HTML 标签往往是成对存在的。

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

<html>
        <head>
    
        </head>
        <body>
            hello world
        </body>
    </html>

这个 body 中的内容就是页面中显示的内容。

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

那么我们就简单的使用 form 表单构造一个 HTTP 请求。

在 VScode 中，我们可以手动打出标签，但是也可以使用 ! + Tab 生成一个 HTML 模板。

![在这里插入图片描述][2b5b21ed0806456c96de5d948aab81ac.png]

![在这里插入图片描述][63c2d1035ec64de6b452f4090d305189.png]  
![在这里插入图片描述][77e55f1322504e6db6243157d8edd428.png]  
然后我们需要生成一个 form 标签，指定 URL 和 method  
![在这里插入图片描述][cc28a0dc426849999ca29eb6cdfaecab.png]

然后就是处理表单的具体内容。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>form</title>
    </head>
    <body>
        <form action="http://www.baidu.com/index.html" method="get">
            <input type="text" name="userid" placeholder="请输入用户名">
            <input type="text" name="password" placeholder="请输入密码">
            <input type="submit" value="提交">
    </body>
        </form>
    </html>

![在这里插入图片描述][1d0cae44534f4fbd9e1aebef73d64751.png]

![在这里插入图片描述][39f3ca5effc1489e9d4be42dcb14bc00.png]  
当写完这个 HTML 代码之后，保存，然后打开这个文件就会出现这样的页面。  
![在这里插入图片描述][d2a0ecb2e9aa4ff7bf55f84c9d63930e.png]

输入用户名和密码，提交。

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

当点击这个提交按钮的时候，会显示出这样的页面。  
![在这里插入图片描述][63ddc51eb21a4c4491c07b7f84123e43.png]

![在这里插入图片描述][463510f931184f0684bbe03958f68a18.png]

我们构造的 input 标签中的 name 会作为 key 值，而对应输入的则会作为 value 值构成键值对放在 URL 的 query string 中。

虽然通过 form 表单可以构造一个 HTTP 请求，但是 form 表单只能构造出 GET 和 POST 方法的 HTTP 请求，并且使用 form 表单构造出来的 HTTP 请求会触发页面跳转，会更新整个页面的数据，而有些时候则是只需要更新做出修改了的部分，那么这时候 form 表单构造的 HTTP 请求就显得很呆了，所以就又出现了另一种构造 HTTP 请求的方式——ajax。

## 4. ajax 构造 HTTP 请求 ##

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它使用 JavaScript 和 XMLHttpRequest 对象来与服务器进行异步通信，从而在不重新加载整个页面的情况下，更新网页的部分内容。

具体来说，Ajax 允许在用户与网页交互时，通过后台与服务器进行通信，获取或提交数据，然后在网页上对获取到的数据进行处理和展示。这种技术使得网页能够在用户操作时，实时地更新部分内容，提供更加流畅的用户体验。

Ajax 的核心是 JavaScript 中的 XMLHttpRequest 对象，它能够通过 HTTP 或 HTTPS 协议，与服务器进行通信。当用户在网页上进行操作时，JavaScript 代码会通过 XMLHttpRequest 对象向服务器发送请求，然后等待服务器的响应。

在服务器端，收到请求后，可以进行相应的处理，比如查询数据库、处理数据等，然后将处理结果返回给客户端。客户端收到响应后，可以使用 JavaScript 对响应数据进行处理和展示，比如更新网页上的某个部分。

通过 Ajax 技术，可以实现以下功能：

1.  在网页上实时地更新部分内容，提高用户体验。
2.  实现动态的网页效果，提高网页的交互性。
3.  在后台与服务器进行通信，减轻用户的网络负担，提高网页的加载速度。
4.  实现网页的异步更新，提高网页的响应速度。

虽然浏览器提供了原生的 ajax API，但是这个原生的比较难用，所以我们可以使用一些封装了 ajax 的第三方库来实现这个功能。我们今天使用的第三方库就是 jquery 库。既然要使用第三方库是需要额外下载引入的。虽然下载比较麻烦，但是前端只是需要将这个库的地址写入代码中就可以了。

我们可以搜索 jquery cdn，然后找到`https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js`这个地址，将这个地址引入就行了。

![在这里插入图片描述][199ce922bc3b42ce957e832f33ee4472.png]  
当引入 jquery 第三方库之后，我们就可以写相关的 ajax 代码了。

![在这里插入图片描述][59265e5db6414773ba758ab820bbd52c.png]

这里 $ 是 jquery 中定义的一个全局变量，通过 $ 可以调用 jquery 中的方法，而在 JavaScript 中 \{\} 表示对象，在 ajax 中 \{\} 中是使用键值对的方式来描述属性名和属性值的。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script>
            $.ajax({
          
                type: "get",
                url: "http://www.baidu.com/index.hetml",
                success: function(body){
          
                    console.log(body);
                },
                error: function(body){
          
                    console.log("获取响应失败");
                },
            });
        </script>
    </body>
    </html>

![在这里插入图片描述][7049d54f4e6b47f3beb75127529fed72.png]

这里 success: function()\{\} 中的代码不是立即执行的，而是当服务器返回响应之后，然后会将响应部分的 body 传入到 function 中，这里 function 就类似一个匿名内部类。如果服务器返回的是一个类似的 200 成功的响应，那么机会执行 success 部分的代码，如果返回的是 404 等其他错误，就会执行 error 中的代码。console.log()的作用就是打印的作用。

保存代码之后打开这个文件，并且打开浏览器的检查选项可以看到结果，执行的error中的代码。  
![在这里插入图片描述][41d2d0ec956940889262d73118af2e27.png]

![在这里插入图片描述][7393af13fee043968da9433696e5dc53.png]  
![在这里插入图片描述][77ed1177500c4cdcac30255f8eda6c7a.png]

虽然 form 表单和 Ajax 都可以构造 HTTP 请求，但是这都需要我们用到前端的知识，如果你有一定的前端基础，那其实还好，但是如果没有一定的前端基础的话，那么使用上面两个方法构造 HTTP 请求的成本就比较高，所以我们既可以使用工具来替我们构造一个 HTTP 请求，这个工具就是——postman。

## 5. postman 构造 HTTP 请求 ##

### 5.1 进入 postman 网站下载 postman ###

[https://www.postman.com/downloads/  
][https_www.postman.com_downloads_]

![在这里插入图片描述][45837575a0df4919b774bf651cc8fa14.png]  
![在这里插入图片描述][e8ce6ce0ed6247c7ba35d1d2218c84dc.png]  
![在这里插入图片描述][26353847e2bc4a429f70578790d2c811.png]  
注册完成之后就会下载安装包，然后打开软件的时候会出现真人验证。

### 5.2 打开 postman ###

![在这里插入图片描述][c49e47a2eeb04e67873b29a0a1acd895.png]  
![在这里插入图片描述][b6b79b6d3ee34f5e96a80f6092bc6b74.png]  
进入 postman 的界面就是这样的。

![在这里插入图片描述][99d30fe90810441e8516e0cde703484f.png]  
![在这里插入图片描述][10e089cb4d284badb70e48601fdee2f4.png]  
![在这里插入图片描述][c9d1db603a0643d780183862ab236235.png]  
![在这里插入图片描述][e29bd5879af74fbab292951ad5d91b85.png]  
![在这里插入图片描述][c94e613eb9c943bb8cf6ad2938126208.png]  
![在这里插入图片描述][5651b24b1a75432b9e10e545f7483fe4.png]  
![在这里插入图片描述][9ece92f0d26d4846ac3de645b5ed2f03.png]  
![在这里插入图片描述][ffd13b6bc6704f77a351f2e8eb0379aa.png]  
![在这里插入图片描述][b22b6085160844759090a92ca26133db.png]  
![在这里插入图片描述][a3244a3d75184da598f1c2ee10615594.png]  
![在这里插入图片描述][63e9bd5c4d7b44fe8cc98410510141bb.png]  
![在这里插入图片描述][0aca7fc62df840b29234b67227350762.png]  
当我们构造完 HTTP 请求之后，点击 send ，就会收到服务器的响应，以及相应的状态。  
![在这里插入图片描述][085f9dcc88ae4570b28d15e124f8540d.png]  
通过点击这个还可以生成不同语言生成 HTTP 请求的代码，这个代码是可以直接复制粘贴的。  
![在这里插入图片描述][338d5bd0142749b99bb6c02e640fc834.png]

[3010533138594e98a4088ac1602bc9ce.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/3c3ec858666e416b83f39bac50e67c33.png
[384a070c0bfc4ae9b85d8e600dcfc0e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/9e96b2404bde41f9b38aae4d1526e9b6.png
[615ade34675a4ceea4be3b2bba70bfdc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/e68bdbf2cc2140999b5e1743f6eb4631.png
[392f9c9e85b845ec8a01858904ad483c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/326314fed65b47dbab7132d663a204ad.png
[dcba533fa37145fcbe36bc0e20fed358.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/48d437950bae40dfb3f5977b359150bd.png
[a24dee9b47174eba9fd757f3f1ea382d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/721f4dfac67f49e1b29eb223904fec89.png
[dc8cc62984d142a78a4d24fe828915f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/9340c66f76654afd97c79d58ad4b0fa6.png
[2b5b21ed0806456c96de5d948aab81ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/f7e3f4ad8ff74188b262c7b776fef9db.png
[63c2d1035ec64de6b452f4090d305189.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/13218af3b5e146a88e2ac7ea6ce7542d.png
[77e55f1322504e6db6243157d8edd428.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/09ee64c0633644a6b81c7acca12a7490.png
[cc28a0dc426849999ca29eb6cdfaecab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/3647de65eeb84f9ea6d7cc2c930a3fdd.png
[1d0cae44534f4fbd9e1aebef73d64751.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/b666e4073bbb4645a644bcf48878feb2.png
[39f3ca5effc1489e9d4be42dcb14bc00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/9cb48c340520414baa4d718a955105ef.png
[d2a0ecb2e9aa4ff7bf55f84c9d63930e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/3f8e9c09d35d49198596d14fd77dbad4.png
[ec0dc7b2c3fa4a90a34e6e3a4bc8bd7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/52ac4538648642c480280ce0c3ea97b4.png
[63ddc51eb21a4c4491c07b7f84123e43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/c03422b8e8b149f39db37a671724e539.png
[463510f931184f0684bbe03958f68a18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/67d19605119c4dc0a11a2995323c5c65.png
[199ce922bc3b42ce957e832f33ee4472.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/1f769abbece24a278565c3a0fe36f3ff.png
[59265e5db6414773ba758ab820bbd52c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/dd736cb139aa421b9d168542e445b39f.png
[7049d54f4e6b47f3beb75127529fed72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/2c91a745edab4994a84db213084415d8.png
[41d2d0ec956940889262d73118af2e27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/f7660552797442e1995e049042518892.png
[7393af13fee043968da9433696e5dc53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/d497f77826b54861a525ea2fee431d8f.png
[77ed1177500c4cdcac30255f8eda6c7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/e8f7113590f64d65ac7c7341c8b60463.png
[https_www.postman.com_downloads_]: https://www.postman.com/downloads/
[45837575a0df4919b774bf651cc8fa14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/bd969bc51ec849219736333fa2000127.png
[e8ce6ce0ed6247c7ba35d1d2218c84dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/312c184bccae4323b016aadd68417bf9.png
[26353847e2bc4a429f70578790d2c811.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/96800f12b0874b97b3907ca7e8d07363.png
[c49e47a2eeb04e67873b29a0a1acd895.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/9bb4c89c2f6c490fa3af4fee57c7f6fb.png
[b6b79b6d3ee34f5e96a80f6092bc6b74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/2dc3e2225e3d41daa58cad367bea008e.png
[99d30fe90810441e8516e0cde703484f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/49fd16bb6df84ee4b9f990aebbf9d491.png
[10e089cb4d284badb70e48601fdee2f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/3147ea87bf0f4dd197a0c077020917ab.png
[c9d1db603a0643d780183862ab236235.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/a88742aa50a34f4e941b44f4094d6a7f.png
[e29bd5879af74fbab292951ad5d91b85.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/455d429d71e0460c9edfe860d6d46617.png
[c94e613eb9c943bb8cf6ad2938126208.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/39e0b719433b4bfba6ada57c1dc43fd9.png
[5651b24b1a75432b9e10e545f7483fe4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/66d989a7ac4d447cb3fe214e28847f35.png
[9ece92f0d26d4846ac3de645b5ed2f03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/90c4cf184fa94826b6923cb128acd504.png
[ffd13b6bc6704f77a351f2e8eb0379aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/af5ddca7ca1c4551a318b64450efa213.png
[b22b6085160844759090a92ca26133db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/8f7aa810f1fe429b81b9182b9defa0e1.png
[a3244a3d75184da598f1c2ee10615594.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/0f45b058ed9340d19d7ddbe77d00a699.png
[63e9bd5c4d7b44fe8cc98410510141bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/293306cb18224f12ae4d37f3db7d7942.png
[0aca7fc62df840b29234b67227350762.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/000b6116f8a94910990510e8c0e9e3c1.png
[085f9dcc88ae4570b28d15e124f8540d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/bf90cf99093247b99206f52e880d7d12.png
[338d5bd0142749b99bb6c02e640fc834.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/8805e5e5f8fa4ecba846bc82e63b005b.png