【Java】数据交换 Json 和 异步请求 Ajax

 🎄欢迎来到@边境矢梦°的csdn博文,本文主要讲解Java 中 数据交换和异步请求 Json&Ajax 的相关知识🎄


🌈我是边境矢梦°,一个正在为秋招和算法竞赛做准备的学生🌈
🎆喜欢的朋友可以关注一下🫰🫰🫰,下次更新不迷路🎆

Ps: 月亮越亮说明知识点越重要 (重要性或者难度越大)🌑🌒🌓🌔🌕  

在这里插入图片描述

目录

一. JSON

🌓1. JSON介绍

🌓2. JSON 的定义格式

🌕3. JSON 规则

🌔4. JSON 对象和字符串对象转换(javaScript)

🌓5. JSON 在 java 中使用

二. ajax

🌓1. Ajax基本介绍 

🌓2. Ajax特点

🌓3. Ajax 经典应用场景

🌕4. Ajax基本原理

🌓5. 原生Ajax

🌓6. JQuery 的 Ajax 请求


 jQuery 参考手册 - Ajax (w3school.com.cn)

一. JSON

JSON 具有自我描述性,更易理解 , 一句话,非常的好用

1. JSON介绍

🌸JSON: JavaScript Object Notation(JavaScript 对象标记法)。

📌JSON 是一种存储和交换数据的语法。

🎈JSON 是通过 JavaScript 对象标记法书写的文本。

🌸JSON(JavaScript Object Notation)是一种轻量级的数据交换格式 (String)

📌JSON易于阅读和编写的文本形式表示数据

🎈JSON数据使用键值对的方式进行组织,并且可以包含数组、对象和简单的数据类型(例如字符串、数字、布尔值和null)

JSON的语法规则相对简单,它由以下几个基本结构组成:

  • 对象(Object):使用花括号{}表示,对象是由键值对组成的无序集合,每个键值对之间使用逗号分隔。
  • 数组(Array):使用方括号[]表示,数组是由值组成的有序集合,每个值之间使用逗号分隔。
  • 值(Value):表达数据的不同类型,可以是字符串、数字、布尔值、对象、数组或null。
  • 键值对(Key-Value):表示对象中的属性和对应的值,键和值之间用冒号:分隔。
  • 字符串(String):由双引号""或单引号’'括起来的Unicode字符序列。

2. JSON 的定义格式

var 变量名 = {
        "k1" : value, // Number 类型
        "k2" : "value", // 字符串类
        "k3" : [],// 数组类型
        "k4" : {}, // json 对象类型
        "k5" : [{},{}] // json 数组
};

以下是一个简单的JSON对象的例子: 

{"name": "John","age": 30,"isStudent": true,"hobbies": ["reading", "music", "sports"],"address": {"street": "123 Main St","city": "New York"}
}

3. JSON 规则

