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

AJAX与JSON

news 2025/10/2 10:38:06

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通过浏览器与服务器…...

编程日记 2023/10/22 19:13:00

1024常玩到的漏洞(第十六课)

1024常玩到的两个漏洞(第十六课) 漏洞扫描工具 1024渗透OpenVas扫描工具使用(第十四课)-CSDN博客流程一 ms12-020漏洞分析 MS12-020漏洞是一种远程桌面协议（RDP）漏洞。在攻击者利用该漏洞之前，它需要将攻击者的计算机连接到受害者的计算机上。攻击者可以通过向受害者计算…...

编程日记 2023/10/22 19:11:59

【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 …...

编程日记 2023/10/22 19:10:58

电容屏物体识别手工制作

电容屏识别物体效果2 电容屏识别物体效果1 电容屏识别物体效果3 电容屏识别物体效果4 电容识别物理效果5 我们感兴趣的是找到让我们的平面屏幕与物理三维物体和表面交互的方法。触摸屏无处不在，成千上万的应用程序中有多种设备和屏幕格式，但我们只找到…...

编程日记 2023/10/22 19:09:57

13JVM进阶

JVM内存模型 1、线程私有的数据区 1)、程序计数器我们知道，线程是CPU调度的基本单位。在多线程情况下，当线程数超过CPU数量或CPU内核数量时，线程之间就要根据时间片轮询抢夺CPU时间资源。也就是说，在任何一个确定的时刻&#…...

编程日记 2023/10/22 19:08:55

java与c++中的交换方法

最近在写算法的时候，遇到一个问题。 java中编写swap（交换）方法还需要传入一个数组，但是在c中则不需要。可以看到，在没有传入数组进行交换数组元素的时候，交换前与交换后的值是一样的。而在c中&#xff…...

编程日记 2023/10/22 19:07:54

OpenCV中world模块介绍

OpenCV中有很多模块，模块间保持最小的依赖关系，用户可以根据自己的实际需要链接相关的库，而不需链接所有的库，这样在最终交付应用程序时可以减少总库的大小。但如果需要依赖OpenCV的库太多,有时会带来不方便，此时可以使…...

编程日记 2023/10/22 19:06:51

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…...

编程日记 2023/10/22 19:05:51

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、扫描配置…...

编程日记 2023/10/22 19:04:49

点击查看详情 | 网页版微信客户管理系统如何操作试用？

微信作为我们日常生活中最常用的社交应用之一，早已成为我们与朋友、家人和同事保持联系的重要工具，也是营销引流的重要平台。通过微信营销，可以比较精准定向亲近用户。而微信的功能并没有很能满足做微信营销的人群，所以我们需要借…...

编程日记 2023/10/22 19:03:48

新加坡攻略

文章目录基础信息入境行李App电信交通餐饮购物法规旅游牛车水（Chinatown）克拉码头（Clarke Quay）东海岸（East Coast）丹戎巴葛（Tanjong Pagar）滨海湾（Marina Bay&#xff…...

编程日记 2023/10/22 19:02:47

AM@导数的应用@二阶导数的应用@函数的性态研究@函数图形的绘制

文章目录概念称呼说明驻点极值和极值点最值极值点和最值比较曲线的凹凸性凹凸性判定定理👺例证明凹凸性和单调性无必然关系拐点寻找拐点👺 函数图形的绘制例概念本文讨论导数的应用:利用导数研究函数的性态相关定理主要通过Lagrange中值定理进行推导…...

编程日记 2023/10/22 19:01:46

【2024秋招】2023-9-14 最右后端开发线下一面

1 自我介绍 2 计算机网络 2.1 说说你对tcp滑动窗口的理解 TCP 滑动窗口是 TCP 协议流量控制的一个重要机制。它的主要目的是确保发送方不会因为发送太多数据而使接收方不堪重负。下面我会详细地描述滑动窗口的概念： 窗口的大小： 滑动窗口的大小&#…...

编程日记 2023/10/22 19:00:42

uniapp无感刷新token实现过程

路漫漫其修远兮，前端道路逐渐迷茫，时隔好久好久终于想起了我还有一个小博客，最近在一直在弄uniapp，属实有被恶心到，但也至少会用了，最近实现了一个比较通用的功能，就是无感刷新token&#xff0c…...

编程日记 2023/10/22 18:59:41

一步步掌握Java IO的奥秘：深入学习BIO、NIO，实现客户端与服务器通信

众所周知，Java IO是一个庞大的知识体系，很多人在学习的过程中会感到迷茫，甚至学得一头雾水，而我也曾有同样的困惑。因此，本文的目标是帮助大家一步一步深入学习Java IO，从BIO开始，然后引出JDK1.…...

编程日记 2023/10/22 18:58:41

MIT 生物信息课程

youtube链接 Regulatory Genomics (Lecture 07): 这门课程介绍了基因调控的概念，涉及到基因的开启和关闭。这是生物信息学中的一个核心概念，对于理解整个生物网络至关重要。 Deep Learning for Regulatory Genomics (Lecture 08): 在了解了基因调控的基…...

编程日记 2023/10/22 18:57:39

Windows下安装PyTorch（GPU版本）

PyTorch环境配置及安装初步机器学习，这里记录下一些学习经过，之后以便于自己查看，同时欢迎各位大佬点评，本节是机器计算的一个包的安装和简单验证。 1.流程确定自己的硬件信息-确定电脑有英伟达（NVIDIA&#xff…...

编程日记 2023/10/22 18:56:38

力扣每日一题57：插入区间

题目描述： 给你一个无重叠的 ，按照区间起始端点排序的区间列表。在列表中插入一个新的区间，你需要确保列表中的区间仍然有序且不重叠（如果有必要的话，可以合并区间）。示例 1： 输入&#x…...

编程日记 2023/10/22 18:55:37

大河弯弯：CSS 文档流与三大元素显示模式

文章目录参考环境文档流概念三大显示模式内联元素概念常见的内联元素宽高由内容决定块级元素概念常见的块级元素宽度受容器影响，高度受内容影响内联块级元素概念常见的内联块级元素折中方案设置元素的显示模式display 属性内联元素与块级元素的切换为什么要通过…...

编程日记 2023/10/22 18:54:36

第六章：函数（中）

函数的参数 1.位置参数位置参数是指函数调用时，参数的位置与函数定义中参数的位置对应，从而确定参数的值。 def fight(x,y,z):return .join((z,y,x)) fight(八神庵,打败了...

编程日记 2023/10/22 18:51:34

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/10/2 5:31:25

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...

编程新知 2025/9/29 6:51:37

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...

编程新知 2025/9/28 23:09:10

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...

编程新知 2025/9/28 3:59:31

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/9/29 16:12:13

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录一、SQL注入二、insert注入三、报错型注入四、updatexml函数五、源码审计六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/9/26 5:35:43

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。目录 …...

编程新知 2025/9/28 3:36:18

tauri项目，如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值，可以通过标准的依赖： std::env::var(name).ok() 想在前端通过调用来获取，可以写一个command函数： #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

编程新知 2025/9/27 4:39:00