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

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

news 2026/4/27 14:24:24

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

音乐解锁完整指南：3步免费解密任何加密音乐文件

音乐解锁完整指南&#xff1a;3步免费解密任何加密音乐文件 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地址: https://git…...

编程新知 2026/4/27 12:51:14

一键启用MoE模型热切换，自动GPU显存压缩，Docker AI Toolkit 2026这3个隐藏API正在重构AI运维范式，你用上了吗？

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Docker AI Toolkit 2026&#xff1a;AI运维范式跃迁的基石 Docker AI Toolkit 2026 并非简单容器化工具的迭代&#xff0c;而是面向大规模AI模型训练、推理与持续运维&#xff08;MLOps&#xff09;深度…...

编程新知 2026/4/27 12:42:53

2026届毕业生推荐的五大AI学术神器推荐榜单

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 在人工智能辅助写作的场景里&#xff0c;“降AI指令”是这种提示方法&#xff0c;它被用来降…...

编程新知 2026/4/27 12:10:09

PowerToys中文汉化终极指南：三步解锁Windows效率工具的全部潜力

PowerToys中文汉化终极指南&#xff1a;三步解锁Windows效率工具的全部潜力 【免费下载链接】PowerToys-CN PowerToys Simplified Chinese Translation 微软增强工具箱 自制汉化 项目地址: https://gitcode.com/gh_mirrors/po/PowerToys-CN 你是否曾因PowerToys的英文界…...

编程新知 2026/4/27 11:44:14

Vue2 + Cesium 1.95.0 保姆级配置教程：解决三维地球不显示和wasm报错

Vue2与Cesium 1.95.0深度集成实战&#xff1a;破解三维地球渲染与WASM加载难题 当WebGIS开发者尝试在Vue2项目中集成Cesium 1.95.0时&#xff0c;往往会遇到两个典型问题&#xff1a;三维地球无法正常显示和控制台出现WASM相关报错。这些问题的根源通常隐藏在Webpack配置的细节…...

编程新知 2026/4/27 9:43:49

Android网络调试：除了adb logcat，你更需要掌握用tcpdump抓取HTTP/HTTPS流量

Android网络调试进阶&#xff1a;用tcpdump抓取与分析HTTP/HTTPS流量的完整指南 当你盯着adb logcat里那些模糊不清的网络错误日志时&#xff0c;是否曾想过——如果能直接看到设备发出的原始网络包该多好&#xff1f;作为移动开发者&#xff0c;我们经常需要验证API请求是否正…...

编程新知 2026/4/27 9:33:42

PHP AI开发框架LLPhant：无缝集成LLM与RAG，赋能智能应用构建

1. 项目概述&#xff1a;一个专为PHP开发者打造的AI应用开发框架如果你是一名PHP开发者&#xff0c;最近被各种AI应用搞得心痒痒&#xff0c;想在自己的项目中集成智能对话、文档总结或者代码生成功能&#xff0c;但一看到Python生态里那些复杂的库和框架就头疼&#xff0c;那么…...

编程新知 2026/4/27 7:13:52

深度学习中批归一化技术的原理与实践

1. 深度神经网络加速训练的核心挑战在训练深度神经网络时&#xff0c;我们经常会遇到一个令人头疼的现象&#xff1a;随着网络层数的增加&#xff0c;训练过程变得越来越不稳定。这种现象在2015年之前尤为明显&#xff0c;当时的研究者们发现&#xff0c;当网络深度超过某个临界…...

编程新知 2026/4/27 5:18:49

机器学习中随机化的核心价值与实践指南

1. 随机化在机器学习中的核心价值在真实世界的数据分析中&#xff0c;混杂变量就像房间里的大象——明明对结果有重大影响&#xff0c;却常常被研究者忽视。我处理过的一个电商用户行为预测项目就曾因此吃过大亏&#xff1a;当我们发现"用户点击率"与"购买转化率…...

编程新知 2026/4/27 5:12:39

TypeHero：通过游戏化挑战与开源实战，深度掌握TypeScript高级类型系统

1. 项目概述&#xff1a;TypeHero&#xff0c;一个学习TypeScript类型系统的实战平台如果你是一名前端或全栈开发者&#xff0c;大概率已经接触过TypeScript。它带来的静态类型检查&#xff0c;确实让我们的代码更健壮、错误更早暴露。但说实话&#xff0c;有多少人真正把TypeS…...

编程新知 2026/4/27 3:48:34