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

Ajax使用流程

news 2026/1/16 1:53:07

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

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/15 8:45:15

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/15 4:58:03

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2026/1/15 5:02:58

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

编程新知 2026/1/15 5:38:49

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

编程新知 2025/10/31 16:09:12