【网络知识必知必会】构造HTTP请求的几种方法

news2024/11/24 13:08:09

文章目录

  • 前言
  • 1. 通过 form 表单构造 HTTP 请求
    • 1.1 HTML 编程
    • 1.2 认识下 HTML
    • 1.3 form 发送 GET 请求
      • form 的重要参数:
      • input 的重要参数:
      • 使用 Fiddler 查看我们构造的 HTTP 请求
      • 体会 form 代码和 HTTP 请求之间的对应关系
    • 1.4 form 发送 POST 请求
      • 使用 Fiddler 查看我们构造的 HTTP 请求
  • 2. 通过 Ajax 构造 HTTP 请求
    • 2.1 认识一下 jQuery
    • 2.2 Ajax 发送 POST 请求
      • 几个重要参数
      • 使用 Fiddler 查看我们构造的 HTTP 请求
      • 体会 ajax 代码和 HTTP 请求之间的对应关系
  • 3. 通过 Java socket 构造 HTTP 请求
    • 3.1 构造一个 GET 方法
    • 3.2 构造一个 POST 方法
    • 3.3 一个完整的 HTTP 客户端程序
  • 4. 借助第三方工具来构造 HTTP 请求
  • 总结


前言

在上篇文章中, 我们花大量篇幅去讲述了HTTP协议, 读者在看完后应该对HTTP协议会有比较深的了解, 而在实际开发中, 还经常需要程序员手动构造一些 HTTP 协议的请求出来, 接着上文内容, 本篇文章我们来讲一讲如何自己构造一个HTTP请求.

回顾HTTP协议

关注收藏, 开始学习吧🧐


1. 通过 form 表单构造 HTTP 请求

form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求.

1.1 HTML 编程

HTML 也是一种编程语言, 和我们习惯使用的 Java, C 风格差异很大.

  • HTML 更多面向前端代码(用户可以直接看到的), 可以理解它是在描述一种 “形态”, 一个网页上都有哪些内容, 布局是怎样的.
  • 而 Java 是编写后端代码的语言(用户看不到的), 是在描述一种动作上的 “逻辑”, 先干什么, 后干什么. (绝大多数编程语言都是在干这个事情).
  • 编写 HTML 过程要比写 Java 代码要方便很多. 不需要任何的编译环境, 也不需要什么 jdk 之类的东西, 只要电脑上装有浏览器就可以运行.

提供一个学习 HTML 的网址. 菜鸟教程.

介绍几个编写前端代码可使用的开发工具

  1. IDEA.
    IDEA 社区版仅支持 HTML, 但是不支持 CSS 和 JS, 只有 IDEA 专业版才可以支持. 但专业版是需要付费的, 请读者自行考虑(学生的话申请学生许可, 可免费使用).
    IDEA官网
  2. VScode
    想必很多读者都听说过这个强大的开发工具, 对, 他是可以白嫖的! 并且还有很多可选插件, 是前端编程的首选.
    VScode官网
  3. WebStorm
    性质与 IDEA 相同, 专门用来开发前端代码的工具.
  4. Sublime Text
    轻量级开发工具, 也很实用.

1.2 认识下 HTML

HTML 编程语言非常有特点, 足以让你过目不忘. 使用 VSCode 演示.

  1. 全部由标签构成, 标签可以成对出现, 也可以单独出现.
  2. 标签内部可以进行嵌套, 形成多种不同结构.
  3. 标签的种类有很多, 不同的标签有不同的含义.

一段 HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>hello HTML!</div>
</body>
</html>

在这里插入图片描述

1.3 form 发送 GET 请求

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 就对应了按钮上显示的文本.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://abcdef.com/myPath" method="get">
        <input type="text" name="userId">
        <input type="text" name="classId">
        <input type="submit" value="提交">
    </form>
</body>
</html>

页面展示的效果:

在这里插入图片描述

在输入框随便填写一些数据.

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

使用 Fiddler 查看我们构造的 HTTP 请求

GET http://abcdef.com/myPath?userId=aaa&classId=111 HTTP/1.1
Host: abcdef.com
Proxy-Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

