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

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

news 2026/1/28 15:19:59

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

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/1/26 4:05:06

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2026/1/25 12:58:16

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2026/1/24 12:58:24

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2026/1/24 20:27:31

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/11/9 14:40:17

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/9/14 12:09:11

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

编程新知 2025/11/26 7:13:37

Python训练营-Day26-函数专题1：函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

编程新知 2026/1/21 20:06:47

数据库——redis

一、Redis 介绍 1. 概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、高性能的内存键值数据库系统&#xff0c;具有以下核心特点&#xff1a; 内存存储架构&#xff1a;数据主要存储在内存中&#xff0c;提供微秒级的读写响应 多数据结构支持&…...

编程新知 2025/11/17 12:44:07