前端构造 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 有效,而对于其他语言来说,一般都和跨域无关。

目录
相关文章
|
15天前
|
数据采集
Haskell爬虫:连接管理与HTTP请求性能
Haskell爬虫:连接管理与HTTP请求性能
|
7天前
|
JSON JavaScript 前端开发
Haskell中的数据交换:通过http-conduit发送JSON请求
Haskell中的数据交换:通过http-conduit发送JSON请求
|
9天前
|
JSON API 开发者
Python网络编程新纪元:urllib与requests库,让你的HTTP请求无所不能
【9月更文挑战第9天】随着互联网的发展,网络编程成为现代软件开发的关键部分。Python凭借简洁、易读及强大的特性,在该领域展现出独特魅力。本文介绍了Python标准库中的`urllib`和第三方库`requests`在处理HTTP请求方面的优势。`urllib`虽API底层但功能全面,适用于深入控制HTTP请求;而`requests`则以简洁的API和人性化设计著称,使HTTP请求变得简单高效。两者互补共存,共同推动Python网络编程进入全新纪元,无论初学者还是资深开发者都能从中受益。
27 7
|
7天前
|
开发者
HTTP状态码是由网页服务器返回的三位数字响应代码,用于表示请求的处理结果和状态
HTTP状态码是由网页服务器返回的三位数字响应代码,用于表示请求的处理结果和状态
11 1
|
10天前
|
存储 JSON API
Python编程:解析HTTP请求返回的JSON数据
使用Python处理HTTP请求和解析JSON数据既直接又高效。`requests`库的简洁性和强大功能使得发送请求、接收和解析响应变得异常简单。以上步骤和示例提供了一个基础的框架,可以根据你的具体需求进行调整和扩展。通过合适的异常处理,你的代码将更加健壮和可靠,为用户提供更加流畅的体验。
28 0
|
Web App开发 存储 前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
      前段时间公司hadoop集群宕机,发现是namenode磁盘满了, 清理出部分空间后,重启集群时,重启失败。 又发现集群Secondary namenode 服务也恰恰坏掉,导致所有的操作log持续写入edits.new 文件,等集群宕机的时候文件大小已经达到了丧心病狂的70G+..重启集群报错 加载edits文件失败。
895 0
|
Web App开发 前端开发 Android开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
使用MAT分析内存泄露 对于大型服务端应用程序来说,有些内存泄露问题很难在测试阶段发现,此时就需要分析JVM Heap Dump文件来找出问题。
771 0
|
Web App开发 监控 前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
系统的升级涉及各个架构组件,细节很多。常年累月的修修补补使老系统积累了很多问题。 系统升级则意味着需要repair之前埋下的雷,那为何还要升级,可以考虑以下几个方面 成熟老系统常见问题: 1. 缺乏文档(这应该是大小公司都存在的问题。
615 0
|
Web App开发 监控 前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
Datanode的日志中看到: 10/12/14 20:10:31 INFO hdfs.DFSClient: Could not obtain block blk_XXXXXXXXXXXXXXXXXXXXXX_YYYYYYYY from any node: java.
684 0
|
存储 监控 数据库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
为首次部署MongoDB做好准备:容量计划和监控 作者Mat Keep ,译者孙镜涛如果你已经完成了自己新的MongoDB应用程序的开发,并且现在正准备将它部署进产品中,那么你和你的运营团队需要讨论一些关键的问题: 最佳部署实践是什么? 为了确保应用程序满足它所必须的服务层次我们需要监控哪些关键指标? 如何能够确定添加分片的时机? 有哪些工具可以对数据库进行备份和恢复? 怎样才能安全地访问所有新的实时大数据? 本文介绍了硬件选择、扩展、HA和监控。
2589 0

热门文章

最新文章