Javaweb - 13 - AJAX

发送请求的几种方式

1. 浏览器的地址框中输入地址,回车

2. html --> head --> scrip / link

                                img  自动发送请求,无需手动触发

3. a 标签,form 表单标签

     需要手动控制提交产生,且往往需要在新的页面上获得响应信息

4. 运行 JS 代码产生请求

        我们通过事件触发 JS 代码运行,发送请求

        响应后我们可以通过 JS 代码动态处理是否要跳转

        或者要将响应的信息通过 DOM 编程显示在 dom 树中

通过第 4 中发送请求的方法,就可以实现如下功能:

当用户在注册页面中,用户名为 zhangsan 的时候,这个事件会触发 JS 代码运行,向后端发送请求,可以将响应的信息通过 DOM 编程显示在 dom 树中

什么是 AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)

AJAX 不是新的编程语言,而是一种使用现有标准的新方法

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据,并更新部分前端显示页面的内容

AJAX 不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行

XMLHttpRequest 只是实现 AJAX 的一种方法(原生 JS 的实现方式)


同步交互:发送方发出请求后,必须等待接收方处理并返回,在此期间,发送方会处于“阻塞”状态,无法继续执行其他操作,直到收到响应后才会继续执行。

异步交互:发送方发出请求后,无需等待接收方返回响应,而是继续执行后续操作。接收方处理完请求后,会通过某种方式,将结果反馈给发送方,双方操作在时间上可以“不同步”。

如何实现 AJAX 请求

index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<script>function getMessage() {// 实例化一个 xmlHttpRequestvar request = new XMLHttpRequest();// 设置 xmlHttpRequest 对象的回调函数// request.readState 1 2 3 4// request.status 响应状态码 响应行状态码request.onreadystatechange = function (){if (request.readyState == 4 && request.status == 200) {// 接收响应结果,处理结果// 将响应放到指定的位置var inputEle = document.getElementById("message");inputEle.value = request.responseText;}}// 设置发送请求的方式和请求的资源路径request.open("GET", "/hello?username=zhangsan");// 发送请求request.send();}
</script>
</head>
<body>
<button onclick="getMessage()">按钮</button>
<input type = "text" id = "message" />
</body>
</html>

helloServlet.java:

@WebServlet("/hello")
public class helloServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 接收参数String username = req.getParameter("username");// 做出响应resp.getWriter().write("hello" + username);}
}

完!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/90973.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/90973.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

qt常用控件-06

文章目录qt常用控件-06spinBox/doubleSpinBoxdateTimeEditdialSliderlistWIdgettableWidgettreeWidget结语很高兴和大家见面&#xff0c;给生活加点impetus&#xff01;&#xff01;开启今天的编程之路&#xff01;&#xff01; 今天我们进一步c11中常见的新增表达 作者&#…

小智源码分析——音频部分(二)

一、利用创建好的对象来调用音频服务 上周从上图的getaudiocode()方法进去感受了一下底层小智的构造如何实现。所以用一个codec来接收我们所构造的音频对象。下来是用构造好的音频对象来调用音频初始化服务Initialize&#xff0c;因为启动函数Application函数的类中有audio_ser…

菜鸟的C#学习(四)

文章目录一、格式说明符1.1、数字格式说明符&#xff08;适用于数值类型&#xff1a;int, double, decimal 等&#xff09;1. 标准数字格式2. 自定义数字格式1.2、日期时间格式说明符&#xff08;适用于 DateTime, DateTimeOffset&#xff09;1. 标准日期时间格式2. 自定义日期…

基于黑马教程——微服务架构解析(二)

本篇文章基于黑马程序员的微服务课程内容&#xff0c;结合个人学习过程中的理解与思考进行整理。本节将围绕以下几个问题展开&#xff1a;什么是网关和配置管理前面那篇文章&#xff0c;我们了解如何把一个单体的项目拆成分布式微服务项目&#xff0c;并且讲解一下各个服务之间…

Text2SQL智能问答系统开发(一)

开发一个面向企业的chatBI工作流 已完成 基础 Text2SQL 功能实现 实现用户输入自然语言问题后&#xff0c;系统能够自动生成 SQL 并执行返回结果。用户交互优化 支持用户通过补充信息对查询进行调整&#xff0c;提升易用性。模糊时间处理机制 对“最近”“近期”等模糊时间关…

Python HTML模块详解:从基础到实战

一、模块体系全景图 Python生态中处理HTML的工具可分为三大层级&#xff1a; 标准库基础层&#xff1a;html模块 html.parser第三方增强层&#xff1a;BeautifulSoup&#xff08;搭配解析器&#xff09;专业级工具层&#xff1a;lxml requests-html 二、标准库核心模块详解…

PyTorch常用Tensor形状变换函数详解

PyTorch常用Tensor形状变换函数详解 在PyTorch中&#xff0c;对张量&#xff08;Tensor&#xff09;进行形状变换是深度学习模型构建中不可或缺的一环。无论是为了匹配网络层的输入要求&#xff0c;还是为了进行数据预处理和维度调整&#xff0c;都需要灵活运用各种形状变换函数…

自主智能Agent如何重塑工作流自动化:技术、经济与未来展望

