文章目录

一、通过 form 表单构造 HTTP 请求
- 1.1 form 发送 GET 请求
- 1.2 form 发送 POST 请求
二、通过 ajax 构造 HTTP 请求
- 2.1 ajax 发送 GET 请求
- 2.2 ajax 发送POST 请求
- 2.3 关于 ajax
三、通过 Java socket 构造 HTTP 请求(了解)

一、通过 form 表单构造 HTTP 请求

form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求.注意不要把 form 拼写成 from!!

1.1 form 发送 GET 请求

form 的重要参数:

action: 构造的 HTTP 请求的 URL 是什么.
method: 构造的 HTTP 请求的方法是 GET 还是 POST (form 只支持 GET 和 POST).

input 的重要参数:
3. type: 表示输入框的类型. text 表示文本, password 表示密码, submit 表示提交按钮.
4. name: 表示构造出的 HTTP 请求的 query string 的 key. query string 的 value 就是输入框的用户输入的内容.
5. value: input 标签的值. 对于 type 为 submit 类型来说, value 就对应了按钮上显示的文本

代码示例：

<form action="http://abcdef.com/myPath" method="GET">
     <input type="text" name="userId">
     <input type="text" name="classId">
     <input type="submit" value="提交">
</form>

注意： 此时的name属性是描述当前输入框对应的key值是啥

页面展示效果，并填写数据：

在这里插入图片描述
点击 “提交”, 此时就会构造出 HTTP 请求并发送出去

构造的 HTTP 请求(参数放在了queryString中)：

在这里插入图片描述

注意: 由于我们的服务器的地址是随便写的, 因此无法获取到正确的 HTTP 响应，后面自己写的服务器就可以针对前端提交的参数来处理请求并返回响应

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

在这里插入图片描述

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

1.2 form 发送 POST 请求

修改上面的代码, 把 form 的 method 修改为 POST

其余效果不变，我们主要来看HTTP请求(参数放在body中)：

在这里插入图片描述

主要的区别:

method 从 GET 变成了 POST
数据从 query string 移动到了 body 中

二、通过 ajax 构造 HTTP 请求

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

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

注意: 如果要验证 ajax 的功能, 需要提前准备好一份配套的服务器程序

2.1 ajax 发送 GET 请求

引入jQuery：

1.先在搜索引擎搜索jQuery cdn 查询词 2.找到一个合适的cdn的url 3.打开对应的url，复制cdn本体 4.复制粘贴到jQuery.js的本地文件中 5.src这个jQuery.js 文件

创建 test.html，在< script > 标签中编写以下代码：

<body>
    <!--步骤：1.先在搜索引擎搜索jQuery cdn 查询词 2.找到一个合适的cdn的url 3.打开对应的url，复制cdn本体 4.复制粘贴到jQuery.js的本地文件中 5.src这个jQuery.js 文件-->
    <!--通过抓包会发现，http响应中 是200 ok，是获取到响应了的 但是浏览器还是会产生错误，因为浏览器禁止进行跨域访问-->
    <script src="jquery.js"></script>

    <script>
        $.ajax({
            type:'get',
            url:'http://www.sogou.com/index.html',
            success:function(body){
                //success 对应一个回调函数
                //这个函数会在正确获取到http响应之后来调用    就是所谓的异步
                //回调函数的参数就是 响应中的body
                console.log("获取到响应数据" + body);
            },
            error:function(){
                //error 也是一个回调函数，会在请求失败后调用
                console.log("获取响应失败");
            }
        });
    </script>
</body>

通过抓包来观察响应：

在这里插入图片描述

响应中是 200 ok，并且body中也是相关的html代码，但是上述代码大概率还是会报错.

错误形如:
在这里插入图片描述

这个错误是因为 ajax 默认不能 “跨域”, 当前这个test.html页面处在本地文件 .不能通过ajax 请求访问搜狗服务器的内容". 只有在同一个服务器地址中，ajax才能被正确处理…如果想要强行进行跨域, 则需要服务器进行配合, 在服务器的响应中设置 “允许跨域” 才可以.

2.2 ajax 发送POST 请求

对于 POST 请求, 需要设置 body 的内容，设置contentType

