【JavaEE网络】用Form与Ajax构建HTTP请求

ops/2024/10/10 21:23:21/

目录

        • 通过 form 表单构造 HTTP 请求
          • form 发送 GET 请求
          • form 发送 POST 请求
        • 通过 ajax 构造 HTTP 请求
          • 发送 GET 请求
          • 发送 POST 请求
          • 发送 application/json 数据
          • 封装 ajax 方法

通过 form 表单构造 HTTP 请求

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

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 就对应了按钮上显示的文本.
<form action="http://abcdef.com/myPath" method="GET"><input type="text" name="userId"><input type="text" name="classId"><input type="submit" value="提交">
</form>

页面展示的效果:

在这里插入图片描述

在输入框随便填写数据,

在这里插入图片描述

构造的 HTTP 请求

GET http://abcdef.com/myPath?userId=100&classId=200 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/91.0.4472.114 Safari/537.36
Accept: 
text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,imag
e/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

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

在这里插入图片描述

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

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

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

页面效果不变.

在这里插入图片描述

构造的 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/91.0.4472.114 Safari/537.36
Accept: 
text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,imag
e/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
userId=100&classId=200

主要的区别:

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

使用 form 还可以提交文件，但不能支持PUT/DELETE/OPTIONS……后面再介绍.

ajax__HTTP__111">通过 ajax 构造 HTTP 请求

现在更经常会使用 ajax 的方式来构造 http 请求

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

ajax 全称 Asynchronous Javascript And XML, 是 2005 年提出的一种 JavaScript 给服务器发送HTTP 请求的方式.

特点是可以不需要 刷新页面/页面跳转 就能进行数据传输.

在 JavaScript 中可以通过 ajax 的方式构造 HTTP 请求.

发送 GET 请求

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

// 1. 创建 XMLHttpRequest 对象
let httpRequest = new XMLHttpRequest();
// 2. 默认异步处理响应. 需要挂在处理响应的回调函数.
httpRequest.onreadystatechange = function () {// readState 表示当前的状态. // 0: 请求未初始化// 1: 服务器连接已建立// 2: 请求已接收// 3: 请求处理中// 4: 请求已完成，且响应已就绪if (httpRequest.readyState == 4) {// status 属性获取 HTTP 响应状态码console.log(httpRequest.status);// responseText 属性获取 HTTP 响应 bodyconsole.log(httpRequest.responseText);}
}
// 3. 调用 open 方法设置要访问的 url
httpRequest.open('GET', 'http://42.192.83.143:8080/AjaxMockServer/info');
// 4. 调用 send 方法发送 http 请求
httpRequest.send();

在这里插入图片描述

浏览器和服务器交互过程(引入 ajax 后)：

在这里插入图片描述

在我们当前的例子中, test.html 是通过本地文件的方式打开的, 这个环节不涉及 HTTP 交互.

后面我们把 test.html 放到 Tomcat 上, 就会产生上面的效果了.

发送 POST 请求

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

  1. 先使用 setRequestHeader 设置 Content-Type
  2. 再通过 send 的参数设置 body 内容.

发送 application/x-www-form-urlencoded 数据 (数据格式同 form 的 post)

// 1. 创建 XMLHttpRequest 对象
let httpRequest = new XMLHttpRequest();
// 2. 默认异步处理响应. 需要挂在处理响应的回调函数.
httpRequest.onreadystatechange = function () {// readState 表示当前的状态. // 0: 请求未初始化// 1: 服务器连接已建立// 2: 请求已接收// 3: 请求处理中// 4: 请求已完成，且响应已就绪if (httpRequest.readyState == 4) {// status 属性获取 HTTP 响应状态码console.log(httpRequest.status);// responseText 属性获取 HTTP 响应 bodyconsole.log(httpRequest.responseText);}
}
// 3. 调用 open 方法设置要访问的 url
httpRequest.open('POST', 'http://42.192.83.143:8080/AjaxMockServer/info');
// 4. 调用 setRequestHeader 设置请求头
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 5. 调用 send 方法发送 http 请求
httpRequest.send('name=zhangsan&age=18');
发送 application/json 数据
// 4. 调用 setRequestHeader 设置请求头
httpRequest.setRequestHeader('Content-Type', 'application/json');
// 5. 调用 send 方法发送 http 请求
httpRequest.send(JSON.stringify({name: 'zhangsan',age: 18
}));

其他代码不变, 只是改下方的代码.

ajax__218">封装 ajax 方法

原生的 XMLHTTPRequest 类使用并不方便. 我们可以在这个基础上进行简单封装.

