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

Ajax使用流程

news 2025/9/18 18:35:47

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

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/9/17 3:19:40

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/9/17 21:33:42

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/7/8 4:43:23

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/9/14 12:35:26

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/6/21 6:25:06

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/7/26 19:10:34

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/9/9 1:34:25

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2025/9/3 22:35:50

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2025/9/14 8:32:04

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2025/9/13 22:54:45