【计算机网络】如何让客户端构造一个HTTP请求-1

简介: 【计算机网络】如何让客户端构造一个HTTP请求-1

3010533138594e98a4088ac1602bc9ce.gif

前言

前面我们学习了关于 HTTP 的相关知识,HTTP 是浏览器和服务器之间通信使用的协议,当我们使用浏览器访问某个服务器的时候,会生成一个 HTTP 请求发送给服务器,这个请求又是如何产生的呢?那么今天我将为大家分享几种构造 HTTP 请求的方法。

1. 在浏览器搜索栏中输入 URL

当我们在浏览器的搜索栏中输入 URL 的时候,就会生成一个 HTTP 请求。

2. 一些特殊的 HTML 标签触发GET请求

在HTML中,有一些特殊的标签可以触发GET请求,最常见的是标签和标签。

  1. 标签:当你在标签中设置method="get"时,它会触发GET请求。用户在提交表单时,浏览器会向服务器发送GET请求。例如:
<form action="/search" method="get">  
    <input type="text" name="query">  
    <input type="submit" value="Search">  
</form>

在这个例子中,当用户填写搜索框并点击"Search"按钮时,浏览器会向"/search"路径发送一个GET请求,请求中包含用户在搜索框中输入的内容。

  1. 标签:你可以使用标签的href属性来定义当用户点击链接时要导航到的URL。如果你在href属性中使用?字符,那么它会触发一个GET请求。例如:
<a href="?page=1">Go to page 1</a>

在这个例子中,当用户点击这个链接时,浏览器会向当前URL的路径发送一个带有"page=1"查询参数的GET请求。如果当前URL是"[http://example.com/some/path?another=value",那么点击这个链接后,浏览器会向"http://example.com/some/path?page=1&another=value"发送GET请求。

3. form 表单构造 HTTP 请求

HTML的元素可以用于创建一个表单,用户可以在该表单中输入数据。当用户提交表单时,浏览器将构造一个HTTP请求,并将表单数据作为请求体发送到服务器。

构造HTTP请求的过程如下:

  1. 浏览器获取表单数据:当用户在表单中输入数据后,浏览器会将这些数据存储起来,并等待用户提交表单。
  2. 用户提交表单:当用户点击“提交”按钮或按下回车键时,浏览器会触发表单的提交事件。
  3. 浏览器构造HTTP请求:浏览器根据表单元素的类型和属性,构造一个HTTP请求。对于GET请求,浏览器会将表单数据编码成URL参数,并附加到URL中。对于POST请求,浏览器会将表单数据作为请求体发送。
  4. 浏览器向服务器发送请求:浏览器将构造好的HTTP请求发送到服务器,并等待服务器的响应。
  5. 服务器处理请求:服务器收到请求后,会解析请求体中的数据,并根据需要对数据进行处理。服务器可能会返回一个HTML页面作为响应,或者将数据存储在数据库中。
  6. 浏览器接收响应:浏览器收到服务器的响应后,会解析响应内容并将其显示给用户。如果响应是一个HTML页面,浏览器会将其渲染成可视化页面。如果响应是其他类型的数据(如JSON),浏览器会根据需要进行处理和显示。

我们这里先创建出一个.html 文件,然后用 VScode 打开这个文件。

HTML 标签往往是成对存在的。

<html>
    <head>
    </head>
    <body>
        hello world
    </body>
</html>

这个 body 中的内容就是页面中显示的内容。

那么我们就简单的使用 form 表单构造一个 HTTP 请求。

在 VScode 中,我们可以手动打出标签,但是也可以使用 ! + Tab 生成一个 HTML 模板。

然后我们需要生成一个 form 标签,指定 URL 和 method

然后就是处理表单的具体内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form</title>
</head>
<body>
    <form action="http://www.baidu.com/index.html" method="get">
        <input type="text" name="userid" placeholder="请输入用户名">
        <input type="text" name="password" placeholder="请输入密码">
        <input type="submit" value="提交">
