前端构造 HTTP 请求的四种方法

本文涉及的产品
.cn 域名,1个 12个月
简介: 前端构造 HTTP 请求的四种方法

一、通过 form 表单构造 HTTP 请求(常用)



通过 form 表单构造 HTTP 请求,需要写在一个 html 文件内。

使用 form 标签 + input 标签,两者配合。


展示1


<body>
    <form action="https://www.baidu.com" method="GET">
        <input type="text" name="ClassID" >
        <input type="text" name="StudentID">
        <input type="submit" value="提交">
    </form>
</body>


展示结果:


76b2a16506a64583958c9b71f28469e9.png


展示2


<body>
    <form action="https://www.baidu.com" method="POST">
        <input type="text" name="ClassID" >
        <input type="text" name="StudentID">
        <input type="submit" value="提交">
    </form>
</body>


展示结果:


2db9048ba08b4e8abac020b7b2aea80d.png


总结


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


二、通过 ajax 构造 HTTP 请求(常用)



1. ajax 背景


ajax:Asynchronous JavaScript and XML


ajax 是 是 2005 年提出的一种 JavaScript 给服务器发送 HTTP 请求的方式。

其中,Asynchronous 表示异步的意思。


备注:


由于 ajax 的原生用法较为麻烦,工作中也不太可能用到,所以,我们就通过 JS 引入第三方库 jQuery. jQuery 其实是一个功能非常全面的库,它对 DOM API 进行了非常好的封装。我们只需要在 JS 代码中,引入 jQuery 所在的网络地址,就能直接使用,当然,如果下载到本地,也是可以使用的。(这种方式较为稳定,更为推荐)


jQuery:JavaScript 中最知名,最广泛使用的第三方库之一。


2. ajax 构造请求的代码格式


<body>
    <!-- 引入 jQuery -->
    <script src="js/jquery.min.js"></script></script>
    <script>
        //ajax 方法传参传的是一个大括号对象
        $.ajax({
           // url 中填写需要访问的服务器地址
           url: '', 
           //这就表示一个 GET 方法
           method: 'GET', 
           //data 就是响应的 body,status 就是响应的状态码
           success: function(data, status) {
           } 
           error: function(data, status) {
            }
        });
    </script>
</body>


分析上面的代码:


① $ 表示 jQuery 中已经定义好的一个对象 / 变量,虽然美元符号看上去很奇怪,但它语法上确实能作为一个变量。

② ajax 是一个方法,往这个方法传参传的是一个大括号对象,其中包含了 type, url…

③ type 表示 HTTP 请求中,首行的请求方法的类型,GET / POST / PUT… 此外,method 也可以表示各种各样的方法,和 type 的作用一样


⑤ url 中填写需要访问的服务器地址


⑥ success 表示请求成功的回调函数,即并非自己调用,等浏览器自动来调用,在 success 这个回调函数中,一般都是用来展示最后的 html 页面,即前端开发人员决定在这里面实现什么给用户看。


⑦ 上面是通过 jQuery 库,来实现 ajax 构造 HTTP 请求的基本格式,这里没办法展示,因为,url 中需要填写和代码配合的服务器,否则就会出错。


⑧ 在浏览器页面加载过程中,是可以同时发起多个 ajax 请求的,此时这多个 ajax 请求相当于是一个并发执行的关系。


3. 理解 success 回调函数


① 关于 success 这个回调函数:顾名思义,它表示从客户端发送 HTTP 请求成功后,浏览器调用此函数。一般来说,success 其实就意味着 HTTP 响应的状态码是 200. 也就是说,只有 HTTP 请求发送成功后,success 才能被浏览器执行。

② 回调函数并不是自己调用,而是让浏览器在合适的时机自己调用的,这一点需要格外注意。

③ 一般来说,success 这个回调函数中,需要写入的业务逻辑,一般就是为了展示给用户观看的内容。即前端开发人员决定在这里面实现什么给用户看。


问1:那么业务逻辑的数据从哪来?

答:业务逻辑的数据就是从 success 函数中,传入的参数 data 中获取到的。


问2:那么 data 从哪来?

答:data 就是从 HTTP 响应的正文 body 来获取的。


