AJAX与JSON
1.AJAX
1.AJAX概述
AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML
本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术
一般的网页如果需要更新内容，必需重新加载个页面。
而 Ajax通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下，对网页的部分内容进行局部更新。
同步：服务器端在处理过程中，无法进行其他操作。
异步：服务器端在处理过程中，可以进行其他操作
总结：异步的处理网络请求的工具，可以实现局部刷新
2.原生JS实现AJAX 与详解
package Servlet;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;@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置请求和响应的乱码req.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");//1.获取请求参数String username = req.getParameter("username");//模拟服务器处理请求需要5秒钟/*try {Thread.sleep(5000);} catch (InterruptedException e) {e.printStackTrace();}*///2.判断姓名是否已注册if("zhangsan".equals(username)) {resp.getWriter().write("<font color='red'>用户名已注册</font>");}else {resp.getWriter().write("<font color='green'>用户名可用</font>");}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title>
</head>
<body>
<form autocomplete="off">姓名：<input type="text" id="username"><span id="uSpan"></span><br>密码：<input type="password" id="password"><br><input type="submit" value="注册">
</form>
</body>
<script>//1.为姓名绑定失去焦点事件document.getElementById("username").onblur = function() {//2.创建XMLHttpRequest核心对象let xmlHttp = new XMLHttpRequest();//3.打开链接let username = document.getElementById("username").value;xmlHttp.open("GET","userServlet?username="+username,true);//xmlHttp.open("GET","userServlet?username="+username,false);//4.发送请求xmlHttp.send();//5.处理响应xmlHttp.onreadystatechange = function() {//判断请求和响应是否成功if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//将响应的数据显示到span标签document.getElementById("uSpan").innerHTML = xmlHttp.responseText;}}}
</script>
</html>
核心对象：XMLHttpRequest
用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新
打开链接：open(method,url,async)
method：请求的类型 GET 或 POST
url：请求资源的路径
async：true(异步) 或 false(同步)
发送请求：send(String params)
params：请求的参数(POST 专用)
处理响应：onreadystatechange
readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪
status：200-响应已全部 OK
获得响应数据形式
responseText：获得字符串形式的响应数据
responseXML：获得 XML 形式的响应数据
3.JQuery的GET方式实现AJAX
核心语法：$.get(url,[data],[callback],[type]);
url：请求的资源路径。
data：字符串类型，发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。[可选参数]
callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。 [可选参数]
type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。[可选参数]
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title>
</head>
<body>
<form autocomplete="off">姓名：<input type="text" id="username"><span id="uSpan"></span><br>密码：<input type="password" id="password"><br><input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.7.1.js"></script>
<script>//1.为用户名绑定失去焦点事件$("#username").blur(function () {let username = $("#username").val();//2.jQuery的GET方式实现AJAX$.get(//请求的资源路径"userServlet",//请求参数"username=" + username,//回调函数function (data) {//将响应的数据显示到span标签$("#uSpan").html(data);},//响应数据形式"text");});btn.onclick(function(){alert('点我呀');})
</script>
</html>
4.JQuery的POST方式实现AJAX
核心语法：$.post(url,[data],[callback],[type]);
url：请求的资源路径。
data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象
callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码
type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title>
</head>
<body>
<form autocomplete="off">姓名：<input type="text" id="username"><span id="uSpan"></span><br>密码：<input type="password" id="password"><br><input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.7.1.js"></script>
<script>//1.为用户名绑定失去焦点事件$("#username").blur(function () {let username = $("#username").val();//2.jQuery的POST方式实现AJAX$.post(//请求的资源路径"userServlet",//请求参数"username=" + username,//回调函数function (data) {//将响应的数据显示到span标签$("#uSpan").html(data);},//响应数据形式"text");});
</script>
</html>
5.JQuery的通用方式实现AJAX
核心语法：$.ajax({name:value,name:value,…});
url：请求的资源路径。
async：是否异步请求，true-是，false-否 (默认是 true)。
data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
type：请求方式，POST 或 GET (默认是 GET)。
dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
success：请求成功时调用的回调函数。
error：请求失败时调用的回调函数。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title>
</head>
<body>
<form autocomplete="off">姓名：<input type="text" id="username"><span id="uSpan"></span><br>密码：<input type="password" id="password"><br><input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.7.1.js"></script>
<script>//1.为用户名绑定失去焦点事件$("#username").blur(function () {let username = $("#username").val();//2.jQuery的通用方式实现AJAX$.ajax({//请求资源路径url:"userServlet",//url:"userServletxxx", //测试回调函数//是否异步async:true,//请求参数data:"username="+username,//请求方式type:"POST",//数据形式dataType:"text",//请求成功后调用的回调函数success:function (data) {//将响应的数据显示到span标签$("#uSpan").html(data);},//请求失败后调用的回调函数error:function () {alert("操作失败...");}});});
</script>
</html>
2.JSON
1.JSON的概述
JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式
它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的 提升网络传输效率
创建格式
| 类型 | 语法 | 说明 |
|---|---|---|
| 对象类型 | {name:value,name:value,...} | name是字符串类型，value可以是任意类型 |
| 数组/集合类型 | [{name:value,...},{name:value,...}] | |
| 混合类型 | {name: [{name:value,...},{name:value,...}] } |
常用方法
| 成员方法 | 说明 |
|---|---|
| stringify(对象) | 将指定对象转换为json格式字符串 |
| parse(字符串) | 将指定json格式字符串解析成对象 |
2.JSON转换工具
我们除了可以在 JavaScript 中来使用 JSON 以外，在 JAVA 中同样也可以使用 JSON
JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包
可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象
Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson
1.导入 jar 包。
2. 创建核心对象。
3. 调用方法完成转换
常用类
| 类名 | 说明 |
|---|---|
| ObjectMapper | 是Jackson工具包的核心类,它提供一些方法来实现JSON字符串和对象之间的转换 |
| TypeReference | 对集合泛型的反序列化，使用TypeReference可以明确的指定反序列化的对象类型 |
ObjectMapper常用方法
| 方法名 | 说明 |
|---|---|
| String writeValueAsString(Object obj) | 将Java对象转换成JSON字符串 |
| TreadValue(String json, Class valueType) | 将JSON字符串转换成Java对象 |
| TreadValue(String json,TypeReference valueTypeRef) | 将JSON字符串转换成Java对象 |
3.JSON转换
1.对象转 JSON, JSON 转对象
User类
package Servlet02;public class User {private String name;private Integer age;public User() {}public User(String name, Integer age) {this.name = name;this.age = age;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}@Overridepublic String toString() {return "User{" +"name='" + name + '\'' +", age=" + age +'}';}
}
package Servlet02;import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;import java.util.ArrayList;
import java.util.HashMap;/*JSON转换工具的使用*/
public class ObjectMapperTest {private ObjectMapper mapper = new ObjectMapper();/*1.User对象转json, json转User对象json字符串 = {"name":"张三","age":23}user对象 = User{name='张三', age=23}*/@Testpublic void test01() throws Exception{//User对象转jsonUser user = new User("张三",23);String json = mapper.writeValueAsString(user);System.out.println("json字符串：" + json);//json转User对象User user2 = mapper.readValue(json, User.class);System.out.println("java对象：" + user2);}
}
2.Map转 JSON, JSON 转 Map
/*2.map<String,String>转json, json转map<String,String>json字符串 = {"姓名":"张三","性别":"男"}map对象 = {姓名=张三, 性别=男}
*/
@Test
public void test02() throws Exception{//map<String,String>转jsonHashMap<String,String> map = new HashMap<>();map.put("姓名","张三");map.put("性别","男");String json = mapper.writeValueAsString(map);System.out.println("json字符串：" + json);//json转map<String,String>HashMap<String,String> map2 = mapper.readValue(json, HashMap.class);System.out.println("java对象：" + map2);
}
3.Map转 JSON, JSON 转 Map
/*3.map<String,User>转json, json转map<String,User>json字符串 = {"一班":{"name":"张三","age":23},"二班":{"name":"李四","age":24}}map对象 = {一班=User{name='张三', age=23}, 二班=User{name='李四', age=24}}*/@Testpublic void test03() throws Exception{//map<String,User>转jsonHashMap<String,User> map = new HashMap<>();map.put("一班",new User("张三",23));map.put("二班",new User("李四",24));String json = mapper.writeValueAsString(map);System.out.println("json字符串：" + json);//json转map<String,User>HashMap<String,User> map2 = mapper.readValue(json,new TypeReference<HashMap<String,User>>(){});System.out.println("java对象：" + map2);}4.List转 JSON, JSON 转 List
/*4.List<String>转json, json转 List<String>json字符串 = ["张三","李四"]list对象 = [张三, 李四]
*/
@Test
public void test04() throws Exception{//List<String>转jsonArrayList<String> list = new ArrayList<>();list.add("张三");list.add("李四");String json = mapper.writeValueAsString(list);System.out.println("json字符串：" + json);//json转 List<String>ArrayList<String> list2 = mapper.readValue(json,ArrayList.class);System.out.println("java对象：" + list2);
}
5.List转 JSON, JSON 转 List
/*5.List<User>转json, json转List<User>json字符串 = [{"name":"张三","age":23},{"name":"李四","age":24}]list对象 = [User{name='张三', age=23}, User{name='李四', age=24}]*/
@Test
public void test05() throws Exception{//List<User>转jsonArrayList<User> list = new ArrayList<>();list.add(new User("张三",23));list.add(new User("李四",24));String json = mapper.writeValueAsString(list);System.out.println("json字符串：" + json);//json转List<User>ArrayList<User> list2 = mapper.readValue(json,new TypeReference<ArrayList<User>>(){});System.out.println("java对象：" + list2);
}
相关文章：
AJAX与JSON
1.AJAX 1.AJAX概述 AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML 本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术 一般的网页如果需要更新内容，必需重新加载个页面。 而 Ajax通过浏览器与服务器…...
1024常玩到的漏洞(第十六课)
1024常玩到的两个漏洞(第十六课) 漏洞扫描工具 1024渗透OpenVas扫描工具使用(第十四课)-CSDN博客 流程 一 ms12-020漏洞分析 MS12-020漏洞是一种远程桌面协议（RDP）漏洞。在攻击者利用该漏洞之前，它需要将攻击者的计算机连接到受害者的计算机上。攻击者可以通过向受害者计算…...
)
【Edabit 算法 ★★★★★★】【两个大整数相加】Recursion: Sum of Two Numbers (With A Twist!)
Recursion: Sum of Two Numbers (With A Twist!) Instructions This is an “expert” challenge!!! Why is a sum of two numbers an “expert” challenge!!! Well, the numbers can have 1000 digits or even beyond such count… So, what’s the twist? You have to do …...
电容屏物体识别手工制作
电容屏识别物体效果2 电容屏识别物体效果1 电容屏识别物体效果3 电容屏识别物体效果4 电容识别物理效果5 我们感兴趣的是找到让我们的平面屏幕与物理三维物体和表面交互的方法。 触摸屏无处不在，成千上万的应用程序中有多种设备和屏幕格式，但我们只找到…...
13JVM进阶
JVM内存模型 1、线程私有的数据区 1)、程序计数器 我们知道，线程是CPU调度的基本单位。在多线程情况下，当线程数超过CPU数量或CPU内核数量时，线程之间就要根据 时间片轮询抢夺CPU时间资源。也就是说，在任何一个确定的时刻&#…...
java与c++中的交换方法
最近在写算法的时候，遇到一个问题。 java中编写swap（交换）方法还需要传入一个数组，但是在c中则不需要。 可以看到，在没有传入数组进行交换数组元素的时候，交换前与交换后的值是一样的。 而在c中ÿ…...
OpenCV中world模块介绍
OpenCV中有很多模块，模块间保持最小的依赖关系，用户可以根据自己的实际需要链接相关的库，而不需链接所有的库，这样在最终交付应用程序时可以减少总库的大小。但如果需要依赖OpenCV的库太多,有时会带来不方便，此时可以使…...
IMX6ULL板开发——第一个应用程序
实现第一个应用程序：在IMX6ULL开发板上运行程序hello.c #include <stdio.h>/* 执行命令: ./hello weidongshan* argc 2* argv[0] ./hello* argv[1] weidongshan*/int main(int argc, char **argv) {if (argc > 2)printf("Hello, %s!\n", arg…...
MyBatis Generator - 快速生成 实体类 和 映射文件
目录 一、MyBatis Generator 的使用 1.1、生成类和映射文件 1.1.1、在 pom.xml 中引入依赖 1.1.2、根据 configurationFile 标签中配置的路径 创建 generatorConfig.xml 文件 1.1.3、自动生成类 和 映射文件 1.1.4、在 Insert 标签中添加获取主键值的选项 1.1.5、扫描配置…...
点击查看详情 | 网页版微信客户管理系统如何操作试用？
微信作为我们日常生活中最常用的社交应用之一，早已成为我们与朋友、家人和同事保持联系的重要工具，也是营销引流的重要平台。 通过微信营销，可以比较精准定向亲近用户。而微信的功能并没有很能满足做微信营销的人群，所以我们需要借…...
新加坡攻略
文章目录 基础信息入境行李App电信交通餐饮购物法规旅游牛车水（Chinatown）克拉码头（Clarke Quay）东海岸（East Coast）丹戎巴葛（Tanjong Pagar）滨海湾（Marina Bayÿ…...
AM@导数的应用@二阶导数的应用@函数的性态研究@函数图形的绘制
文章目录 概念称呼说明驻点极值和极值点最值极值点和最值比较曲线的凹凸性凹凸性判定定理👺例证明 凹凸性和单调性无必然关系拐点寻找拐点👺 函数图形的绘制例 概念 本文讨论导数的应用:利用导数研究函数的性态相关定理主要通过Lagrange中值定理进行推导…...
【2024秋招】2023-9-14 最右后端开发线下一面
1 自我介绍 2 计算机网络 2.1 说说你对tcp滑动窗口的理解 TCP 滑动窗口是 TCP 协议流量控制的一个重要机制。它的主要目的是确保发送方不会因为发送太多数据而使接收方不堪重负。下面我会详细地描述滑动窗口的概念： 窗口的大小： 滑动窗口的大小&#…...
uniapp无感刷新token实现过程
路漫漫其修远兮，前端道路逐渐迷茫，时隔好久好久终于想起了我还有一个小博客，最近在一直在弄uniapp，属实有被恶心到，但也至少会用了，最近实现了一个比较通用的功能，就是无感刷新token，…...
一步步掌握Java IO的奥秘：深入学习BIO、NIO，实现客户端与服务器通信
众所周知，Java IO是一个庞大的知识体系，很多人在学习的过程中会感到迷茫，甚至学得一头雾水，而我也曾有同样的困惑。因此，本文的目标是帮助大家一步一步深入学习Java IO，从BIO开始，然后引出JDK1.…...
MIT 生物信息课程
youtube链接 Regulatory Genomics (Lecture 07): 这门课程介绍了基因调控的概念，涉及到基因的开启和关闭。这是生物信息学中的一个核心概念，对于理解整个生物网络至关重要。 Deep Learning for Regulatory Genomics (Lecture 08): 在了解了基因调控的基…...
Windows下安装PyTorch（GPU版本）
PyTorch环境配置及安装 初步机器学习，这里记录下一些学习经过，之后以便于自己查看，同时欢迎各位大佬点评，本节是机器计算的一个包的安装和简单验证。 1.流程 确定自己的硬件信息-确定电脑有英伟达（NVIDIAÿ…...
力扣每日一题57：插入区间
题目描述： 给你一个 无重叠的 ，按照区间起始端点排序的区间列表。 在列表中插入一个新的区间，你需要确保列表中的区间仍然有序且不重叠（如果有必要的话，可以合并区间）。 示例 1： 输入&#x…...
大河弯弯：CSS 文档流与三大元素显示模式
文章目录 参考环境文档流概念三大显示模式 内联元素概念常见的内联元素宽高由内容决定 块级元素概念常见的块级元素宽度受容器影响，高度受内容影响 内联块级元素概念常见的内联块级元素折中方案 设置元素的显示模式display 属性内联元素与块级元素的切换为什么要通过…...
第六章：函数（中）
函数的参数 1.位置参数 位置参数是指函数调用时，参数的位置与函数定义中参数的位置对应，从而确定参数的值。 def fight(x,y,z):return .join((z,y,x)) fight(八神庵,打败了...
邮件验证码存储推荐方式
邮件验证码的存储方案需要兼顾 安全性、性能 和 可维护性，以下是详细分析和推荐方案： 1. 推荐方案：Redis（首选） 为什么选择 Redis？ 优势说明高性能内存读写，毫秒级响应，适合高频验…...
Redis 缓存穿透、缓存击穿、缓存雪崩详解与解决方案
在分布式系统中，Redis 凭借高性能和高并发处理能力，成为常用的缓存组件。然而，在实际应用中，缓存穿透、缓存击穿、缓存雪崩这三大问题会严重影响系统的性能与稳定性。本文将详细解析这三个问题的成因，并提供对应的解决…...
数据可视化--使用matplotlib绘制高级图表
目录 一、绘制等高线图 contour() 二、绘制矢量场流线图 streamplot() 三、绘制棉棒图 stem() 四、绘制哑铃图 五、绘制甘特图 六、绘制人口金字塔图 barh() 七、绘制漏斗图 简易版漏斗图 八、绘制桑基图 Sankey()---创建桑基图 add()---添加桑基图的选项 finish()…...
Java实现命令行图书管理系统（附完整源码）
一、项目概述 本文将介绍如何使用Java实现一个基于命令行的图书管理系统。系统支持管理员和普通用户两种角色，提供图书的增删改查、借阅归还等功能。项目采用面向对象设计原则，代码结构清晰，适合Java初学者学习。 二、系统功能架构 graph T…...
python做题日记（11）
第二十五题 第二十五题是k个一组翻转链表，意思是给定一个链表，将每k个结点化成一组，对它们进行翻转操作，在对每一组都进行翻转操作之后，将它们重新连接起来，返回这个新的链表。所以代码思路也很好想&#x…...
晶振频率稳定性：5G 基站与航天设备的核心竞争力
在当今科技飞速发展的时代，电子设备的性能和可靠性至关重要。晶振作为电子设备中的核心部件，为系统提供精确的时间和频率基准。晶振的频率稳定性直接影响着设备的整体性能，从日常生活中广泛使用的智能手机、智能穿戴设备，到对精度…...
前端学习（7）—— HTML + CSS实现博客系统页面
目录 一，效果展示 二，实现博客列表页 2.1 实现导航栏 2.2 实现个人信息 2.3 实现博客列表 三，实现博客正文页 3.2 复用 3.4 实现博客正文 四，实现博客登录页 4.1 版心 4.2 登录框 五，实现博客编辑页 5.1 …...
allWebPlugin中间件VLC专用版之录像功能介绍
背景 VLC控件原有接口是不支持录像的，且libVLC提供的接口库，不能获取录像文件完整名称（VLC-3.0.11 录制直播时有的无法保存视频的解决方法 - 1CM - 博客园）；因此，非常的不友好。为了能够彻底解决这个问题&a…...
沉浸式 VR 汽车之旅：汽车虚拟展厅与震撼试驾体验
在传统的汽车销售模式里，消费者的看车选车过程极为艰辛。他们常常需要花费大量的时间和精力，亲自前往一家又一家的 4S 店。有时候，为了对比不同品牌、不同型号的汽车，可能要穿梭于城市的各个角落，耗费一整天甚至数天的…...
Portainer安装指南:多节点监控的docker管理面板-家庭云计算专家
背景 Portainer 是一个轻量级且功能强大的容器管理面板，专为 Docker 和 Kubernetes 环境设计。它通过直观的 Web 界面简化了容器的部署、管理和监控，即使是非技术用户也能轻松上手。Portainer 支持多节点管理，允许用户从一个中央控制台管理多…...