当前由于我们的服务器的地址是随便写的, 因此无法获取到正确的 HTTP 响应.

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

在这里插入图片描述

  • form 的 action 属性对应 HTTP 请求的 URL.
  • form 的 method 属性对应 HTTP 请求的方法.
  • input 的 name 属性对应 query string 的 key.
  • 在网页中输入 input 中的内容对应 query string 的 value.

1.4 form 发送 POST 请求

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://abcdef.com/myPath" method="post">
        <input type="text" name="userId">
        <input type="text" name="classId">
        <input type="submit" value="提交">
    </form>
</body>
</html>

页面效果保持不变.

在这里插入图片描述

使用 Fiddler 查看我们构造的 HTTP 请求

POST http://abcdef.com/myPath HTTP/1.1
Host: abcdef.com
Proxy-Connection: keep-alive
Content-Length: 22
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: null
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

userId=aaa&classId=111

我们可以看到 POST 和 GET 的主要的区别:

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

2. 通过 Ajax 构造 HTTP 请求

现在更经常使用 Ajax 的方式来构造 HTTP 请求. 功能更加强大.

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

Ajax 是 js 提供的一组 api. 但是 js 原生的 Ajax api, 非常难用. js 世界中, 有一个非常知名的第三方库, 叫做 jQuery. 虽然 jQuery 目前用的已经少了, 但它的功能确实强大. 我们要想使用 Ajax, 只需要把 jQuery 引入到代码即可.

2.1 认识一下 jQuery

想使用 jQuery, 我们只需要在 html 代码中 body 部分 加入一行代码即可.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

此处的 src 属性, 是用来从网络上加载一个写好的 js 代码过来.

在这里插入图片描述
然后我们在这个标签中进行 js 代码的编写.

$ 在 js 中, 是一个合法的变量名, 不过在 jQuery 中已经定义好了. $ 这个对象里有很多种方法. 我们可以通过它来调用各种需要的方法. $.ajax() 就是 jQuery 中封装好的, 用来发起 Ajax 请求的方法.

2.2 Ajax 发送 POST 请求

几个重要参数

  • type: 表示 HTTP 请求的方法, 与 form 表单构造的不同, 可以支持所有方法, 不只是 GET 和 POST.
  • url: 很显然, 是说明构造的 HTTP 请求的 URL 是什么.
  • contentType: 表示请求的数据类型.
  • data: 发送的请求 body 是什么.

可以看出, 相较于 form 表单的死板, ajax 的功能更加灵活, 是否想要有 query string / body 都是可以控制的.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $.ajax({
            type: 'post',
            url: 'http://www.sogou.com',
            contentType: 'application/x-www-form-urlencoded',
            data: 'aaa=111&bbb=222',
            success: function(body) {
                console.log('ok');
            }
        });
    </script>
</body>
</html>

使用 Fiddler 查看我们构造的 HTTP 请求

