构建HTTP请求

构建GET请求

构建Get请求可以有以下方式：
1.地址栏输入URL
2.html中的link，script，img，a
3.form标签

    <form action="https://www.baidu.com" method="get">
        <input type="text" name="name">
        <input type="submit" name="提交">
    </form>

在这里插入图片描述

form 代码和 HTTP 请求之间的对应关系：

form 的 action 属性对应 HTTP 请求的 URL
form 的 method 属性对应 HTTP 请求的方法
input 的 name 属性对应 query string 的 key
input 的内容对应 query string 的 value

构建POST请求

我们将刚才代码form中method改为POST

    <form action="https://www.baidu.com" method="post">
        <input type="text" name="name">
        <input type="submit" name="提交">
    </form>

在这里插入图片描述
form 代码和 HTTP 请求之间的对应关系：

在这里插入图片描述
我们POST和GET请求还是比较相似的，主要有以下区别：
1.mthod从GET变成POST
2.数据从query string移动到了body中

form表单只能构造GET和POST请求，无法构造PUT，DELETE，OPTIONS等方法的请求

ajax

前端处理浏览器地址栏能构造GET请求，form表单构造GET和POST之外，还可以通过ajax的方式来构造HTTP请求，功能更加强大

ajax：Asynchronous Javascript And XML, 一种 JavaScript 给服务器发送HTTP 请求的方式，这里是异步的，不需要刷新页面/页面跳转就可以进行数据传输
在这里插入图片描述
这就是一种典型应用场景。
如何使用ajax?
1.js提供了一组原生的ajax api，但是原生的api比较难用
2.jquery提供了ajax，是对原生api进行了封装，使用起来相对比较简单

我们首先引入jquery
在这里插入图片描述

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        $.ajax ({
      
      
            type: 'get',
            url: 'https://www.baidu.com/',
            success: function(data) {
      
      
                console.log(data);
            }
        });
    </script>