问3:正文 body 又从哪来?

答:HTTP 响应的正文 body 其实就是服务器端的代码构造的,常用的就是 json 格式数据,因为 json 格式的数据是可以将很多复杂的文本组合在一起。所以,后端的开发人员,一般通过将 Java 对象转换成 json 格式的数据,放到 响应的 body 中。


4. error 回调函数


上面说到,success 一般对应着 状态码 200,而 error 一般对应着 除 200 之外的状态码 ( 例如 403 权限状态码 )。


因为顾名思义,在回调函数的业务逻辑中,就是用来处理【客户端发送 HTTP 请求失败的情况】,这些情况可能是路径问题,可能是密码错误问题,也可能是用户权限问题等等…


5. ajax 跨域问题 (了解)


另外,上面的代码还会出现跨域问题。因为 ajax 为了保证安全性,要求发起 ajax 请求的页面和接收 ajax 请求的服务器,应该在同一个域名 / 地址下。


假设,发起请求的页面对应的域名为域名1,接收ajax 请求的服务器的域名为域名2,如果 域名1 和 域名2 不相同,就认为是一次跨域请求。

比方说:百度下面的 html 中的 ajax 就不能访问 搜狗 的服务器。这就好像是串台了一样…


而上面的代码是在本地编辑的代码,如果真的需要和服务器配合,那么,服务器端就需要在响应中,通过代码加上一些 header 响应报头,做出解除跨域的限制,在这之后,客户端才能与服务器进行正常的交互。


三、通过 Postman 软件来构造请求(推荐)



1. 一个简单的前后端交互


Postman 是一个软件,感兴趣的小伙伴可以自己下载看一看,一用就会。

利用 Postman 软件构造前端请求:


6c2e5168514640fb823230d31a7eba8a.png


创建一个 Spring Boot 项目构造后端代码:


@Controller
public class TestController {
    @ResponseBody
    @RequestMapping("/hi")
    public String hello() {
        return "Hi, postman!";
    }
}


2. Postman 的软件功能


① 可以构造多种 HTTP 方法

② 可以保存曾经访问的 URL

③ 可以按照自己的需求,发送不同格式的正文 ( json / form-data…)

④ 可以自定义 header 请求头


四、通过 Java socket 构造 HTTP 请求(用的极少)



所谓 " 发送 HTTP 请求 ",本质上就是按照 HTTP 的格式往 TCP Socket 中写入一个字符串。所谓 "接收 HTTP 响应 ",本质上就是从 TCP Socket 中读取一个字符串,再按照 HTTP 的格式来解析。我们可以基于 Socket 的知识,构造出一个简单的 HTTP 客户端程序,用来发送各种类型的 HTTP 请求。


所以,只要我们理解了 HTTP 协议的请求和响应格式,就明白,协议本身就是一个拼接字符串的效果,而使用 Java 代码写出来的原理也是拼接字符串。


import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.Socket;
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);
    }
    /**
     * 模拟 GET 方法
     */
    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");
        //GET 请求中,一般没有 body 正文
        // 发送数据
        OutputStream outputStream = socket.getOutputStream();
        // 由于 outputStream 是一个字节流,以字节单位写入
        // 所以需要把 StingBuilder 类型转换成 String 类型,再转换成 byte[]
        outputStream.write(request.toString().getBytes());
        // 读取响应数据
        InputStream inputStream = socket.getInputStream();
        // 创建一个 1M 大小的缓冲区,用来存放响应数据
        byte[] buffer = new byte[1024 * 1024];
        int n = inputStream.read(buffer);
        return new String(buffer, 0, n, "utf-8");
    }
    /**
     * 模拟 POST 方法
     */
    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("123",8080); //这里需要指定需要访问服务器的 IP 和 端口
        String getResp = httpClient.get(""); //填写请求的 url
        System.out.println(getResp);
        String postResp = httpClient.post("", "this is body"); //填写请求的 url 和 body 正文
                System.out.println(postResp);
    }
}


另外,使用 Java 构造的 HTTP ,客户端不再有 " 跨域 " 的限制了,此时客户端也可以获取其他服务器的数据了。跨域只是浏览器的行为,对于 ajax 有效,而对于其他语言来说,一般都和跨域无关。