1) 映射(元素/属性)用冒号 : 表示, " 名称 ": , 注意名称是字符串,因此要用双引号引起
2) 并列的数据之间用逗号 , 分隔。 " 名称 1": ," 名称 2":
3) 映射的集合(对象)用大括号 {} 表示 {" 名称 1": ," 名称 2": }
4) 并列数据的集合(数组)用方括号 [] 表示 [{" 名称 1": ," 名称 2": }, {" 名称 1": ," 名称 2": }]
5) 元素值类型: string, number, object, array, true, false, null
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>json 快速入门案例</title><script type="text/javascript">var myJson = {"key1": "快速入门案例", // 字符串"key2": 123, // Number"key3": [1, "hello", 2.3], // 数组"key4": {"age": 12, "name": "jack"}, //json 对象"key5": [ //json 数组{"k1": 10, "k2": "milan"}, {"k3": 30, "k4": "smith"}]};//访问 json 的属性console.log("key1= " + myJson.key1);// 访问 json 的数组属性console.log("key3[1]= " + myJson.key3[1]); // hello// 访问 key4 的 name 属性console.log("name= " + myJson.key4.name); // jack// 访问 key5 json 数组的第一个元素console.log("myJson.key5[0]= " + myJson.key5[0]); //[object, object]console.log("myJson.key5[0].k2= " + myJson.key5[0].k2)// milan</script>
</head>
<body>
<h1>json 快速入门案例</h1>
</body>
</html>

4. JSON 对象和字符串对象转换(javaScript)

1. JSON.stringify(json) 功能 : 将一个 json 对象转换成为 json 字符串 [ 简单说名字来源 .] Serialize
2. JSON.parse( jsonString ) 功能 : 将一个 json 字符串转换成为 json 对象  
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JSON 对象和字符串对象转换</title><script type="text/javascript">// 一个 json 对象var jsonObj = {"name": "对象和字符串对象转换", age: 10};//JSON 是一个 build-in 对象,内建对象,有方法可以使用console.log(JSON)// 把 json 对象转换成为字符串对象var jsonStr = JSON.stringify(jsonObj);console.log(jsonStr);// 把 json 对象的字符串,转换成为 json 对象var jsonObj2 = JSON.parse(jsonStr);console.log(jsonObj2);</script>
</head>
<body>
<h1>JSON 对象和字符串对象转换</h1>
</body>
</html>

注意事项和细节
1 JSON.springify(json 对 象 ) 会 返 回对 应 string, 并 不 会影 响 原 来 json 对 象 ,
2 JSON.parse(string) 函数会返回对应的 json 对象 , 并不会影响原来 string
3 、在定义 Json 对象时 , 可以使用 ' ' 表示字符串 , 比如 var json_person = { "name" : "jack" , "age" : 100 }; 也可以写成 var json_person = { 'name' : 'jack' , 'age' : 100 };
4 、但是在把原生字符串转成 json 对象时 , 必须使用 "", 否则会报错 比如: var str_dog = "{'name':' 小黄狗 ', 'age': 4}" ; json 就会报错  
5 JSON.springify(json 对象 ) 返回的字符串 , 都是 "" 表示的字符串 , 所以在语法格式正确 的情况下 , 是可以重新转成 json 对象的  

5. JSON java 中使用

说明
        1. java 中使用 json ,需要引入到第 3 方的包 gson.jar
        2. Gson 是 Google 提供的用来在 Java 对象 JSON 数据 之间进行映射的 Java 类库。

        3. 可以对 JSON 字符串 和 Java 对象相互转换
JSON Java 中应用场景
        1. Javabean 对象和 json 字符串 的转换
        2. List 对象和 json 字符串 的转换
        3. map 对象和 json 字符串 的转换

 

应用场景示意图
    public static void main(String[] args) {// new 一个 gson 对象。引入 gson 包Gson gson = new Gson();//1. java 对象和 json 的转换System.out.println("\n=== 1. java 对象和 json 的转换 ====");Book book = new Book(100, "韩顺平零基础学 Java");// 把对象转成为 json 字符串String bookStr = gson.toJson(book);System.out.println(bookStr);// 把 json 字符串转换成为 java 对象Book book2 = gson.fromJson(bookStr, Book.class);System.out.println(book2);//2 List 集合和 json 的转换System.out.println("\n======2 List 集合和 json 的转换======");ArrayList<Book> bookList = new ArrayList<>();bookList.add(new Book(200, "天龙八部"));bookList.add(new Book(300, "神雕侠侣"));//将 list 转成 json 字符串String bookListStr = gson.toJson(bookList);System.out.println("bookListStr=" + bookListStr);//将 json 字符串转成 List 集合方式 1List<Book> bookList2 = gson.fromJson(bookListStr, new BookType().getType());System.out.println("bookList2=" + bookList2);//将 json 字符串转成 List 集合方式 2- 使用 匿名内部类List<Book> bookList3 = gson.fromJson(bookListStr, new TypeToken<List<Book>>() {}.getType());System.out.println("bookList3=" + bookList3);//3. map 集合和 json 的转换System.out.println("\n====3. map 集合和 json 的转换=====");Map<String, Book> bookMap = new HashMap<>();bookMap.put("sn1", new Book(10, "射雕英雄传"));bookMap.put("sn2", new Book(20, "碧血剑"));// 把 map 转换成为 jsonString bookMapStr = gson.toJson(bookMap);System.out.println("bookMapStr=" + bookMapStr + " 类 型 =" +bookMapStr.getClass());// 把 json 转成 mapMap<String, Book> bookMap2 = gson.fromJson(bookMapStr, new TypeToken<HashMap<String, Book>>() {}.getType());System.out.println("bookMap2=" + bookMap2 + " 类型=" + bookMap2.getClass());}

 JSON具有良好的可读性和可扩展性,广泛应用于Web应用程序间的数据交换、配置文件的存储和API的传输。在许多编程语言中,都提供了JSON的解析和生成库,以方便对JSON数据进行操作和处理。


二. ajax

1. Ajax基本介绍 

1. AJAX "Asynchronous Javascript And XML"(异步 JavaScript XML)

2. Ajax 是一种浏览器 异步发起请求 ( 指定发哪些数据 ) 局部更新页面 的技术
3. 传统的方式只能刷新整个页面

AJAX 是开发者的梦想,因为您能够:

  • 不刷新页面更新网页
  • 在页面加载后从服务器请求数据
  • 在页面加载后从服务器接收数据
  • 在后台向服务器发送数据

 Ajax(Asynchronous JavaScript and XML)是一种用于创建快速、动态网页的技术。它通过在后台与服务器进行数据交换,使网页能够在无需重新加载整个页面的情况下更新部分内容。

🎈传统的网页交互方式是用户与服务器进行完整的页面请求和响应,即用户执行某个操作,服务器接收请求并返回完整的新页面。这种方式存在效率低下和用户体验差的问题。

📌而Ajax通过在后台使用JavaScript和XML或其他数据格式, 使网页能够

        🌸在不刷新整个页面的情况下与服务器进行数据交互和部分内容更新🌸。

        通过异步通信,Ajax 可以在用户完成某个操作之后,将用户请求发送到服务器,并在接收到服务器的响应后,动态地更新页面的相应部分,而不需要重新加载整个页面。

2. Ajax特点

Ajax技术的特点包括:

  • 异步通信:通过使用异步通信,用户可以继续与页面交互,而无需等待服务器响应。
  • 数据交换:Ajax可以与服务器进行数据交换,可以在不刷新整个页面的情况下更新页面的局部内容。
  • DOM操作:Ajax可以使用JavaScript操作DOM,实现动态页面的创建和更新。
  • 增强用户体验:由于Ajax可以快速地更新页面的一部分,因此可以提供更快速、更流畅的用户体验。

尽管Ajax中的“X”代表XML,但实际上,现代的Ajax应用程序通常使用JSON、HTML或纯文本格式来传输数据,而不是XML。

Ajax已经成为现代Web应用程序开发的重要技术之一,被广泛应用于各种Web应用,包括社交媒体、在线购物以及各种在线工具和应用程序。

3. Ajax 经典应用场景

1. 搜索引擎根据用户输入关键字,自动提示检索关键字
2. 动态加载数据,按需取得数据【树形菜单、联动菜单 ...
3. 改善用户体验。【输入内容前提示、带进度条文件上传 ...
4. 电子商务应用。 【购物车、邮件订阅 ...
5. 访问第三方服务。【访问搜索服务、 rss 阅读器】
6. 页面局部刷新 , https://piaofang.maoyan.com/dashboard

4. Ajax基本原理

 

 5. 原生Ajax

function checkUser() {var xhr = new XMLHttpRequest();var uname = document.getElementById("uname").value;xhr.open("GET", "/ajaxStu/check?username=" + uname, true);xhr.onreadystatechange = function () {// console.log("xhr = ",  xhr);if (xhr.readyState === 4 && xhr.status === 200) {if(xhr.responseText.trim() === "") {document.getElementById("myres").value = "用户名可用";} else {document.getElementById("myres").value = "用户名不可用";}}document.getElementById("div1").innerText = xhr.responseText;}xhr.send();}

6. JQuery Ajax 请求

 

jQuery(function () {$("#check").click(function () {window.alert("hello")$.ajax({url:"/ajaxStu/check2",type:"POST",data:{username:$("#uname").val(),date:new Date()},success:function (date, status, xhr) {console.log("成功~");console.log(date);console.log(status);console.log(xhr);if("king" === date.username) {$("#myres").val("用户不可用");} else {$("#myres").val("用户可用");}$("#div1").html(JSON.stringify(date));},error:function () {console.log("失败~")},dataType:"json"})$.get("/ajaxStu/check2",{username:$("#uname").val(),date:new Date()},function (date, status, xhr) {console.log("get()成功~");console.log(date);console.log(status);console.log(xhr);if("king" === date.username) {$("#myres").val("用户不可用");} else {$("#myres").val("用户可用");}$("#div1").html(JSON.stringify(date));},"json")$.post("/ajaxStu/check2",{username:$("#uname").val(),date:new Date()},function (date, status, xhr) {console.log("post()成功~");console.log(date);console.log(status);console.log(xhr);if("king" === date.username) {$("#myres").val("用户不可用");} else {$("#myres").val("用户可用");}$("#div1").html(JSON.stringify(date));},"json")$.getJSON("/ajaxStu/check2",{username:$("#uname").val(),date:new Date()},function (date, status, xhr) {console.log("getJSON()成功~");console.log(date);console.log(status);console.log(xhr);if("king" === date.username) {$("#myres").val("用户不可用");} else {$("#myres").val("用户可用");}$("#div1").html(JSON.stringify(date));})})})

 总结

Json(JavaScript Object Notation)是一种轻量级的数据交换格式,采用键值对的形式来表示数据。它广泛应用于Web开发中,特别适合于前后端数据传输和存储。

Ajax(Asynchronous JavaScript and XML)是一种在Web应用中实现异步通信的技术。通过Ajax,前端可以发送异步请求到服务器,获取数据并进行页面更新,而无需刷新整个页面。这项技术使得用户体验更加流畅,同时减轻了服务器的负担。

Json和Ajax经常配合使用。通过Ajax发送请求,服务器可以将数据以Json格式返回给前端,前端再解析Json数据进行页面渲染或其他操作。Json的简洁性和易读性使得数据传输更加高效,而Ajax的异步通信则能提升用户交互体验。

总的来说,Json是一种数据格式,用于表示数据,而Ajax是一种实现异步通信的技术。它们的结合可以帮助开发人员构建高效、流畅的Web应用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/37636.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

go mod 添加私有库GOPRIVATE

私有地址 形式仓库域名/组织名形式仓库域名形式*仓库域名 示例私有地址&#xff1a; gitee.com/takujo_admin 或者igitlab.com 多个私有地址,分割&#xff0c;示例&#xff1a; gitee.com,igitlab.com 修改env go env -w GOPRIVATE"私有地址" go env -w …

conda创建虚拟环境

创建虚拟环境是在计算机上设置一个独立的空间&#xff0c;用于安装和运行特定版本的软件和依赖项&#xff0c;以避免与系统其他部分的冲突。 创建虚拟环境&#xff1a; conda create --name myenv python3.8 这将创建一个名为myenv的虚拟环境&#xff0c;并安装Python 3.8版本。…

pwm接喇叭搞整点报时[keyestudio的8002模块]

虽然现在查看时间很方便&#xff0c;但是其实好像我的时间观念却越来越差。于是决定搞一个整点报时&#xff0c;时常提醒自己时光飞逝&#xff0c;不要老是瞎墨迹。 这篇主要讲一下拼装方式和配置&#xff0c;就差不多了。不涉及什么代码。3针的元器件&#xff0c;去掉正负接线…

day3 STM32 GPIO口介绍

GPIO接口简介 通用输入输出接口GPIO是嵌入式系统、单片机开发过程最常用的接口&#xff0c;用户可以通过编程灵活的对接口进行控制&#xff0c;实现对电路板上LED、数码管、按键等常用设备控制驱动&#xff0c;也可以作为串口的数据收发管脚&#xff0c;或AD的接口等复用功能使…

网络安全--iptables(待更新,累了)

总结&#xff1a; iptables 的关键概念和功能&#xff1a; 规则&#xff08;Rules&#xff09;&#xff1a; iptables 使用规则来定义特定的操作&#xff0c;例如允许或拒绝特定类型的网络流量。每条规则都由条件和操作组成。条件可以是源 IP 地址、目标 IP 地址、端口号等&a…

thinkphp:对数据库减少增加某个字段的值(dec、inc的用法)

例子&#xff1a;当字段po_num的值等于数组list_info中的po_num的值时修改数据库表po_rcv_receipt_line中某些信息&#xff1a; 1、数据库delivery_quantity字段的值 数据库中delivery_quantity的值变量$list_info[write_quantity] ->inc(delivery_quantity, $list_info[…

【设计模式——学习笔记】23种设计模式——状态模式State(原理讲解+应用场景介绍+案例介绍+Java代码实现)

文章目录 案例引入介绍基本介绍登场角色应用场景 案例实现案例一类图实现 案例二&#xff1a;借贷平台源码剖析传统方式实现分析状态修改流程类图实现 案例三&#xff1a;金库警报系统系统的运行逻辑伪代码传统实现方式使用状态模式 类图实现分析问题问题一问题二 总结文章说明…

国内芯片厂商创新突破,助力国产替代持续加速

近日&#xff0c;中商产业研究院发布最新研究报告显示&#xff0c;今年1~5月份中国进口集成电路为1865亿件&#xff0c;同比下降19.6%&#xff0c;同比去年5个月累计少进口了455亿颗&#xff0c;平均每天少进口3亿颗。与此同时&#xff0c;英特尔、AMD、美光、三星、SK海力士等…

OSI七层模型和TCP/IP四层模型

OSI七层模型和TCP/IP四层模型 七层模型(OSI) OSI七层模型&#xff08;Open Systems Interconnection Reference Model&#xff09;是一个用于计算机网络体系结构的标准化框架&#xff0c;旨在定义网络通信中不同层次的功能和协议。 各个层次具体如下&#xff1a; 物理层&am…

C语言 冒泡排序

目录 一、原理 二、代码演示 三、代码优化 一、原理 假设&#xff1a; int arr[] { 9,8,7,6,5,4,3,2,1,0 }; 将 arr 内的元素进行升序排列&#xff0c;得到一个新的数组 int arr[] { 0&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;…

windows docker mysql8.0 挂载配置文件不生效的问题

原因 mysql 8.0 遇到sql_modeonly_full_group_by的问题&#xff0c;于是就自定义my.cnf 去掉only_full_group_by&#xff0c;修改my.cnf 文件后&#xff0c;进行映射启动 docker run 命令 docker run -p 3306:3306 --privilegedtrue --restartalways -d --name axsc-mysql -…

【0814作业】多线程并发服务器

1) 代码 #include <stdio.h> #include <sys/socket.h> #include <sys/types.h> #include <arpa/inet.h> #include <string.h> #include <stdlib.h> #include <signal.h> #include <sys/wait.h> #include <netinet/in.h>…

配置文件优先级解读

目录 概述 同级目录application配置文件优先级 application 以及bootstrap 优先级 不同级目录配置文件优先级 外部配置加载顺序 概述 SpringBoot除了支持properties格式的配置文件&#xff0c;还支持另外两种格式的配置文件。三种配置文件格式分别如下: properties格式…

Python学习笔记_基础篇(二)_数据类型之字符串

一.基本数据类型 整数&#xff1a;int 字符串&#xff1a;str(注&#xff1a;\t等于一个tab键) 布尔值&#xff1a; bool 列表&#xff1a;list 列表用[] 元祖&#xff1a;tuple 元祖用&#xff08;&#xff09; 字典&#xff1a;dict 注&#xff1a;所有的数据类型都存在想对应…

TFTP Server

简介 TFTP&#xff08;Trivial File Transfer Protocol,简单文件传输协议&#xff09;是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议&#xff0c;提供不复杂、开销不大的文件传输服务。端口号为69。 TFTP和FTP的区别 安全性区别 FTP支持登录安全&…

ATF(TF-A)安全通告 TFV-9 (CVE-2022-23960)

ATF(TF-A)安全通告汇总 目录 一、ATF(TF-A)安全通告 TFV-9 (CVE-2022-23960) 二、CVE-2022-23960 一、ATF(TF-A)安全通告 TFV-9 (CVE-2022-23960) Title TF-A披露通过分支预测目标重用&#xff08;branch prediction target reuse&#xff09;引发的前瞻执行处理器漏洞 CV…

Softmax Strategy

1. epsilon-greedy strategy 11111 2. UCB strategy 222 3. Softmax strategy 333 4. Gradient strategy 444 References [1] 科学网—【RL系列】Multi-Armed Bandit笔记——Softmax选择策略 - 管金昱的博文 [2] The Epsilon-Greedy Algorithm | James D. McCaffrey

【软考】2023系统架构设计师考试

目录 1 软考资格设置 2 考试报名 3 考试准备 4 参加考试 5 考试感受 6 其他 1 软考资格设置 2 考试报名 报名网址&#xff1a;https://www.ruankao.org.cn/ 3 考试准备 4 参加考试 2023年下半年系统架构设计师考试时间为11月4、5日。 5 考试感受 6 其他 最近好像有地区…

vue element 多图片组合预览

定义组件&#xff1a;preview-image <template><div><div class"imgbox"><divclass"preview-img":class"boxClass"v-if"Imageslist 3 ||Imageslist 5 ||Imageslist 7 ||Imageslist 8 ||Imageslist > 9"&…

LangChain手记 Models,Prompts and Parsers

整理并翻译自DeepLearning.AILangChain的官方课程&#xff1a;Models,Prompts and Parsers 模型&#xff0c;提示词和解析器&#xff08;Models, Prompts and Parsers&#xff09; 模型&#xff1a;大语言模型提示词&#xff1a;构建传递给模型的输入的方式解析器&#xff1a;…