当前位置： 首页 > news >正文

XMLHttpRequest对象的Get请求和Post请求的用法

news 2026/2/8 19:36:05

XMLHttpRequest对象的Get请求和Post请求的用法

Get请求提交数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>发送ajax get请求</title>
</head>
<body>
<script type="text/javascript">window.onload = function (){var ajaxBtn= document.getElementById("ajaxBtn");ajaxBtn.onclick = function (){// 第一步：创建XMLHttpRequest对象var request = new XMLHttpRequest();// 第二步：注册回调函数request.onreadystatechange = function () {if (this.readyState == 4) {if (this.status == 200) {// innerHTML可以设置元素内部的HTML代码。（innerHTML可以将后面的内容当做一段HTML代码解释并执行）document.getElementById("mydiv").innerHTML = this.responseText}else{// status:返回请求的状态号alert(this.status)}}}// 第三步：开启通道request.open("Get", "/ajax1/ajaxrequest1", true)// 第四步：发送请求request.send()}}
</script><input type="button" value="ajax" id="ajaxBtn">
<div id="mydiv"></div>
</body>
</html>

package com.ajax.servlet;import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;
import java.io.PrintWriter;@WebServlet("/ajaxrequest1")
public class AjaxRequest extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();out.print("<font>hello ajax</font>");}
}

Post请求提交数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/javascript">window.onload = function () {document.getElementById("btn").onclick = function () {// 第一步：创建XMLHttpRequest对象var xhr = new XMLHttpRequest();// 第二步：注册回调函数xhr.onreadystatechange = function () {if(this.readyState == 4){if (this.status == 200){document.getElementById("mydiv").innerHTML = this.responseText}else{alert(this.status)}}}// 第三步：开启通道xhr.open("Post", "/ajax1/ajaxrequest", true)// 第四步：发送请求// 设置请求头的内容类型，模拟Ajax提交form表单xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")var username = document.getElementById("username").value;var password = document.getElementById("password").value;xhr.send("username="+username+"&password="+password )}}    
</script>用户名：<input type="text" id="username"><br>
密码：<input type="text" id="password"><br>
<button id="btn">提交</button><div id="mydiv"></div>
</body>
</html>

package com.ajax.servlet;import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;
import java.io.PrintWriter;@WebServlet("/ajaxrequest")
public class AjaxRequest3Servlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();// 获取提交的数据String username = request.getParameter("username");String password = request.getParameter("password");out.print("用户名：" + username);out.print("密码：" + password);}
}

GET和POST请求时的区别

  • GET请求提交数据是在“请求行”上提交，而POST请求是在“请求头”。
  • 所以，POST请求需要在open和send方法中添加一行代码xxx.setRequestHeader()，用来设置请求头的内容。

以上代码中出现的XMLHttpRequest对象的方法和属性

onreadystatechange属性

  • 功能：定义当 readyState 属性发生变化时被调用的函数
var xxx = new XMLHttpRequest();
xxx.onreadystatechange = function () {console.log(xxx.readyState)}
}

open()方法

  • 功能：开启通道
  • open(method, url, async, user, psw)
    • method：请求的方式，可以是GET，也可以是POST，也可以是其它请求方式。
    • url：请求的路径（/项目名/@WebServlet路径）
      • 注：@WebServlet路径可以随便填写，但是要和java代码注解的@WebServlet(“/”)一致
    • async：只能是trve或者false，trve表示此ajax请求是一个异步请求，false表示此ajax请求是一个同步请求。
    • user（非必填项）：用户名 pwd：密码，用户名和密码是进行身份认证的，说明要想访问这个服务器上的资源，可能需要提供一些口令才能访问。
xxx.open("Get", "/项目名/@WebServlet路径", true)

send()方法

  • 功能：发送请求到服务器
// 发送GET请求到服务器
xxx.send()// 发送POST请求到服务器
xxx.send(string)

responseText属性

  • 功能：以字符串返回响应数据
// 在GET请求中出现的代码
out.print("<font>hello ajax</font>");
document.getElementById("mydiv").innerHTML = this.responseText<div id="mydiv"></div>
  • 以上代码中的字符串内容通过responseText接收，并赋值给div标签中，再使用innerHTML转变成html代码执行

status属性

  • 功能：返回请求的状态号（200: “OK”，404: “Not Found”…）