</body>
    </form>
</html>

当写完这个 HTML 代码之后,保存,然后打开这个文件就会出现这样的页面。

输入用户名和密码,提交。

当点击这个提交按钮的时候,会显示出这样的页面。

我们构造的 input 标签中的 name 会作为 key 值,而对应输入的则会作为 value 值构成键值对放在 URL 的 query string 中。

虽然通过 form 表单可以构造一个 HTTP 请求,但是 form 表单只能构造出 GET 和 POST 方法的 HTTP 请求,并且使用 form 表单构造出来的 HTTP 请求会触发页面跳转,会更新整个页面的数据,而有些时候则是只需要更新做出修改了的部分,那么这时候 form 表单构造的 HTTP 请求就显得很呆了,所以就又出现了另一种构造 HTTP 请求的方式——ajax。

4. ajax 构造 HTTP 请求

Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它使用 JavaScript 和 XMLHttpRequest 对象来与服务器进行异步通信,从而在不重新加载整个页面的情况下,更新网页的部分内容。

具体来说,Ajax 允许在用户与网页交互时,通过后台与服务器进行通信,获取或提交数据,然后在网页上对获取到的数据进行处理和展示。这种技术使得网页能够在用户操作时,实时地更新部分内容,提供更加流畅的用户体验。

Ajax 的核心是 JavaScript 中的 XMLHttpRequest 对象,它能够通过 HTTP 或 HTTPS 协议,与服务器进行通信。当用户在网页上进行操作时,JavaScript 代码会通过 XMLHttpRequest 对象向服务器发送请求,然后等待服务器的响应。

在服务器端,收到请求后,可以进行相应的处理,比如查询数据库、处理数据等,然后将处理结果返回给客户端。客户端收到响应后,可以使用 JavaScript 对响应数据进行处理和展示,比如更新网页上的某个部分。

通过 Ajax 技术,可以实现以下功能:

  1. 在网页上实时地更新部分内容,提高用户体验。
  2. 实现动态的网页效果,提高网页的交互性。
  3. 在后台与服务器进行通信,减轻用户的网络负担,提高网页的加载速度。
  4. 实现网页的异步更新,提高网页的响应速度。

虽然浏览器提供了原生的 ajax API,但是这个原生的比较难用,所以我们可以使用一些封装了 ajax 的第三方库来实现这个功能。我们今天使用的第三方库就是 jquery 库。既然要使用第三方库是需要额外下载引入的。虽然下载比较麻烦,但是前端只是需要将这个库的地址写入代码中就可以了。

我们可以搜索 jquery cdn,然后找到

https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js这个地址,将这个地址引入就行了。

当引入 jquery 第三方库之后,我们就可以写相关的 ajax 代码了。

这里 是jquery中定义的一个全局变量,通过 是 jquery 中定义的一个全局变量,通过  可以调用 jquery 中的方法,而在 JavaScript 中 {} 表示对象,在 ajax 中 {} 中是使用键值对的方式来描述属性名和属性值的。

<!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://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $.ajax({
            type: "get",
            url: "http://www.baidu.com/index.hetml",
            success: function(body){
                console.log(body);
            },
            error: function(body){
                console.log("获取响应失败");
            },
        });
    </script>
</body>
</html>


7049d54f4e6b47f3beb75127529fed72.png

这里 success: function(){} 中的代码不是立即执行的,而是当服务器返回响应之后,然后会将响应部分的 body 传入到 function 中,这里 function 就类似一个匿名内部类。如果服务器返回的是一个类似的 200 成功的响应,那么机会执行 success 部分的代码,如果返回的是 404 等其他错误,就会执行 error 中的代码。console.log()的作用就是打印的作用。


保存代码之后打开这个文件,并且打开浏览器的检查选项可以看到结果,执行的error中的代码。