<!--以下是在前端中构建post请求：body为json格式。然后在后端通过Jackson来读取body中的数据-->
    <input type="text" id="userId">
    <input type="text" id="classId">
    <input type="button" value="提交" id="submit">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
        let userIdInput = document.querySelector('#userId');
        let classIdInput = document.querySelector('#classId');
        let button = document.querySelector('#submit');

        button.onclick = function(){
            $.ajax({
                type:'post',
                url:'postJson',
                contentType: 'application/json',
                //post这样的请求，ajax允许用data来构造请求的body部分（此时构造的其实是一个js对象，通过JSON.stringfy将这个js对象转换成一个json格式的字符串）
                data:JSON.stringify({          
                    userId:userIdInput.value,
                    classId:classIdInput.value
                }),
                success:function(body){
                    console.log(body);
                }
            })
        }
    </script>
</body>

2.3 关于 ajax

前面通过form表单来构造请求是更加原始的方法，使用form表单一定会涉及到 页面跳转，即浏览器会加载出全新的页面，这显然是不合理的。我们只希望加载其中变化的小部分，这时我们就可以使用ajax了.

通过ajax来构造出http请求，再通过js代码以回调函数的方式来处理这里的响应，并把得到的数据更新到页面上，从而不需要加载出新的页面

ajax 全称 Asynchronous Javascript And XML，即异步编程！那啥是异步呢？调用者发起一个请求后就不管了，等待被调用者结果出来之后主动来通知调用者

举个例子：

我去饭店吃饭，点完菜之后就去找个位置坐下啥也不管了，等菜好了就直接给我端上来了

有异步那就肯定有同步，这里简单介绍下同步。同步等待中分为阻塞式的和非阻塞式的.接着上面的例子，同步阻塞即我点完菜就一直等着直到菜做好端走，而同步非阻塞即我点完菜后，一会儿干其他事，一会儿又跑回来看看菜做好了没

三、通过 Java socket 构造 HTTP 请求(了解)

所谓 “发送 HTTP 请求”, 本质上就是按照 HTTP 的格式往 TCP Socket 中写入一个字符串.

所谓 “接受 HTTP 响应”, 本质上就是从 TCP Socket 中读取一个字符串, 再按照 HTTP 格式来解析.

基于 Socket 的知识, 可以构造出一个简单的 HTTP 客户端程序, 用来发送各种类型的 HTTP 请求

public class HttpClient {
    private Socket socket;
    private String ip;
    private int port;
    public HttpClient(String ip, int port) throws IOException {
        this.ip = ip;
        this.port = port;
        socket = new Socket(ip, port);
    }
    public String get(String url) throws IOException {
        StringBuilder request = new StringBuilder();
        // 构造首行
        request.append("GET " + url + " HTTP/1.1\n");
        // 构造 header
        request.append("Host: " + ip + ":" + port + "\n");
        // 构造 空行
        request.append("\n");
        // 发送数据
        OutputStream outputStream = socket.getOutputStream();
        outputStream.write(request.toString().getBytes());
        // 读取响应数据
        InputStream inputStream = socket.getInputStream();
        byte[] buffer = new byte[1024 * 1024];
        int n = inputStream.read(buffer);
        return new String(buffer, 0, n, "utf-8");
    }
    public String post(String url, String body) throws IOException {
        StringBuilder request = new StringBuilder();
        // 构造首行
        request.append("POST " + url + " HTTP/1.1\n");
        // 构造 header
        request.append("Host: " + ip + ":" + port + "\n");
        request.append("Content-Length: " + body.getBytes().length + "\n");
        request.append("Content-Type: text/plain\n");
        // 构造 空行
        request.append("\n");
        // 构造 body
        request.append(body);
        // 发送数据
        OutputStream outputStream = socket.getOutputStream();
        outputStream.write(request.toString().getBytes());
        // 读取响应数据
        InputStream inputStream = socket.getInputStream();
        byte[] buffer = new byte[1024 * 1024];
        int n = inputStream.read(buffer);
        return new String(buffer, 0, n, "utf-8");
    }
    public static void main(String[] args) throws IOException {
        HttpClient httpClient = new HttpClient("42.192.83.143", 8080);
        String getResp = httpClient.get("/AjaxMockServer/info");
        System.out.println(getResp);
        String postResp = httpClient.post("/AjaxMockServer/info", "this is body");
                System.out.println(postResp);
    }
}

使用 Java 构造的 HTTP 客户端不再有 “跨域” 限制了, 此时也可以用来获取其他服务器的数据了

HttpClient httpClient = new HttpClient(“www.sogou.com”, 80);
String resp = httpClient.get(“/index.html”);
System.out.println(resp);
// 此时可以获取到搜狗主页的 html

注意： 跨域只是浏览器的行为, 对于 ajax 有效. 对于其他语言来说一般都和跨域无关