POST http://www.sogou.com/ HTTP/1.1
Host: www.sogou.com
Connection: keep-alive
Content-Length: 15
Accept: */*
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0
Content-Type: application/x-www-form-urlencoded
Origin: null
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

aaa=111&bbb=222

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

在这里插入图片描述

3. 通过 Java socket 构造 HTTP 请求

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

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

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

3.1 构造一个 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");
        // 发送数据
        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");
   }

3.2 构造一个 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");
   }

3.3 一个完整的 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);
   }
}

4. 借助第三方工具来构造 HTTP 请求

除以上讲述的三种构造 HTTP 请求的方法之外, 我们还可以通过第三方工具, 来构造 HTTP 协议.

在这里给大家推荐一个老牌工具 Postman. 功能十分强大, 在这里不展开讲述, 大家可以自行安装了解一下.

Postman 下载地址


总结

✨ 本文主要讲了构造 HTTP 请求的三种方法, 通过 HTML 中 form 表单, 通过 Ajax, 通过 Java socket 来构造.
✨ 想了解更多计算机网络的知识, 可以收藏一下本人的计算机网络学习专栏, 里面会持续更新本人的学习记录, 跟随我一起不断学习.
✨ 感谢你们的耐心阅读, 博主本人也是一名学生, 也还有需要很多学习的东西. 写这篇文章是以本人所学内容为基础, 日后也会不断更新自己的学习记录, 我们一起努力进步, 变得优秀, 小小菜鸟, 也能有大大梦想, 关注我, 一起学习.

再次感谢你们的阅读, 你们的鼓励是我创作的最大动力!!!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1193955.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【PHP函数封装】分分钟帮你实现数据脱敏处理, 支持手机号码、邮箱、身份证号 中文字符串!

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享博主 &#x1f40b; 希望大家多多支持一下, 我们一起进步&#xff01;&#x1f604; &#x1f3c5; 如果文章对你有帮助的话&#xff0c;欢迎评论 &#x1f4ac;点赞&#x1…

Linux学习之进程三

目录 进程控制 fork函数 什么是写时拷贝 进程终止 mian函数的返回值 退出码 错误码 exit() 进程等待 1.什么是进程等待&#xff1f; 2.为什么要进行进程等待&#xff1f; 3.如何进程进程等待&#xff1f; wait&#xff0c;waitpid&#xff1a; waitpid 进程替换 …

【Git】Gui图形化管理、SSH协议私库集成IDEA使用

一、Gui图形化界面使用 1、根据自己需求打开管理器 2、克隆现有的库 3、图形化界面介绍 1、首先在本地仓库更新一个代码文件&#xff0c;进行使用&#xff1a; 2、进入图形管理界面刷新代码资源&#xff1a; 3、点击Stage changed 跟踪文件&#xff0c;将文件处于暂存区 4、通过…

基于JavaWeb+SpringBoot+Vue摩托车商城微信小程序系统的设计和实现

基于JavaWebSpringBootVue摩托车商城微信小程序系统的设计和实现 源码传送入口前言主要技术系统设计功能截图Lun文目录订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码传送入口 前言 近年来&#xff0c;随着移动互联网的快速发展&#xff0c;电子商务越来越受到…

javascript用localStorage存储用户搜索词记录,并在搜索框下展显搜索词记录

//首先是storage的一封装 //storage.js文件 function storage(){//设置storage密钥this.ms"mystorage";}//以下为函数的原型方法//获得localStorage值storage.prototype.getLocalfunction(key){//先检查设置的localStorage的密钥var mydatalocalStorage.getItem(thi…

问题描述:64位计算机的寻址能力是多少TB

问题描述&#xff1a;64位计算机的寻址能力是多少TB 我在看到一个32位电脑的寻址能力计算时&#xff0c;看到是这么计算的。 虚拟内存的大小受到计算机地址位数的限制&#xff0c; 那么32位电脑的寻址能力计算应该是这样 为什么网上百度到的是16TB呢&#xff0c;如下图所示 中…

数据库安全:Hadoop 未授权访问-命令执行漏洞.

数据库安全&#xff1a;Hadoop 未授权访问-命令执行漏洞. Hadoop 未授权访问主要是因为 Hadoop YARN 资源管理系统配置不当&#xff0c;导致可以未经授权进行访问&#xff0c;从而被攻击者恶意利用。攻击者无需认证即可通过 RESTAPI 部署任务来执行任意指令&#xff0c;最终完…

winform打包默认安装路径设置

点击安装程序的 Application Folder 修改属性中的 DefaultLocation

高校教务系统登录页面JS分析——长沙理工大学教务系统

高校教务系统密码加密逻辑及JS逆向 本文将介绍高校教务系统的密码加密逻辑以及使用JavaScript进行逆向分析的过程。通过本文&#xff0c;你将了解到密码加密的基本概念、常用加密算法以及如何通过逆向分析来破解密码。 本文将是本专栏最后一篇文章&#xff0c;我看了绝大多数高…

【编程语言发展史】Go语言的发展历史

目录 Go的起源 Go语言发展时间轴 logo Go的起源 Go 语言起源 2007 年&#xff0c;并于 2009 年正式对外发布。它从 2009 年 9 月 21 日开始作为谷歌公司 20% 兼职项目&#xff0c;即相关员工利用 20% 的空余时间来参与 Go 语言的研发工作。该项目的三位领导者均是著名的 …

1. 深度学习——激活函数

机器学习面试题汇总与解析——激活函数 本章讲解知识点 什么是激活函数&#xff1f; 为什么要使用激活函数&#xff1f; 详细讲解激活函数 本专栏适合于Python已经入门的学生或人士&#xff0c;有一定的编程基础。本专栏适合于算法工程师、机器学习、图像处理求职的学生或人…

CAN轴【禾川】

禾川CAN轴有问题。 厂家说是只能使用禾川的伺服X2EN&#xff0c;和X3EN 添加CAN主站&#xff1a; 网络&#xff1a; 0 波特率&#xff1a; 1000K 添加CAN总线&#xff1a; 主站&#xff1a; 2 同步帧&#xff1a; 80h 设置刷新时间 时间帧&#xff1a;100h 添加伺服&…

野火i.MX6ULL开发板wifi连接、SHH登录玄学篇

1、WiFi连接成功 服了&#xff0c;一样的步骤&#xff0c;它又行了。 手机开热点&#xff0c;2.4G频段&#xff0c;wanghaha&#xff0c;连上显示了IP地址&#xff0c;输入ping 百度网址 等了七八秒它访问成功。 中间还用过usb线刷镜像Debian。 2、使用 MobaXterm SSH 登录…

页表和cache

页表基本原理 页表主要用来将虚拟地址映射到物理地址&#xff0c;在使用虚拟地址访问内存时&#xff0c;微处理器首先将虚拟地址拆分成页号和页内偏移量&#xff0c;然后使用页号在页表中查找对应的物理页框号&#xff0c;将物理页地址加上页内偏移量&#xff0c;得到最终的物…

skynet学习笔记02— skynet介绍、skynet基础API与环境变量

01、Skynet与Actor模型 在系统Skynet之前&#xff0c;先了解一下Skynet与Actor模型&#xff0c;下列是风云大佬的介绍以及一个大佬的博客 https://github.com/cloudwu/skynet/wiki/GettingStartedhttps://blog.csdn.net/qq769651718/article/details/79432793 02、Skynet基础…

3.前端调式(断点调式)

1. Elements 先来看这张图最上头的一行是一个功能菜单&#xff0c;每一个菜单都有它相应的功能和使用方法&#xff0c;依次从左往右来看 箭头按钮 用于在页面选择一个元素来审查和查看它的相关信息&#xff0c;当我们在Elements这个按钮页面下点击某个Dom元素时&#xff0c;箭…

【全网首发】【Python】Python控制parrot ARDrone 2.0无人机

&#x1f389;欢迎来到Python专栏~Python控制parrot ARDrone 2.0无人机 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;Python学习专栏 文章作者技术和水平有限&#xff0c;如果文中出现错误…

Zotero详细功能补充!熟练使用!【进阶版,持续更新】

Zotero安装请参见文章Zotero安装 1.改变条目文件夹 如果直接选择条目直接进行移动&#xff0c;能移动成功&#xff0c;但是原来文件夹和目标文件夹都会存在&#xff0c;实际是复制&#xff01; 如果只想保留在一个文件夹里面&#xff0c;可以选中条目&#xff0c;右击-从分…

11.10

.text .global _start _start: 1.RCC时钟使能GPIOE RCC_MP_AHB4ENSETR[4]->1 LDR R0,0x50000a28 LDR R1,[R0] ORR R1,R1,#(0x3<<4) ORR R1,R1,#(0x1<<1) STR R1,[R0] 2.设置PE10为输出模式 GPIOE_MODER[21:20]->01 先清0 LDR R0,0x50006000 LDR R1,[R0]…

探索云世界的无限可能

文章目录 每日一句正能量前言云计算的定义和现状云计算能做什么&#xff1f;云计算市场的新特征需求方向&#xff1a;云计算的基础服务已经稳固&#xff0c;行业解决方案是新的发力点模式方向&#xff1a;分布式云模式方向&#xff1a;边缘计算是一朵新的云技术方向&#xff1a…