使用 form 表单标签构造

1 构造 GET 请求

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

<body>
    <form action="https://www.sogou.com" method="get">
        <input type="text" name="studentName">
        <!-- 这是一个特殊的按钮，value的值就是按钮里的文本 -->
        <!-- 点击提交就是构造了一个 http 请求提交给了服务器 -->
        <input type="submit" value="提交">
    </form> 
</body>

点击提交后，使用 fiddler 抓包并观察结果。

上图中的 Get 就是代码中的 method 属性里的值，圈出的部分就是用户在输入框中输入的内容。

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

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

2 构造 POST 请求

post 请求与 get 请求的代码是一样的，只是 method 属性里的值要改为 post。

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 ，选择当前域名。

点击之后，在出现的页面选择当前的版本下载。

右键选择复制链接地址后打开

然后再将这个链接复制到 script 标签中的 src 属性中。

 <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

$.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>