// 参数 args 是一个 JS 对象, 里面包含了以下属性
// method: 请求方法
// url: 请求路径
// body: 请求的正文数据
// contentType: 请求正文的格式
// callback: 处理响应的回调函数, 有两个参数, 响应正文和响应的状态码
function ajax(args) {var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {// 0: 请求未初始化// 1: 服务器连接已建立// 2: 请求已接收// 3: 请求处理中// 4: 请求已完成，且响应已就绪if (xhr.readyState == 4) {args.callback(xhr.responseText, xhr.status)}}xhr.open(args.method, args.url);if (args.contentType) {xhr.setRequestHeader('Content-type', args.contentType);}if (args.body) {xhr.send(args.body);} else {xhr.send();}
}
// 调用该函数
ajax({method: 'get',
附录: ajax 测试服务器代码 (后面再讲解)
基于 Java Servlet 实现的简单的服务器代码. 后面学习到 Servlet 部分再讲解. url: '/info',callback: function (body, status) {console.log(status);console.log(body);}
});

http://www.ppmy.cn/ops/39152.html

相关文章

20_Scala集合_不可变数组Array

20_Scala集合_不可变数组Array

文章目录 Array1.创建不可变数组Array1.1直接new1.2apply方法 2.Array改查3.mkString()4.不可变数组Array遍历for循环遍历foreach遍历foreach匿名写法 Appendix Array –Array不可变数组&#xff0c;增删数据不会使源数组发生变化&#xff0c;而是会产生新数据 –scala中数组…
阅读更多...
2024 年最新使用 ntwork 框架搭建企业微信机器人详细教程

2024 年最新使用 ntwork 框架搭建企业微信机器人详细教程

NTWORK 概述 基于 PC 企业微信的 api 接口&#xff0c;支持收发文本、群、名片、图片、文件、视频、链接卡片等。 下载安装 ntwork pip install ntwork国内源安装 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple ntwork企业微信版本下载 官方下载&#xff1a;h…
阅读更多...
JCR一区 | Matlab实现1D-2D-GASF-CNN-GRU-MATT的多通道输入数据分类预测

JCR一区 | Matlab实现1D-2D-GASF-CNN-GRU-MATT的多通道输入数据分类预测

JCR一区 | Matlab实现1D-2D-GASF-CNN-GRU-MATT的多通道输入数据分类预测 目录 JCR一区 | Matlab实现1D-2D-GASF-CNN-GRU-MATT的多通道输入数据分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 基本介绍 Matlab实现1D-2D-GASF-CNN-GRU-MATT的多通道输入数据分类预…
阅读更多...
c++ 线程实验

c++ 线程实验

在C中&#xff0c;你可以使用C11或更高版本的线程库来创建和管理线程。以下是一个简单的C线程实验示例&#xff0c;该示例展示了如何创建和启动一个线程&#xff0c;以及如何在主线程和子线程中执行不同的任务。 #include <iostream> #include <thread> #include …
阅读更多...
hyper-v启动centos7虚拟机不能联网

hyper-v启动centos7虚拟机不能联网

虚拟网卡要和之前虚拟机里面设置的GATEWAY一致。 安装CentOS遇到Error setting up base repository换url 或者换镜像包iso(这个有用&#xff09; 没掌握摸Yu的精髓 好累啊
阅读更多...
Python写了for i in range(10)却只打印一遍?

Python写了for i in range(10)却只打印一遍?

题目&#xff1a;定义一个两个参数的重复打印函数&#xff0c;第一个参数指定要打印的字符串&#xff0c;第二个参数指定要重复打印的次数&#xff0c;在主程序中调用该函数&#xff0c;打印10遍你的学号姓名。 为什么调用函数后结果只打印了一遍? 看了题目感觉就很诡异&#…
阅读更多...
您的文件和驱动器上的“密码保护”有多安全？

您的文件和驱动器上的“密码保护”有多安全？

某些行业&#xff08;例如医疗保健、法律和公司&#xff09;的人们在通过电子邮件发送文件时通常依赖密码保护&#xff0c;认为它可以提供足够的安全性来防止窥探。然而&#xff0c;对 PDF 或 Excel 文件进行简单的密码保护并不像看起来那样万无一失。 使用密码保护文件而不加…
阅读更多...
Git详解之五：分布式Git

Git详解之五：分布式Git

为了便于项目中的所有开发者分享代码&#xff0c;我们准备好了一台服务器存放远程 Git 仓库。经过前面几章的学习&#xff0c;我们已经学会了一些基本的本地工作流程中所需用到的命令。接下来&#xff0c;我们要学习下如何利用 Git 来组织和完成分布式工作流程。 特别是&#…
阅读更多...
最新文章

Copyright @ 2022~2023