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

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

news 2025/8/24 0:11:56

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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/8/23 9:15:42

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/8/22 3:26:26

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/7/29 0:25:39

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/8/21 16:19:32

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/8/22 4:33:54

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2025/7/12 6:40:57

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/7/6 12:42:16

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/8/22 5:17:58

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2025/8/22 5:43:11