一、通过前端构造的三种方法：

1.1、通过浏览器自己构造

工具：浏览器；

打开你的浏览器，在地址栏里写url，按下回车，就可以构造出get请求；（如下图）

1.2、通过form表单构造

工具：vscode；

步骤一：在vscode中，创建html文件，构造一个form表单；（具体的如下代码）

<body>
    <form action="https://cn.bing.com/" method="get">
        <input type="text" name="a">
        <input type="text" name="b">
        <input type="submit" value="提交">
    </form>
</body>

解释：

form表单的关键作用是传递键值对
action是你选择的网页；
method是构造http请求的方法，这里只支持 get 和 post ；
input标签用来构造键值对数据，一个input的就是一个键值对，name表示“键”，用户输入的数据表示“值”，最后通过submit来提交，发送请求
若使用get方法，上述键值对就会存到url的query string中；若使用post方法，上述键值对就会放到body中（格式与query string一样）；

步骤二：打开HTML网页，输入你想输入的值；（如下图）

最后：网页跳转，地址栏（如下图）

1.3、通过ajax构造

工具：vscode，jquery第三方库；

最初ajax主要是借助HTTP传输xml，现在xml用的少了，因此ajax往往用来传输其他数据，例如json；

form表单构造的数据一定会出发页面跳转，时间慢，开销大，所以并不是一件好事，使用ajax就可以不触发跳转，达到“局部刷新”的效果；

步骤一：ajax api是浏览器自带的，原生api不太好用，所以可以使用第三方库，代替原生api；打开jquery官网（js中最知名的第三方库之一），复制script链接；

步骤二：输入以下代码；

    <script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url:'https://cn.bing.com/',
            success: function(body) {
                //服务器返回正确响应(状态码：200)，浏览器就会调用这个函数，处理响应；
                //参数body就是响应的正文
                console.log("OK~");//打印日志
            },
            error: function() {
                //服务器返回一个错误响应，浏览器就会调用error对应的函数
                console.log("error~");//打印日志
            }
        })
    </script>