虽然 form 表单和 Ajax 都可以构造 HTTP 请求,但是这都需要我们用到前端的知识,如果你有一定的前端基础,那其实还好,但是如果没有一定的前端基础的话,那么使用上面两个方法构造 HTTP 请求的成本就比较高,所以我们既可以使用工具来替我们构造一个 HTTP 请求,这个工具就是——postman。

【计算机网络】如何让客户端构造一个HTTP请求-2:


相关文章
|
2天前
|
安全 Java 网络安全
Servlet 教程 之 Servlet 客户端 HTTP 请求 2
Servlet教程介绍了如何在Servlet中处理HTTP请求,包括获取Cookie、头信息、参数、Session等。方法如:`getCookies()`、`getAttributeNames()`、`getHeaderNames()`、`getParameterNames()`等。还能获取身份验证类型、字符编码、MIME类型、请求方法、远程用户信息、URL路径、安全通道状态以及请求内容长度等。此外,可通过`getSession()`创建或获取Session,并以`Map`形式获取参数。
18 8
|
5天前
|
网络协议 Java API
深度剖析:Java网络编程中的TCP/IP与HTTP协议实践
【4月更文挑战第17天】Java网络编程重在TCP/IP和HTTP协议的应用。TCP提供可靠数据传输,通过Socket和ServerSocket实现;HTTP用于Web服务,常借助HttpURLConnection或Apache HttpClient。两者结合,构成网络服务基础。Java有多种高级API和框架(如Netty、Spring Boot)简化开发,助力高效、高并发的网络通信。
|
6天前
|
网络协议 安全 API
Android网络和数据交互: 什么是HTTP和HTTPS?在Android中如何进行网络请求?
HTTP和HTTPS是网络数据传输协议,HTTP基于TCP/IP,简单快速,HTTPS则是加密的HTTP,确保数据安全。在Android中,过去常用HttpURLConnection和HttpClient,但HttpClient自Android 6.0起被移除。现在推荐使用支持TLS、流式上传下载、超时配置等特性的HttpsURLConnection进行网络请求。
8 0
|
10天前
|
存储 JSON 前端开发
网络原理(4)HTTP协议(下)
网络原理(4)HTTP协议
24 0
|
1月前
|
Shell Linux 网络安全
【Shell 命令集合 网络通讯 】Linux 管理Apache HTTP服务器 httpd命令 使用指南
【Shell 命令集合 网络通讯 】Linux 管理Apache HTTP服务器 httpd命令 使用指南
29 0
|
1月前
|
Shell Linux Apache
【Shell 命令集合 网络通讯 】Linux 管理Apache HTTP服务器 apachectl命令 使用教程
【Shell 命令集合 网络通讯 】Linux 管理Apache HTTP服务器 apachectl命令 使用教程
160 1
|
1月前
|
网络协议 网络安全 API
Qt 网络编程之美:探索 URL、HTTP、服务发现与请求响应
Qt 网络编程之美:探索 URL、HTTP、服务发现与请求响应
45 1
|
1月前
|
网络协议 Linux 网络安全
curl(http命令行工具):Linux下最强大的网络数据传输工具
curl(http命令行工具):Linux下最强大的网络数据传输工具
44 0
|
1月前
|
监控 网络安全 C++
Qt 5.14.2 网络编程揭秘:构建高效HTTP客户端与文件下载器
Qt 5.14.2 网络编程揭秘:构建高效HTTP客户端与文件下载器
|
6天前
|
安全 网络安全 开发工具
对象存储oss使用问题之flutter使用http库进行post请求文件上传返回400如何解决
《对象存储OSS操作报错合集》精选了用户在使用阿里云对象存储服务(OSS)过程中出现的各种常见及疑难报错情况,包括但不限于权限问题、上传下载异常、Bucket配置错误、网络连接问题、跨域资源共享(CORS)设定错误、数据一致性问题以及API调用失败等场景。为用户降低故障排查时间,确保OSS服务的稳定运行与高效利用。
18 1