一、浏览器自己构造

1）地址栏里写URL，构造出GET请求
2）点击a标签等，也会构造GET请求
3）img、link、script也会构造GET请求

二、通过 form 表单构造

form (表单) 是 HTML 中的一个常用标签。可以用于给服务器发送 GET 或者 POST 请求。

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 就对应了按钮上显示的文本

在VSCode中编写form.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form</title>
</head>
<body>
    <form action="https://www.sogou.com" method="get">
        <input type="text" name="aa">
        <input type="text" name="bb">
        <input type="submit" value="提交">
    </form>
</body>
</html>

打开form.html文件，在输入框随便填写数据：
在这里插入图片描述
点击 “提交”，此时就会构造出 HTTP 请求并发送出去~~

此时打开的页面：
在这里插入图片描述
就把键值对构造到查询字符串(query string)中了！！！

在这里插入图片描述

form最关键的作用，就是给服务器传键值对！

三、通过 ajax 构造

从前端角度，除了浏览器地址栏能构造 GET 请求，form 表单能构造 GET 和 POST 之外，还可以通过 ajax 的方式来构造 HTTP 请求，并且功能更强大！

ajax 全称 Asynchronous Javascript And XML，是 2005 年提出的一种 JavaScript 给服务器发送 HTTP 请求的方式。
特点是可以不需要刷新页面 / 页面跳转就能进行数据传输。
页面跳转不是一个好事：开销大、时间慢、用户就得等，使用ajax不去触发跳转就可以达到 “局部刷新” 这样的效果 ~~

Asynchronous (异步)：
是不是觉得很眼熟？之前学习多线程时有一个重要的锁：synchronized，同时也是 “同步” 的意思。
"同步"有两层含义，彼此之间没有联系：

指 “互斥”：多线程锁 synchronized；
谁发起的请求，谁负责接收结果：在网络通信 / IO操作的时候涉及到。

异步，是与第2个同步相对的，表示的是：发起请求的主体，不负责接受结果，而是由别人主动推送过来。
(举个快餐店的例子：同步相当于我点的单，我自己把饭端走；异步相当于我点的单，服务员把饭端上来了)

在 JavaScript 中可以通过 ajax 的方式构造 HTTP 请求：

ajax API 是属于浏览器原生自带的，但原生的API不太好用。因此，就可以使用第三方库封装好的API来代替原生的API。这里我们使用 jquery (js圈子里最知名的第三方库之一) ~~

可以直接通过网络地址把 jquery 引入到代码中：http://libs.baidu.com/jquery/2.0.0/jquery.min.js

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url: 'https://www.sogou.com',
            // data: 'http 请求的 body',       // post请求加上
            // contentType: 'x-www-form-urlencoded',   // post请求加上
            success: function(body) {
                // 服务器返回一个正确的响应 (200)
                // 就会由浏览器调用这个 success 对应的函数，来处理响应
                // 参数 body 就是响应的正文
                console.log("ok");
            },
            error: function() { 
                // 服务器返回一个错误的响应
                // 就会由浏览器调用这个 error 对应的函数
                console.log("error");
            }
        });
    </script>
</body>
</html>