如何构造 HTTP 请求？

RRrrric.

于 2023-03-20 18:39:38 发布

阅读量518

点赞数

文章标签： http ajax javascript

本文链接：https://blog.csdn.net/qq_58299006/article/details/129669586

版权

本文介绍了如何通过HTMLform表单创建GET和POST请求，以及利用JavaScript的Ajax进行更复杂的HTTP请求，包括支持PUT、DELETE等方法，并强调Ajax的异步特性。此外，还讲解了第三方工具Postman的下载安装和使用，它能方便地构造和测试各种HTTP请求，并自动生成对应代码。

摘要由CSDN通过智能技术生成

❣️关注专栏： JavaEE

这里写目录标题

🍧1 通过 form 表单构造 HTTP 请求
- 🍨 1.1 form 发送 GET 请求
- 🍨 1.2 form 发送 POST 请求
🍧 2 通过 ajax 构造 HTTP 请求
- 🍨 2.1 js 提供的原生的 ajax 的 API
🍧 3 使用第三方工具 postman
- 🍨 3.1 下载安装
- 🍨 3.1 使用

🍧1 通过 form 表单构造 HTTP 请求

form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求。注意！！是 form 不是 from！！！
对于 GET 请求的构造有以下几种：

地址栏直接输入
点击收藏夹里收藏的网页进入
通过 html 中的 link、script、img、a 标签…
通过 form 标签发送
form 标签只能构造 GET 和 POST，无法构造 PUT，DELETE，OPTIONS 等方法的请求。

🍨 1.1 form 发送 GET 请求

构造 GET 请求，在 VSCode 中新建一个html，并且在 body 中编写以下代码并且执行：

<body>
    <!-- 表单标签：允许用户和服务器之间进行数据交互 -->
    <!-- 要求提交的数据以键值对的结构来组织 -->
    <form action="https://www.sogou.com" method="get">
        <input type="text" name="studentName">
        <!-- input type=submit 构造了一个特殊的提交按钮，value 属性描述了按钮的文本-->
        <!-- 点击这个按钮就会触发该 form 表单的“提交操作”，也就是构造 http 请求发给服务器 -->
        <input type="submit" value="提交">
    </form>
</body>

执行页面之后，输入 haha（也可以不输入直接提交），提交：在这里插入图片描述
通过 fiddler 抓包可以看到对应关系：

对应的关系如下：

🍨 1.2 form 发送 POST 请求

步骤和上边一样，只是将代码中的 method=“get” 改为 method=“post” 即可。抓包如下：
在这里插入图片描述

🍧 2 通过 ajax 构造 HTTP 请求

通过 ajax 的方式来构造 HTTP 请求，功能更强大。 ajax 也是浏览器的一种，是通过 js 来构造 http 请求的。和 form 相比，ajax 的功能更强，体现在：
（1）支持 put、delete 等方法。
（2）ajax 发送的请求可以灵活设置 header。
（3）ajax 发送的请求的 body 也是可以灵活设置的。

🍨 2.1 js 提供的原生的 ajax 的 API

jquery 中，$ 是一个特殊的全局对象，jquery 中的 api 都是通过 $ 的形式来引出的

<body>
    <!-- 引入 jquery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        // 只有一个参数，是js对象，（）里边表示的都是键值对
        $.ajax ({
            type:'get',
            url:'https://www.sogou.com?studentName=zhangsan',
            // 此处的 succes 就声明了一个回调函数，就会在服务器响应返回浏览器的时候触发该回调函数
            // 正是此处的 回调 体现了 “异步”
            success:function(data) {
                // data 则是响应的正文
                console.log("当前服务器返回的响应到达浏览器之后，浏览器触发该回调，通知到咱们的代码中")
            }
        });
        console.log("浏览器立即往下执行后续代码");
    </script>
</body>