AJAX和JSON
1、什么是AJAX?
AJAX(ASynchronous JavaScript And XML)异步的JavaScript 和 XML;
由Jesse James Garrett 在他的文章AJAX:A New Approoch to Web Applications中首次提出。
ajax(Web数据交互方式)_百度百科
- 使用XHTML+CSS 来看表示信息。
- 使用 JavaScript 操作 D OM 进行动态显示及交互。
- 使用 XML 和 XSLT 进行数据交互及相关操作。
- 使用 XMLHttpRequest对象与 Web 服务器进行异步数据交换。
- 使用 JavaScript 将所有的东西绑定在一起。
2、为什么使用AJAX?
使用AJAX可以带来的好处有以下几个方面。
(1)减轻服务器的负担。AJAX 的原贝则是“按需取数据”,可以最大限度地减少冗余请求,减轻服务器的负担。
(2)无须刷新页面,减少用户 实际的等待时间。特别是在读取大量数据时,不会
像刷新页面那样出现白屏的情况。 AJAX使用XMLHttpRequest对象发送请求并且得
到服务器响应,在不重新载入整个个页面的情况下,用 JavaScript操作 DOM 更新页面。因此在读取数据的过程中,用户所听面对的不是白屏,而是原来的页面内容,只有在数据接收完毕之后才更新相应部分的的内容。这种更新是瞬间的,用户几乎感觉不到。
(3)可以把以前一些服务器负担的工作转移到客户端,利用客户端闲置的能力来处理,减轻服务器负担,充分利用带宽资源,节约空间和宽带租用成本。
(4)AJAX技术是基于标准化的并被广泛支持的技术,不需要装载插件或者小程序。
3、AJAX技术的组成要素
1.JavaScript脚本
2.XML
3.XMLHttpRequest数据交换对象
4.DOM文档对象
4、AJAX异步技术的实现步骤
1.创建异步调用对象
2.加载数据所在的服务器
3.异步调用服务器状态的变化
4.发出一个HTTP请求
5.处理异步获取的数据
5、AJAX与JSON的使用
AJAX异步请求
异步和同步
前提:客户端和服务器端相互通信的基础上
- 同步:客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作
- 异步:客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
新建一个Module项目、数据库和表,导入jar包和jQuery类库,创建SSM架构和三层架构
异步校验
1.设置输入框的失去焦点事件
2.获取输入框输入的数据
3.执行ajax请求,发送给后端数据
4.后端获取数据并执行处理,做出响应---根据用户名查询是否存在该用户信息
5.前端获取响应数据进行判断和处理
login.jsp页面
<script>//==异步校验$(function () {//1.设置输入框的失去焦点事件$("#uname").blur(function(){//2.获取输入框输入的数据var uname = $("#uname").val();//3.执行ajax请求,发送给后端数据$.ajax({url:"findByName",type:"post",data:{"uname":uname},dataType:"json",success:function (response){//5.前端获取响应数据进行判断和处理if(response.userExists==1){$("#tips").text(response.msg);$("#tips").css("color","green");}else{$("#tips").text(response.msg);$("#tips").css("color","red");}}});});});</script>
UserController类
@RequestMapping("findByName")@ResponseBodypublic Map<String,Object> findByName(String uname){Map<String,Object> map = new HashMap<>();//4.后端获取数据并执行处理,做出响应---根据用户名查询是否存在该用户信息User user = userService.selectByName(uname);if(user!=null){map.put("userExists",1);map.put("msg","用户名可用");}else{map.put("userExists",0);map.put("msg","用户名不存在");}return map;}
效果展示
异步登录
1.设置按钮的点击事件
2.获取用户名和密码输入框输入的数据
3.执行ajax请求,发送给后端数据
4.后端获取数据并执行处理,做出响应---根据用户名查询是否存在该用户信息
5.前端获取响应数据进行判断和处理
login.jsp页面
<script>//==异步校验$(function () { //==异步登录//1.设置按钮的点击事件$("#login").click(function () {//2.获取用户名和密码输入框输入的数据var uname = $("#uname").val();var pwd = $("#pwd").val();//3.执行ajax请求,发送给后端数据$.ajax({url:"login",type:"post",data:{"uname":uname,"pwd":pwd},dataType:"json",success:function (response){//5.前端获取响应数据进行判断和处理if(response.code==1){alert("欢迎"+uname+"登录系统");window.location.href="zhuye.jsp";}else if(response.code==0){alert(response.msg);}else{alert(response.msg);}}});});});</script>
UserController类
@RequestMapping("/login")@ResponseBodypublic Map<String,Object> login(String uname,String pwd){Map<String,Object> map = new HashMap<>();//4.后端获取数据并执行处理,做出响应---根据用户名查询是否存在该用户信息User user = userService.selectByName(uname);if(user!=null){if(user.getPwd().equals(pwd)){map.put("code","1");map.put("msg","可以登录");}else{map.put("code","0");map.put("msg","密码错误");}}else{map.put("code","-1");map.put("msg","用户名不存在!");}return map;}
异步加载
先跳转到主页,再请求后端获得数据,然后使用jQuery进行动态数据的展示
同步加载:先请求了后端获得数据,然后跳转到主页进行数据展示
zhuye.jsp
<script>$(function(){$.ajax({url:"findAll",type:"get",dataType:"json",success:function (response){//先在list里面页面元素清空$("#list").empty();//定义变量进行字符串的拼接var dom = "";//4.遍历数组for (var i = 0; i < response.length; i++) {//5.获取data数组的数据var goods = response[i];//6.把该条数据的值取出来拼接成一个tr的信息dom += "<tr>" +"<td><input type='checkbox' class='check'/> </td>" +"<td>" + goods.gid + "</td>" +"<td>" + goods.gname + "</td>" +"<td>" + goods.price + "</td>" +"<td>" + goods.stock + "</td>" +"<td>" + goods.supplier + "</td>" +"<td>" +"<a href='#'>修改</a> " +"<button>删除</button>" +"</td>" +"</tr>";}//7.向list中添加元素$("#list").append(dom);}});});</script>
UserController
@RequestMapping("/findAll")@ResponseBodypublic List<Goods> findAll() throws InterruptedException {Thread.sleep(5000);List<Goods> list = new ArrayList<>();Goods g1 = new Goods();g1.setGid(1);g1.setGname("方便面");g1.setPrice(3.5);g1.setStock(30);g1.setSupplier("白象");Goods g2 = new Goods();g2.setGid(2);g2.setGname("火腿肠");g2.setPrice(7.5);g2.setStock(20);g2.setSupplier("泡面搭档");Goods g3 = new Goods();g3.setGid(3);g3.setGname("牛奶");g3.setPrice(4.5);g3.setStock(50);g3.setSupplier("蒙牛");list.add(g1);list.add(g2);list.add(g3);return list;}
效果图
延迟加载
JSON
1.简介
- JSON,全称是 JavaScript Object Notation,即 JavaScript对象标记法。
- JSON是一种轻量级(Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。
SON(JavaScript Object Notation,JavaScript对象标记法)是一种轻量级(Light- Weight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。JSON无论对于人还是机器,都是十分便于阅读和书写的,而且相比 XML 其文件更小。JSON格式的创始人声称此格式永远不升级,这就表示该格式具有长时间的稳定性。JSON格式有两个显著的优点:①书写简单,一目了然;②符合 JavaScript 原生语法,可以由解释引擎直接处理,不用另外添加解析代码。JSON 已经成为各大网站交换数据的标准格式,并被写入ECMAScript 5,成为标准的一部分。简单来说,每个 JSON 对象就是一个值,要么是简单类型的值,要么是复合类型的值,但是只能是一个值,不能是两个或更多的值。这就是说,每个JSON 文档只能包含一个值。
2. JSON 的语法规则
- 数组(Array)用方括号(“[ ]”)表示。
- 对象(0bject)用大括号(“{ }”)表示。
- 名称/值对(name/value)组合成数组和对象。
- 名称(name)置于双引号中,值(value)有字符串、数值、布尔值、null、对象和数组。
- 并列的数据之间用逗号(“,”)分隔
jQuery AJAX 的应用
函数以及功能描述
jQuery.ajax() 执行异步HTTP(AJAX)请求
ajaxComplete() 当AJAX 请求完成时注册要调用的处理程序。这是一个AJAX事件
.ajaxError() 当AJAX 请求完成且出现错误时注册要调用的处理程序。这是一个AJAX事件
.ajaxSend() 在AJAX请求发送之前显示一条消息
jQuery.ajaxSetup() 设置将来的AJAX请求的默认值
.ajaxStart() 当首个AJAX请求完成开始时注册要调用的处理程序。这是一个AJAX事件
.ajaxStop() 当所有AJAX请求完成时注册要调用的处理程序。这是一个AJAX事件
.ajaxSuccess() 当AJAX请求成功完成时显示一条消息
jQuery.get() 使用HTTP GET请求从服务器加载数据
jQuerygetJSON() 使用HTTP GET请求从服务器加载JSON编码数据
jQuery.getScript() 使用HTTP GET 请求从服务器加载JavaScript文件,然后执行该文件
.load() 从服务器加载数据,然后把返回的HTML放入匹配元素
jQuery-param() 创建数组或对象的序列化表示,适合在 URL 查询字符串或AJAX请求中使用
jQuery.post() 使用HTTP POST 请求从服务器加载数据
.serialize() 将表单内容序列化为字符串
.serializeArray() 序列化表单元素,返回 JSON 数据结构数据
- (url)被加载的数据的URL(地址)。
- (data)发送到服务器的数据的键/值对象。(callback)当数据被加载时,月所执行的函数。
- (type)被返回的数据的类型(ht tml、xml、json、jasonp、script、text)。
- (options)完整AJAX请求的所 有键/值对选项。
jQuery AJAX 事件
下面是jQuery 官方给出的完整的 AJAX 事件列表。
- AJAXStart(全局事件):AJAX请求开始时执行函数。
- beforeSend(局部事件):AJAX请求发送前执行函数。 AJAXSend(全局事件):AJAX请求发送前执行函数。 success(局部事件):AJAX请求成功时执行函数。
- AJAXSuccess(全局事件):AJAX请求成功时执行函数。 error(局部事件):AJAX请求发生错误时执行函数。
- AJAXError(全局事件):AJAX请求发生错误时执行函数。 complete(局部事件):AJAX请求完成时执行函数。
- AJAXComplete(全局事件):AJAX请求完成时执行函数。 oAJAXStop(全局事件):AJAX请求结束时执行函数。
相关文章:

AJAX和JSON
1、什么是AJAX? AJAX(ASynchronous JavaScript And XML)异步的JavaScript 和 XML; 由Jesse James Garrett 在他的文章AJAX:A New Approoch to Web Applications中首次提出。 ajax(Web数据交互方式)_百…...
源码:SharedPreferences分析
一、持久化方式: DataStore:稳定性 MMKV:效率 SharedPreferneces 区别: 功能MMKVJetpack DataStoreSharedPreferneces是否阻塞主线程否否是是否线程安全是 是 是是否支持跨进程是否否是否类型…...

大二一个学期学这么点内容,没有概念,只有实操
如何查看所有的数据库: Show databases; 如何进入某个数据库: use xxx; 如何新进数据库: Create database jx; 如何删除数据库: Drop database jx; 如何查看所有的表格: Show tables; 如何创建数据表…...

AppWeb 身份验证绕过漏洞 (CVE-2018-8715)
当前漏洞环境部署在vulhub,当前验证环境为vulhub靶场(所有实验均为虚拟环境) 实验环境:攻击机----kali 靶机:centos7 1、进入靶场,启动环境 2、访问AppWeb控制台:http://your-ip:8080 使用用户名、密码adm…...
为什么监控摄像头画面不如手机拍摄视频画面清晰
一天和一个做餐饮的朋友吃饭聊天,他提出一个问题,几百块的监控摄像头就是纯粹做监控功能 ,视频拍摄的画面为什么还没有几百元的手机拍摄的视频画面清晰,对于此特意查了一下技术资料,整理一下,以备下次再详细…...

EU GMP附录一与关键区域空气微生物取样方案及相关法规标准解读
2022版EU GMP附录一与关键区域空气微生物取样方案疑问解答 3月30日2022版EU GMP附录一与关键区域空气微生物取样方案网络研讨会期间,我们收集到了部分参会听众针对该主题所提出的常见问题。根据以下这些问题,lighthouse微生物应用专家将来为您答疑解惑。…...

【软件测试】自动化测试日志问题该怎么解决?测试老鸟总结方案...
目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 Python自动化测试&…...

快速响应 智慧应急|大势智慧亮相第三届武汉国际安全应急博览会
4月26日至4月28日,第三届武汉国际安全应急博览会(后简称“应博会”)在湖北武汉顺利举办。本次展会,大势智慧以实时三维重建能力为核心,提供各类应急场景的技术支撑,助力应急处置和救援等方面的应用。 展会…...
MySQL数据库——MySQL DELETE:删除数据
在 MySQL 中,可以使用 DELETE 语句来删除表的一行或者多行数据。 删除单个表中的数据 使用 DELETE 语句从单个表中删除数据,语法格式为: DELETE FROM <表名> [WHERE 子句] [ORDER BY 子句] [LIMIT 子句] 语法说明如下: …...

管家婆安装导致电脑蓝屏问题解决方案
安装完管家婆后,电脑蓝屏,重启还是蓝屏,这该怎么办? 导致的原因:因加密狗驱动不适配于Windows10系统,导致电脑蓝屏 修复方案:进入电脑安全模式(怎么进入问度娘)&#…...

Compiler Lab1- 自制词法分析器
由于编译原理课的Lab1为自制词法分析器,所以笔者用C实现了一个极简的C语言词法分析器,用于分析C语言源代码。它可以处理关键字、标识符、整数、实数、浮点数的科学计数法表示、运算符、分隔符、字符串字面量、字符字面量、注释和预处理指令。请注意&…...
构建API的战斗——与来自Kong的Marco Palladino的问答
Kong是一个开源的API网关,可用于管理、安全性和监视微服务和API的所有流量。以下是Kong官方网站的介绍: Kong是一个云原生、快速、可扩展的分布式微服务抽象层(也称为API网关、API中枢、API发布器或API服务的网关)。 Kong即可充当…...
华为OD机试 - 对称美学(Python)
题目描述 对称就是最大的美学,现有一道关于对称字符串的美学。已知: 第1个字符串:R 第2个字符串:BR 第3个字符串:RBBR 第4个字符串:BRRBRBBR 第5个字符串:RBBRBRRBBRRBRBBR 相信你已经发现规律了,没错!就是第 i 个字符串 = 第 i - 1 号字符串取反 + 第 i - 1 号字符…...
argparse.ArgumentParser
文章目录 argparse.Namespace() Python参数解析工具argparse.ArgumentParser()和实例详解 创建解析器 parserargparse.ArgumentParser() 添加参数 parser.add_argument(name or flags…[, action][, nargs][, const][, default][, type][, choices][, required][, help][, meta…...

大数据Doris(五):FE 扩缩容
文章目录 FE 扩缩容 一、通过MySQL客户端连接Doris 二、FE Follower扩缩容 1、准备 FE 安装包...

react相关概念
真实DOM和虚拟DOM区别 react关于虚拟DOM和真实DOM 虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React在用,无需真实DOM上那么多属性 虚拟DOM最终一定会转为真实DOM放入页面 JSX JSX: 全称JavsScript XML 是react定义的一种类似于XM…...
计算机的硬件系统的组成
微型计算机是指一种体积小、功能强大的计算机系统,通常用于个人或小型企业的日常办公、娱乐等需求。微型计算机的硬件系统主要由以下几个部分组成: 一、中央处理器(CPU) 中央处理器,简称CPU(Central Proc…...
Python基础-列表元组
列表元组 列表元组的操作符 len在列表元组中的使用 len函数可以计算除数字类型之外,其他所有数据类型的长度 列表(元组)之间的累加与乘法 两个列表相加可以使用同一个列表多次累加可以使用* in和not in在列表(元组)中的用法 in用于判断某个成员(元素)是否在该数据结构中…...
【校招VIP】拿到offer就躺平?转正前需要知道的这些事儿...
现在春招基本上结束了,拿到offer的同学就觉得可以直接躺平了。 但是拿到offer只是我们取经路上九九八十一难的第一关,后面还有很多的关卡等着考验我们。 近些年来在实习期间或者试用期间,无法转正的例子比比皆是,令人心动的offe…...

考研拓展:汇编基础
一.说明 本篇博客是基于考研之计算机组成原理中的程序机器级代码表示进行学习的,并不是从汇编语言这一门单独的课程来学习的,涉及的汇编语言知识多是帮助你学习考研之计算机组成原理中对应的考点。 二.相关寄存器 1.相关寄存器 X86处理器中有8个32位…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

什么是VR全景技术
VR全景技术,全称为虚拟现实全景技术,是通过计算机图像模拟生成三维空间中的虚拟世界,使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验,结合图文、3D、音视频等多媒体元素…...

基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)
注:文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件:STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...