自主智能Agent的崛起与工作流自动化的范式革命2025年7月&#xff0c;当OpenAI向付费用户推出具备网页浏览和代码执行能力的ChatGPT Agent时&#xff0c;工作流自动化领域迎来了一场静默但彻底的革命。这款不再满足于简单问答的智能体&#xff0c;在一个安全的虚拟计算机环境中运…

技术架构、行业应用、工具链整合、挑战应对及未来趋势五大模块,引用多个权威来源数据与开源项目实现细节。

以下是一份关于AI技术落地的实战经验总结报告&#xff0c;结合代码示例、可视化图表与行业案例&#xff0c;内容分为技术架构、行业应用、工具链整合、挑战应对及未来趋势五大模块&#xff0c;引用多个权威来源数据与开源项目实现细节。AI技术落地实战指南&#xff1a;从架构设…

第 9 篇:神经网络初探——当AI拥有了“大脑”,世界从此不同

《人工智能AI之机器学习基石》系列⑨ 专栏核心理念: 用通俗语言讲清楚机器学习的核心原理,强调“洞察 + 技术理解 + 应用连接”,构建一个完整的、富有启发性的知识体系。

音频焦点 Android Audio Focus 进阶

旧焦点处理 示例调用链: requestAudioFocus() → propagateFocusLossFromGain_syncAf() → handleFocusLossFromGain()。 系统事件(如来电)→ 强制焦点变化 → handleFocusLossFromGain()。 函数 propagateFocusLossFromGain_syncAf 焦点持有者发生的焦点丢失通知 主要功能…

MFC UI对话框

文章目录对话框模态对话框创建销毁关闭CDialog::OnCancel()EndDialog()CDialog::DestroyWindow()非模态对话框创建销毁关闭delete this对话框 模态对话框 ​​阻塞父窗口​​&#xff0c;强制用户先处理对话框。关闭前父窗口无法响应事件。 创建 推荐&#xff1a;非指针方式…

RabbitMQ--@RabbitListener及@RabbitHandle

两者区别 在 Spring AMQP 中&#xff0c;RabbitListener 和 RabbitHandler 是处理 RabbitMQ 消息的核心注解&#xff0c;但职责和使用场景完全不同。以下从 定义、区别、场景、示例 逐层解析&#xff1a;一、核心定义1. RabbitListener作用&#xff1a;标记 方法或类 为 Ra…

【基于CKF的IMM】MATLAB例程,CV和CT两个模型下的IMM,二维,滤波使用CKF(容积卡尔曼滤波),附下载链接

本程序实现了基于交互多模型&#xff08;IMM&#xff09;容积卡尔曼滤波&#xff08;CKF&#xff09;的多模型融合定位方法&#xff0c;并与纯CV−CKFCV-CKFCV−CKF&#xff08;匀速模型&#xff09;和CT−CKFCT-CKFCT−CKF&#xff08;匀角速度转弯模型&#xff09;方法对比。…

AI资讯日报 - 2025年07月28日

AI资讯日报 | 2025年07月28日 周一 今日核心要点 精华提炼 技术突破 • 腾讯混元&#xff1a;开源发布、3D技术 • 书生Intern&#xff1a;开源发布、多模态 企业动态 • AI工具集&#xff1a;协同创作、视频生成 数据概览分类数量重点关注技术突破2 条开源发布、3D技术企业动态…

大语言模型 LLM 通过 Excel 知识库 增强日志分析,根因分析能力的技术方案(1):总体介绍

文章大纲 1. 核心目标 2. 系统总体架构 3. Google Cloud 端到端方案(含无 RAG & RAG 双模式) 3.1 无 RAG:Function-Calling 查表模式 3.2 RAG:托管式向量检索 4. 开源轻量级方案 5. 数字孪生联合验证(实验性) 6. 知识图谱增强(Neo4j) 7. 监控与持续优化(CometLLM)…

Deepseek + browser-use 轻松实现浏览器自动化

在数字化时代&#xff0c;浏览器应用广泛&#xff0c;浏览器自动化可大幅提升效率。Deepseek 是强大的智能语言模型&#xff0c;能精准解析复杂指令&#xff0c;browser - use 是专注浏览器操作的工具&#xff0c;提供丰富 API 接口&#xff0c;支持主流浏览器的各类自动化操作…

开疆智能ModbusTCP转Profient网关连接西门子PLC与川崎机器人配置案例

本案例是西门子PLC与川崎机器人通过Profient转ModbusTCP网关进行通讯转换的配置案例&#xff0c;西门子作为profinet主站&#xff0c;机器人作为ModbusTCP服务器。配置过程&#xff1a;机器人配置川崎机器人控制器提供了RS232、以太网的通信接口&#xff0c;同时也可通过加装选…

Docker多主机网络连接:实现跨主机通信

Docker 是一种流行的容器化平台&#xff0c;它可以帮助开发人员更方便地构建、发布和管理应用程序。在 Docker 中&#xff0c;容器是独立运行的应用程序包装&#xff0c;包含了运行所需的所有文件、库和环境变量。Docker 提供了多种网络连接方式&#xff0c;使得容器之间可以进…

OSPF笔记

一、OSPF基础1、技术背景&#xff08;RIP中存在的问题&#xff09;RIP中存在最大跳数为15的限制&#xff0c;不能适应大规模组网周期性发送全部路由信息&#xff0c;占用大量的带宽资源路由收敛速度慢以跳数作为度量值存在路由环路可能性每隔30秒更新2、OSPF协议特点没有跳数限…