【HTTP协议】—— 四种构造HTTP请求的方法(附代码)_html pc怎么搭建底层请求数据-CSDN博客

本文链接：https://blog.csdn.net/The_emperoor_man/article/details/131864834

文章目录

前言
一、地址栏输入URL
二、HTML特殊标签
三、form表单
- GET请求
- POST请求
四、ajax
总结

前言

本人是一个普通程序猿!分享一点自己的见解,如果有错误的地方欢迎各位大佬莅临指导,如果你也对编程感兴趣的话，互关一下，以后互相学习，共同进步。这篇文章能够帮助到你的话,劳请大家点赞转发支持一下!

一、地址栏输入URL

直接在浏览器地址栏中输入一个URL ，就会构造出一个HTTP请求，这个HTTP请求只能是 GET请求。

示例

回车，跳转到 “搜狗搜索” 网页。

使用Fiddler抓到HTTP请求。

二、HTML特殊标签

html中的一些特殊标签，可以构造出HTTP请求，但是这个HTTP请求只能是 GET请求。

可触发GET的特殊标签
1️⃣link
2️⃣script
3️⃣img
4️⃣a

前提条件：这些标签访问的是网络资源，才会触发GET请求，访问本地资源不触发。

a标签举例
一切从简，不搞花里胡哨。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签构造GET请求</title>
</head>
<body>
    <!-- 超链接，放的是我CSDN的个人主页 -->
    <a href="https://blog.csdn.net/The_emperoor_man?type=blog">CSDN主页</a>
</body>
</html>

点击超链接跳转到我的个人主页。
使用Fiddler抓到HTTP请求。

三、form表单

html中的form表单，可以构造出HTTP请求，而且这个HTTP请求只能是 GET请求或者POST请求。

form的重要参数：

action：构造的 HTTP 请求的 URL。
method：构造的 HTTP 请求的方法是 GET 还是 POST (form 只支持 GET 和 POST)

input的重要参数：

type:表示输入框的类型，text 表示文本，password 表示密码，submit 表示提交按钮。
name：name表示HTTP请求中的键值对中的key，键值对中的value就是输入框用户输入的内容。键值对在GET请求中放在了URL中的query string(查询字符串)；在POST请求中放到了body中。
value: input 标签的值，对于 type 为 submit 类型来说，value 就对应了按钮上显示的文本。

GET请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form标签构造GET请求</title>
</head>
<body>
    <!-- action表示要访问的URL，method表示请求方法 -->
    <form action="https://www.sogou.com/abc/def" method="GET">
        <input type="text" name="qwe">
        <input type="text" name="rty">
        <input type="submit" value="提交">
    </form>
</body>
</html>

服务器上不存在咱们随便输入的资源，所以会返回404状态码。但是这个HTTP请求也发送出去了。
使用Fiddler抓到GET请求。
此时form标签内的两个input表中的 “name” 与咱们 “输入的数据” ，分别组成了键值对" ，对应URL中的查询字符串。

POST请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form标签构造POST请求</title>
</head>
<body>
    <!-- action表示要访问的URL，method表示请求方法 -->
    <form action="https://www.sogou.com/abc/def" method="POST">
        <input type="text" name="qwe">
        <input type="text" name="rty">
        <input type="submit" value="提交">
    </form>
</body>
</html>

服务器上不存在咱们随便输入的资源，所以会返回404状态码。但是这个HTTP请求也发送出去了。
使用Fiddler抓到POST请求。
此时form标签内的两个input表中的 “name” 与咱们 “输入的数据” ，分别组成了键值对" ，对应body 。

四、ajax

ajax是目前前后端最主流的交互方式之一。

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

ajax是前端和后端，异步交互的一种方式。

Asynchronous是异步的意思，他的反义词是同步。
对于同步异步在不同的场景下，又有不同的理解。
多线程场景下
同步：多个线程可以同时访问同一个数据。
异步：这个数据加锁(synchronized)之后就由同步变异步了,此时多个线程禁止同时访问同一个数据。

IO场景下
同步：请求的发起者，不会再发出下一个请求，而是回一直等待这个响应，收到响应后，才会发出下一个请求。
异步：请求的发起者不关心响应，依旧该发下一个请求就发，被请求者计算出响应后，把响应发送给发起者后，发起者再回过头来处理响应。

jQuery提供的ajax API
JavaScript提供了原生的ajax的API，但是不好用。
这里我们使用jQuery提供的ajax API。

我们采用 $.ajax()。

常用属性介绍
url：链接地址，字符串表示。
type：“POST” 或 “GET”，请求类型；可设置成HTTP请求的任意类型。
contentType：请求中body的数据格式
data：请求中body中的内容，要与dataType选择的格式相同。
dataType：响应中数据的格式，字符串表示。
success：请求成功后，服务器回调的函数。
async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>
    <script>
        $.ajax ({
            // URL
            url:"https://www.sogou.com",
            // 请求类型
            type:"POST",
            // 回调函数，发起者，收到响应后，再回来执行的函数
            success:function(body) {
                // 写处理响应的代码
            }
        });
    </script>
</body>
</html>