目录
相关文章
|
5天前
|
缓存 应用服务中间件 Apache
HTTP 范围Range请求
HTTP范围请求是一种强大的技术,允许客户端请求资源的部分内容,提高了传输效率和用户体验。通过正确配置服务器和实现范围请求,可以在视频流、断点续传下载等场景中发挥重要作用。希望本文提供的详细介绍和示例代码能帮助您更好地理解和应用这一技术。
44 19
|
13天前
|
JSON JavaScript 前端开发
什么是HTTP POST请求?初学者指南与示范
HTTP POST请求是一种常用的HTTP方法,主要用于向服务器发送数据。通过合理设置请求头和请求主体,可以实现数据的可靠传输。无论是在客户端使用JavaScript,还是在服务器端使用Node.js,理解和掌握POST请求的工作原理和应用场景,对于Web开发至关重要。
136 18
|
12天前
|
JSON 数据格式
.net HTTP请求类封装
`HttpRequestHelper` 是一个用于简化 HTTP 请求的辅助类,支持发送 GET 和 POST 请求。它使用 `HttpClient` 发起请求,并通过 `Newtonsoft.Json` 处理 JSON 数据。示例展示了如何使用该类发送请求并处理响应。注意事项包括:简单的错误处理、需安装 `Newtonsoft.Json` 依赖,以及建议重用 `HttpClient` 实例以优化性能。
54 2
|
30天前
|
Web App开发 大数据 应用服务中间件
什么是 HTTP Range请求(范围请求)
HTTP Range 请求是一种非常有用的 HTTP 功能,允许客户端请求资源的特定部分,从而提高传输效率和用户体验。通过合理使用 Range 请求,可以实现断点续传、视频流播放和按需加载等功能。了解并掌握 HTTP Range 请求的工作原理和应用场景,对开发高效的网络应用至关重要。
66 15
|
25天前
|
安全 网络安全 数据安全/隐私保护
内网/局域网IP地址申请https证书方法
为内网/局域网IP地址申请HTTPS证书,可增强数据传输的安全性。首先确定固定的内网IP地址,选择可信的证书颁发机构,注册并申请免费或付费SSL证书,提交相关信息,支付费用(如有)。证书申请成功后,下载并配置于服务器,确保通过浏览器访问时显示为安全连接。注意定期更新证书,确保持续的安全保障。此过程适用于局域网内部通信加密,提升内网服务的安全水平。
|
安全 中间件
不安全的HTTP方法
检查原始测试响应的“Allow”头,并验证是否包含下列一个或多个不需要的选项:DELTE,SEARCE,COPY,MOVE,PROPFIND,PROPPATCH,MKCOL,LOCK,UNLOCK,PUT
737 0
不安全的HTTP方法
|
4月前
|
监控 安全 搜索推荐
设置 HTTPS 协议以确保数据传输的安全性
设置 HTTPS 协议以确保数据传输的安全性
|
14天前
|
网络协议 安全 网络安全
探索网络模型与协议:从OSI到HTTPs的原理解析
OSI七层网络模型和TCP/IP四层模型是理解和设计计算机网络的框架。OSI模型包括物理层、数据链路层、网络层、传输层、会话层、表示层和应用层,而TCP/IP模型则简化为链路层、网络层、传输层和 HTTPS协议基于HTTP并通过TLS/SSL加密数据,确保安全传输。其连接过程涉及TCP三次握手、SSL证书验证、对称密钥交换等步骤,以保障通信的安全性和完整性。数字信封技术使用非对称加密和数字证书确保数据的机密性和身份认证。 浏览器通过Https访问网站的过程包括输入网址、DNS解析、建立TCP连接、发送HTTPS请求、接收响应、验证证书和解析网页内容等步骤,确保用户与服务器之间的安全通信。
62 1
|
2月前
|
安全 搜索推荐 网络安全
HTTPS协议是**一种通过计算机网络进行安全通信的传输协议
HTTPS协议是**一种通过计算机网络进行安全通信的传输协议
75 11
|
2月前
|
缓存 安全 网络协议
HTTPS协议的历史发展
HTTPS协议的历史发展
50 8