onblur失去焦点事件 和 onfocus获取焦点

  • onblur功能：当失去焦点时，就发送Ajax POST请求，提交用户名。
    • 什么叫失去焦点？
      • 当你将鼠标点在页面搜索框中输入时，会出现光标，而点击到输入框以外的地方，使得输入框中的光标消失，则为失去焦点。
  • onfocus功能：获取焦点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>AJAX POST请求验证同户名是否可用</title>
</head>
<body>
<script type="text/javascript">window.onload = function () {document.getElementById("username").onfocus = function () {document.getElementById("tipMsg").innerHTML = ""}document.getElementById("username").onblur = function () {// console.log('失去焦点')var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (this.readyState == 4) {if (this.status == 200) {document.getElementById("tipMsg").innerHTML = this.responseText}else {alert(this.status)}}}xhr.open("POST", "/ajax1/ajaxrequest5", true)xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")var username = document.getElementById("username").value;xhr.send("username=" + username)}}
</script>
用户名：<input type="text" id="username"><span id="tipMsg"></span>
</body>
</html>

相关文章：

XMLHttpRequest对象的Get请求和Post请求的用法

XMLHttpRequest对象的Get请求和Post请求的用法 Get请求提交数据 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>发送ajax get请求</title> </head> <body> <script type"…...

编程日记 2023/10/20 22:13:10

Tomcat动静分离

访问静态页面和访问动态页面分开&#xff0c;实现动态页面和静态页面的负载均衡 一、七层动静分离 3台虚拟机 1、nginx1既是代理也是静态 nginx1&#xff1a;20.0.0.11 2、请求动态页面&#xff1a;Tomcat1和Tomcat2 Tomcat1&#xff1a;20.0.0.31 Tomcat2&#xff1a;20…...

编程日记 2023/10/20 22:11:08

一些ECharts配置

基于vue3&#xff0c;EChart5.4.3版本 Line <script setup lang"ts"> import {onBeforeUnmount, onMounted, ref, watch} from "vue" import {useEcharts, type ECOption} from "/composables" import * as echarts from "echarts/c…...

编程日记 2023/10/20 22:10:07

C调用Objective-C的类和方法

C调用Objective-C的类和方法 最近有一个C提供回调接口调用Objective-c接口来传递数据的需求&#xff0c;研究了很久&#xff0c;最终通过bing的AI对话查到了需要的内容&#xff0c;这里记录一下&#xff0c;算是给基于C的IOS开发开了一个头。 在Objective-C中&#xff0c;你可…...

编程日记 2023/10/20 22:09:04

驱动开发day1

头文件 #ifndef __HEAD_H__ #define __HEAD_H__ #define PHY_LED1_MODER 0X50006000 #define PHY_LED1_ODR 0X50006014#define PHY_LED2_MODER 0x50007000 #define PHY_LED2_ODR 0x50007014#define PHY_LED3_MODER 0x50006000 #define PHY_LED3_ODR 0x50006014#define P…...

编程日记 2023/10/20 22:08:03

C++ linux vscode编译

.cpp .h文件关系与编译命令 单一cpp文件编译多个.cpp文件编译.h头文件和.cpp源文件在同一目录下编译.h头文件和.cpp源文件在不同一目录下编译 单一cpp文件编译 //test.cpp为测试源文件&#xff0c; a.out为输出可执行文件 g test.cpp -o a.out多个.cpp文件编译 目录1结构如下…...

编程日记 2023/10/20 22:07:02

卷积神经网络CNN学习笔记

目录 1.全连接层存在的问题2.卷积运算3.填充(padding)3.1填充(padding)的意义 4.步幅(stride)5.三维数据的卷积运算6.结合方块思考7.批处理8.conv2d代码参考文章 1.全连接层存在的问题 在全连接层中&#xff0c;相邻层的神经元全部连接在一起&#xff0c;输出的数量可以任意决…...

编程日记 2023/10/20 22:06:01

Java的Socket Timeout和tcp的存活探测包是不是一个东西

背景 你有没有好奇过我们在java中通过Socket.setSoTimeout()设置timeout参数时&#xff0c;他怎么做到在timeout时间到了之后连接就报错的&#xff1f;有没有产生过误解&#xff0c;这个参数就是设置keepalive探测包的检测间隔&#xff1f; 问题真相 其实Socket.setSoTimeou…...

编程日记 2023/10/20 22:05:00

基于跳蛛优化的BP神经网络（分类应用） - 附代码

基于跳蛛优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于跳蛛优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.跳蛛优化BP神经网络3.1 BP神经网络参数设置3.2 跳蛛算法应用 4.测试结果&#xff1a;5.M…...

编程日记 2023/10/20 22:02:55

基于鹈鹕优化的BP神经网络（分类应用） - 附代码

基于鹈鹕优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于鹈鹕优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.鹈鹕优化BP神经网络3.1 BP神经网络参数设置3.2 鹈鹕算法应用 4.测试结果&#xff1a;5.M…...

编程日记 2023/10/20 22:01:54

『ARM』和『x86』处理器架构解析指南

前言 如果问大家是否知道 CPU&#xff0c;我相信不会得到否定的答案&#xff0c;但是如果继续问大家是否了解 ARM 和 X86 架构&#xff0c;他们的区别又是什么&#xff0c;相信可能部分人就会哑口无言了 目前随着深度学习、高性能计算、NLP、AIGC、GLM、AGI 的技术迭代&#…...

编程日记 2023/10/20 22:00:53

Android 13.0 系统设置 app详情页默认关闭流量数据的开关

1.概述 在13.0的系统产品开发中，移动流量消耗也是关于产品优化的一个方面，由于产品需求需要对app详情页的流量进行管控默认关闭流量开关，不让流量无故流失，所以需要从流量开关分析问题流量打开流程，然后关闭 2.系统设置 app详情页默认关闭流量数据的开关的核心类 package…...

编程日记 2023/10/20 21:59:50

054协同过滤算法的电影推荐系统

大家好✌&#xff01;我是CZ淡陌。一名专注以理论为基础实战为主的技术博主&#xff0c;将再这里为大家分享优质的实战项目&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路…...

编程日记 2023/10/20 21:58:49

分享一个基于JavaWeb的私人牙科诊所预约挂号就诊系统的设计与实现项目源码调试 lw 开题 ppt

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1f495;&…...

编程日记 2023/10/20 21:57:49

从零开始的C++（十一）

vector的模拟实现&#xff1a; 1.构造函数&#xff1a; vector(){}vector(int n, const T& value T()){ reserve(n);for (int i 0; i < n; i){push_back(value);}}template<class InputIterator>vector(InputIterator first, InputIterator last){ auto it …...

编程日记 2023/10/20 21:55:45

驱动开发day2

通过物理内存映射为虚拟内存 实现三盏LED灯亮灯灭 head.h #ifndef __HEAD_H__ #define __HEAD_H__#define PHY_LED1_MODER 0X50006000 #define PHY_LED1_ODR 0X50006014 #define PHY_RCC 0x50000A28#define PHY_LED2_MODER 0X50007000 #define PHY_LED2_ODR 0X50007014#defin…...

编程日记 2023/10/20 21:54:44

【CANoe】文件处理_hex文件读取解析

hex文件里面只有00&#xff0c;01&#xff0c;04三种码。那么我们在解析的时候只需要对这三种不同状态的进行不同的解析即可。 hex文件格式的解析&#xff0c;可阅读&#xff1a;HEX文件格式详解 首先创建一个Block的结构体&#xff0c;根据经验我们知道&#xff0c;一个数据…...

编程日记 2023/10/20 21:53:42

人脸识别顶会论文及源码合集，含2023最新

今天和大家聊聊人脸识别。 人脸识别的技术经过不断发展已经相当成熟&#xff0c;在门禁、监控、手机解锁、移动支付等实际场景都能看到。我们比较熟悉的识别方式是基于可见光图像的人脸识别&#xff0c;这种方式有个非常明显的缺点&#xff1a;光线限制。 在近两年的人脸识别…...

编程日记 2023/10/20 21:52:42

介绍drawio和图表使用场景

图表介绍 drawio是一个基于Web技术的草图、简图和图表的解决方案。 drawio支持在线编辑器&#xff0c;app.diagram.net.并支持不同的操作系统的桌面版离线安装版本。如&#xff1a;windows, linux, macOS。 对于个人或者团队&#xff0c;把图表绘制的安全放到第一位&#xff…...

编程日记 2023/10/20 21:51:40

leetcode-1438： 绝对差不超过限制的最长连续子数组

给你一个整数数组 nums &#xff0c;和一个表示限制的整数 limit&#xff0c;请你返回最长连续子数组的长度&#xff0c;该子数组中的任意两个元素之间的绝对差必须小于或者等于 limit 。 如果不存在满足条件的子数组&#xff0c;则返回 0 。 示例 1&#xff1a; 输入&#x…...

编程日记 2023/10/20 21:50:39

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2026/1/31 6:53:51

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2026/1/26 13:29:47

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2026/2/1 14:51:21

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2026/1/31 14:20:10