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

Ajax使用流程

news 2026/6/4 18:38:24

Ajax在不刷新页面的情况下，进行页面局部更新。

Ajax使用流程：

  1. 创建XmlHttpReqeust对象
  2. 发送Ajax请求
  3. 处理服务器响应

1. 创建XmlHttpReqeust对象

XmlHttpReqeust对象是Ajax的核心，使用该对象发起请求，接收响应

不同的浏览器创建方式不相同：
在这里插入图片描述

2. 发送Ajax请求

  • xmlhttp.open()创建请求
  • xmlhttp.send()发送到服务器

![在这里插入图片描述](https://img-blog.csdnimg.cn/882ae23293a34b57a167ec965ea899c6.png

3. 处理服务器响应

  • xmlhttp.onreadystatechange()事件用来监听Ajax执行过程
  • xmlhttp.readyState属性说明XMLHttpRequest当前状态
    在这里插入图片描述
  • xmlhttp.status属性代表服务器响应状态码

在这里插入图片描述

JSON语法规则

  • 数据由key:value键值对描述
  • {}代表一个完整对象，拥有多个键值对
  • []保存数组，多个对象之间使用,分隔

JSON是一种轻量级文本数据交换格式，javascript天然支持JSON。

Ajax+JSON开发模式：
在这里插入图片描述
JSON序列化组件Jackson

		<dependency><!--添加jackson依赖--><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.12.3</version></dependency>

将对象序列化为JSON字符串：
在这里插入图片描述
在这里插入图片描述

发起Ajax请求并处理响应
在这里插入图片描述

Ajax组件库-axios

http://axios-js.com/zh-cn/docs/

axios简化了Ajax的操作

在这里插入图片描述

axios发送GET请求：
在这里插入图片描述

axios发送POST请求：
在这里插入图片描述
在这里插入图片描述

Ajax默认是异步的方式执行。

Ajax同步和异步的区别：

  • 同步是在服务器未返回JSON前，JS程序一直处于阻塞状态
  • 异步是在服务器未返回JSON前，JS程序不阻塞，Ajax通过回调获取结果
    在这里插入图片描述
    在这里插入图片描述

Ajax同步方式请求：
在这里插入图片描述

因为是同步方式，监听事件不会被执行，当代码顺序执行到这一行时，说明请求已经返回
在这里插入图片描述

Ajax实现二级联动菜单：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="/js/axios.js"></script>
</head>
<body><select id="lv1" style="width:200px;height:30px"><option value="-1" selected>请选择</option></select><select id="lv2" style="width:200px;height:30px"></select><script>var lv1=document.getElementById("lv1");axios.get("/channel",{params:{"level":1}}).then(function(response){var json=response.data;for(var i=0;i<json.length;i++){var channel=json[i];lv1.options.add(new Option(channel.name,channel.code))}}).catch(function(error){});var lv2=document.getElementById("lv2");lv1.onchange=function(){axios.get("/channel",{params:{"level":2,"parent":lv1.value}}).then(function(response){var json=response.data;lv2.length=0;//	清除二级菜单原来的数据for(var j=0;j<json.length;j++) {lv2.options.add(new Option(json[j].name,json[j].code))}}).catch(function(error){});}
</script>
</body>
</html>

package ajax.servlet;import ajax.entity.Channel;
import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String level = req.getParameter("level");String parent = req.getParameter("parent");List<Channel> chlist=new ArrayList<>();if(level.equals("1")){chlist.add(new Channel("ai","人工智能"));chlist.add(new Channel("web","前端开发"));}else if(level.equals("2")){if(parent.equals("ai")){chlist.add(new Channel("dl","深度学习"));chlist.add(new Channel("cv","计算机视觉"));chlist.add(new Channel("nlp","自然语言处理"));}else if(parent.equals("web")){chlist.add(new Channel("html","超文本标记语言"));chlist.add(new Channel("css","级联样式表"));chlist.add(new Channel("js","javascript脚本"));}}ObjectMapper objectMapper=new ObjectMapper();String json=objectMapper.writeValueAsString(chlist);resp.setContentType("application/json;charset=utf-8");resp.getWriter().println(json);}
}

相关文章：

Ajax使用流程

Ajax在不刷新页面的情况下&#xff0c;进行页面局部更新。 Ajax使用流程&#xff1a; 创建XmlHttpReqeust对象发送Ajax请求处理服务器响应 1. 创建XmlHttpReqeust对象 XmlHttpReqeust对象是Ajax的核心&#xff0c;使用该对象发起请求&#xff0c;接收响应 不同的浏览器创建…...

编程日记 2023/10/12 0:11:32

1808_ChibiOS基本的架构介绍

全部学习汇总&#xff1a; GreyZhang/g_ChibiOS: I found a new RTOS called ChibiOS and it seems interesting! (github.com) 简单看了一下ChibiOS的架构介绍&#xff0c;感觉这种OS以及组件非常适合快速构建一个应用。这里做一个简单的资料整理。。 1. 不同于其他的OS&#…...

编程日记 2023/10/12 0:10:32

曦力音视频转换工具Xilisoft Video Converter Ultimate mac中文版

Xilisoft Video Converter Ultimate mac是一款功能强大的视频转换软件&#xff0c;它可以将几乎所有流行的视频格式转换为其他格式&#xff0c;包括AVI、MPEG、WMV、DivX、MP4、H.264/AVC、AVCHD、MKV、RM、MOV、XviD、3GP等。此外&#xff0c;它还支持将视频转换为音频格式&am…...

编程日记 2023/10/12 0:09:30

Spring MVC 五：DispatcherServlet初始化之 mvc:annotation-driven

通过xml方式初始化DispatcherServlet时&#xff0c;xml文件中可以配置&#xff1a; <mvc:annotation-driven />或&#xff1a; <mvc:annotation-driven ><!--设置响应输出字符集--><mvc:message-converters><bean class"org.springframework.…...

编程日记 2023/10/12 0:08:26

uniapp EventChannel 页面跳转参数事件传递navigateBack，navigateTo 成功后通知事件区别

问题&#xff1a;navigateBack&#xff08;&#xff09;emit事件在onload()监听不到 从A页面跳转到B页面&#xff0c;在B点击产生数据后&#xff0c;跳转回到A&#xff0c;并告诉A点击的数据是什么&#xff0c;使用&#xff1a; navigateBack&#xff08;&#xff09;。 &…...

编程日记 2023/10/12 0:07:25

【C++ Primer Plus学习记录】指针——使用delete释放内存

当需要内存时&#xff0c;可以使用new来请求&#xff0c;使用完内存后&#xff0c;可以使用delete将其归还给内存池。 归还或释放&#xff08;free&#xff09;的内存可供程序的其他部分使用。 使用delete时&#xff0c;后面要加上指向内存块的指针&#xff08;这些内存块最初…...

编程日记 2023/10/12 0:06:23

2023 NOIP A层联测9 - 风信子 题解

思路 我们可以考虑设 f l 0 , r 0 , l 1 , r 1 f_{l_0,r_0,l_1,r_1} fl0​,r0​,l1​,r1​​ 表示最大的 a l − a r a_l-a_r al​−ar​&#xff0c;其中 l ∈ [ l 0 , r 0 ] l\in [l_0,r_0] l∈[l0​,r0​]&#xff0c; r ∈ [ l 1 , r 1 ] r\in [l_1, r_1] r∈[l1​,r1​…...

编程日记 2023/10/12 0:04:19

岩土工程安全监测无线振弦采集仪在无线组网的关键要点

岩土工程安全监测无线振弦采集仪在无线组网的关键要点 岩土工程是一种奇特而又极其重要的工程。它涉及到土地、岩石、气候等等因素&#xff0c;需要重视安全因素。而无线振弦采集仪作为一种常用的监测设备&#xff0c;可以采集岩土工程中的振动数据&#xff0c;从而确保工程的…...

编程日记 2023/10/12 0:02:17

代码随想录Day14 LeetCodeT110平衡二叉树 T257二叉树的所有路径 T404 左叶子之和

以下思路来自于: 代码随想录 (programmercarl.com) LeetCode T110 平衡二叉树 题目链接:110. 平衡二叉树 - 力扣&#xff08;LeetCode&#xff09; 题目思路 前面我们说过了,求二叉树的深度我们应该使用前序遍历,求二叉树的高度我们应该使用后序遍历,因为后序遍历可以将子树的…...

编程日记 2023/10/12 0:01:16

C语言自定义类型_枚举联合（3）

目录 枚举 什么是枚举类型&#xff1f; 枚举的声明 枚举的定义 枚举的优点 枚举的使用 联合&#xff08;共用体&#xff09; 什么是联合呢&#xff1f; 联合类型的定义 联合的特点 联合使用 联合大小的计算 联合的应用 今天接着我们来结束自定义类型。&#x1f19…...

编程日记 2023/10/12 0:00:14

asp.net网上销售系统VS开发mysql数据库web结构c#编程Microsoft Visual Studio计算机毕业设计

一、源码特点 asp.net 网上销售系统 是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为mysql&#xff0c;使用c#语言开发 aspnet 网上销售系统1 二、功能介绍 前台功能…...

编程日记 2023/10/11 23:58:13

【Windows】RPC调用过程实例详解

概述&#xff1a;windows 创建 RPC调用过程实例详解 参考文章&#xff1a;Remote procedure call (RPC)&#xff08;远程过程调用 (RPC)&#xff09; - Win32 apps | Microsoft Learn 文章目录 0x01、生成 UUID 和模版(IDL)文件0x02、添加 acf 文件0x03、编译 idl 文件0x04、客…...

编程日记 2023/10/11 23:57:12

动手学强化学习第2章多臂老虎机

2.1简介 多臂老虎机问题可以被看作简化版的强化学习问题。但是其只有动作和奖励没有状态信息&#xff0c;算是简化版的强化学习问题。 2.2问题介绍 2.2.1问题定义 在多臂老虎机(MAB)问题中&#xff0c;有一个有K根拉杆的老虎机&#xff0c;拉动每一根拉杆都对应一个关于奖励…...

编程日记 2023/10/11 23:56:11

钡铼BL124EC实现EtherCAT转Ethernet/IP的优势

钡铼技术的BL124EC是一款用于将EtherCAT从站转换为Ethernet/IP从站的网关设备。它是钡铼技术开发的高性能、可靠的工业自动化通信解决方案之一。 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; BL124EC网关可以应用于多种工业自动化场景&#xff0c;以下…...

编程日记 2023/10/11 23:54:09

使用IntelliJ Idea必备的插件！

趁手的工具让开发事半功倍&#xff0c;好用的IDEA插件让效率加倍。 今天给大家分享几个优秀的IDEA插件。 插件安装 首先得知道在IDEA哪安装插件&#xff1f; 点击File---->Settings---->找到Plugins标签&#xff0c;即可搜索想要的插件进行安装了。 现在来看下有哪些值…...

编程日记 2023/10/11 23:51:07

代码随想录算法训练营第23期day19| 654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树

目录 一、&#xff08;leetcode 654&#xff09;最大二叉树 二、&#xff08;leetcode 617&#xff09;合并二叉树 三、&#xff08;leetcode 700&#xff09;二叉搜索树中的搜索 四、&#xff08;leetcode 98&#xff09;验证二叉搜索树 一、&#xff08;leetcode 654&…...

编程日记 2023/10/11 23:50:06

第四章 字符串part02 28. 实现strStr() 459. 重复的子字符串

第四章 字符串part02 28. 实现strStr() 459. 重复的子字符串 一、28. 实现strStr() 题目链接&#xff1a;https://leetcode.cn/problems/repeated-substring-pattern/ 题目介绍&#xff1a; 给定一个非空的字符串 s &#xff0c;检查是否可以通过由它的一个子串重复多次构成。…...

编程日记 2023/10/11 23:48:03

设计模式 - 状态模式

目录 一. 前言 二. 实现 一. 前言 状态模式&#xff08;State Pattern&#xff09;&#xff1a;它主要用来解决对象在多种状态转换时&#xff0c;需要对外输出不同的行为的问题。状态和行为是一一对应的&#xff0c;状态之间可以相互转换。当一个对象的内在状态改变时&#x…...

编程日记 2023/10/11 23:47:02

【vim 学习系列文章 9 -- .vim 脚本文件开发学习】

文章目录 .vimrc 介绍.vim 脚本文件开发 .vimrc 介绍 在Vim中&#xff0c;你可以将一系列的Vim命令和设置写入一个脚本文件中&#xff0c;并使用:source命令来运行它。这种脚本文件通常被称为vimrc文件&#xff0c;因为它的默认名称是.vimrc。通常&#xff0c;我们将这个文件放…...

编程日记 2023/10/11 23:45:59

NAT模式和桥接模式的区别

NAT模式和桥接模式的区别 NAT模式和桥接模式都是虚拟机网络配置的两种方式&#xff0c;主要区别在于虚拟机与外部网络交互的方式不同。 NAT&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;模式&#xff1a;在这种模式下&#xff0c;虚拟机和宿主…...

编程日记 2023/10/11 23:44:58

CentOS 7下‘Development Tools’和‘开发工具’组有区别吗？实测告诉你答案

CentOS 7下‘Development Tools’与‘开发工具’的隐藏关联&#xff1a;技术细节全解析在Linux系统管理中&#xff0c;yum的软件包组功能一直是个既实用又充满谜团的领域。特别是当系统语言环境与软件包元数据语言不一致时&#xff0c;开发者们常常会遇到一个有趣的现象&#x…...

编程新知 2026/5/26 3:38:09

从‘文件夹’到对象列表：手把手教你用MinIO Java Client实现灵活的文件查询与过滤

从‘文件夹’到对象列表&#xff1a;手把手教你用MinIO Java Client实现灵活的文件查询与过滤在当今数据驱动的时代&#xff0c;对象存储已成为现代应用架构中不可或缺的一部分。MinIO作为高性能、兼容S3协议的开源对象存储解决方案&#xff0c;凭借其轻量级和易用性赢得了众多…...

编程新知 2026/5/26 3:11:57

Lindy自动化效率翻倍的秘密：从零搭建高可靠多步骤任务流的7步黄金流程

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Lindy自动化效率翻倍的秘密&#xff1a;从零搭建高可靠多步骤任务流的7步黄金流程 Lindy自动化平台以“越久越可靠”为设计哲学&#xff0c;将经典软件工程原则与现代可观测性实践深度融合。其核心优势…...

编程新知 2026/5/26 0:48:40

Linux服务器被挖矿木马劫持的五步应急处置指南

1. 这不是“中病毒”&#xff0c;是服务器被劫持成了矿机——先别慌&#xff0c;但必须立刻断网“服务器被黑客攻击&#xff0c;用来挖矿&#xff01;”——这句话在运维圈里一出&#xff0c;比收到OOM告警还让人头皮发紧。它不像网页被挂马、数据库被拖库那样有明显业务影响&a…...

编程新知 2026/5/26 0:28:16

Gofile批量下载自动化工具：5步实现高效文件管理解决方案

Gofile批量下载自动化工具&#xff1a;5步实现高效文件管理解决方案 【免费下载链接】gofile-downloader Download files from https://gofile.io 项目地址: https://gitcode.com/gh_mirrors/go/gofile-downloader 在当今数字化工作环境中&#xff0c;技术团队经常需要从…...

编程新知 2026/5/26 0:16:08

Ubuntu经常安装软件

1、垃圾清理工具stacer sudo apt updatesudo apt install stacer apt cleanapt autocleanapt autoremove 2、类似与everything的工具Fsearcch 1sudo add-apt-repository ppa:christian-boxdoerfer/fsearch-stable 2sudo apt update 3sudo apt install fsearch (注&#xf…...

编程新知 2026/5/25 21:17:35

如何快速无损转换B站m4s视频：完整工具使用指南

如何快速无损转换B站m4s视频&#xff1a;完整工具使用指南 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾为B站缓存视频无法在其他设备…...

编程新知 2026/5/25 16:15:27

告别繁琐审核！实测AI Agent如何重塑复杂非结构化票据与合同处理流程？

摘要&#xff1a;在企业数字化转型步入深水区的2026年&#xff0c;处理复杂非结构化票据与合同已成为横亘在财务、法务部门面前的“最后一公里”难题。传统RPA因UI变动易崩溃、主流智能体因缺乏API适配而无法落地&#xff0c;导致大量业务仍依赖低效的人工操作。本文由「企服AI…...

编程新知 2026/5/25 16:06:36

深入解析NxDumpTool：Switch游戏文件系统提取的终极指南 [特殊字符]

深入解析NxDumpTool&#xff1a;Switch游戏文件系统提取的终极指南 &#x1f3ae; 【免费下载链接】nxdumptool Generates XCI/NSP/HFS0/ExeFS/RomFS/Certificate/Ticket dumps from Nintendo Switch gamecards and installed SD/eMMC titles. 项目地址: https://gitcode.com…...

编程新知 2026/5/25 15:58:19

OpenClaw 源码解析（五）：setup / onboard 与本地配置初始化

1. 本期目标 上一期我们分析了 OpenClaw 的 CLI 启动链路&#xff1a;用户输入 openclaw 命令后&#xff0c;程序会先经过 entry.ts、run-main、Commander Program 构建和命令注册流程&#xff0c;然后再进入具体命令逻辑。 这一期继续往下看&#xff0c;重点分析两个最基础的…...

编程新知 2026/5/25 14:19:40