前言
🎄：CSDN的小伙伴们大家好，今天跟大家分享一个我们在web开发中常用的前后台数据交互的两款工具AJax和JSON。如果这篇文章对你有用，麻烦给我点个小赞以示鼓励吧🎄
🏡：博客主页：空山新雨后的java知识图书馆
☀️：今天天气晴朗，春天的温度。
📝: 生活不是苦难，也不是享乐，而是我们应当为之奋斗并坚持到底的事业。
——托克维尔📝
📖上一篇文章：JQuery基础学习📖
👏欢迎大家一起学习，进步。加油👊
文章目录
一、Ajax相关概念
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
异步与同步的概念
在客户端和服务器端相互通信的基础上，
同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
那么Ajax作为异步的JavaScript和xml，就意味着，可以在不重新加载网页的资源的情况下，对部分网页内容进行更新。
就比如我们在搜索百度或者其他平台进行搜索的时候，当你搜索的时候，会出现一个联想的框，这个框就是Ajax技术实现的，在不重新加载资源的情况下，对部分内容进行更新的操作。
二、AJax的实现方式
2.1、JavaScript原生的实现方式
这种实现方式一般用的很少，可不用记忆
<!--
*@packageName
*@className origin
*@author wang
*@date 2022/3/25 9:41
*@Description
--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>原生的js实现异步请求</title></head><script>functionfun(){//创建Ajax对象var xhttp;if(window.XMLHttpRequest){
xhttp =newXMLHttpRequest();}else{// code for IE6, IE5
xhttp =newActiveXObject("Microsoft.XMLHTTP");}//建立连接/*
参数：
1. 请求方式：GET、POST
* get方式，请求参数在URL后边拼接。send方法为空参
* post方式，请求参数在send方法中定义
2. 请求的URL：
3. 同步或异步请求：true（异步）或 false（同步）
*///异步// xhttp.open("get","../ajaxServlet?username=tom",true);//同步
xhttp.open("get","../ajaxServlet?username=tom",true);//发送请求
xhttp.send()//接收响应并处理
xhttp.onreadystatechange=function(){if(this.readyState ==4&&this.status ==200){//接收响应数据并弹出var responseText = xhttp.responseText;alert(responseText)}};}//</script><body><inputtype="button"value="发送异步请求"onclick="fun()"><input></body></html>
2.2、JQuery的实现方式
2.2.1、方式一：
$.ajax
语法：
$.ajax({键值对});
代码演示
<!--
*@packageName
*@className origin
*@author wang
*@date 2022/3/25 9:41
*@Description
--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Jquery的方式实现异步请求</title><scriptsrc="../js/jquery-3.3.1.min.js"></script><script>functionfun(){
$.ajax({
url:"../ajaxServlet",//方式一// date:"username=zhangsan&age=16"// 方式二
data:{"username":"zhangsan","age":13},
type:"post",//默认为getsuccess:function(date){//该date为服务器响应的数据alert(date);},error:function(){alert("出现错误")},
dataType:"text"//设置接受到的响应数据的格式});}</script></head><body><inputtype="button"value="发送异步请求"onclick="fun()"><input></body></html>
效果演示
2.2.2、方式二：
$.get()：发送get请求
语法：
$.get(url, [data], [callback], [type])
- 参数： * url：请求路径 * data：请求参数 * callback：回调函数 * type：响应结果的类型
代码演示
<!--
*@packageName
*@className origin
*@author wang
*@date 2022/3/25 9:41
*@Description
--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Jquery的方式实现异步请求2,get方式</title><scriptsrc="../js/jquery-3.3.1.min.js"></script><script>/*
* $.get()：发送get请求
* 语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
* */functionfun(){
$.get("../ajaxServlet",{username:"lisa", age:13},function(data){alert(data);},"text");}</script></head><body><inputtype="button"value="发送异步请求"onclick="fun()"><input></body></html>
效果演示
2.2.3、方式三：
$.post()：发送post请求
语法：
$.post(url, [data], [callback], [type])
- 参数： * url：请求路径 * data：请求参数 * callback：回调函数 *type：响应结果的类型
代码演示
<!--
*@packageName
*@className origin
*@author wang
*@date 2022/3/25 9:41
*@Description
--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Jquery的方式实现异步请求2,post方式</title><scriptsrc="../js/jquery-3.3.1.min.js"></script><script>/*
* $.get()：发送get请求
* 语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
* */functionfun(){
$.post("../ajaxServlet",{username:"peter", age:13},function(data){alert(data);},"text");}</script></head><body><inputtype="button"value="发送异步请求"onclick="fun()"><input></body></html>
效果演示
三、JSON相关概念
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法，类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON与xml的区别
xml表示
<?xml version="1.0" encoding="utf-8"?><country><name>中国</name><province><name>黑龙江</name><cities><city>哈尔滨</city><city>大庆</city></cities></province><province><name>广东</name><cities><city>广州</city><city>深圳</city><city>珠海</city></cities></province><province><name>台湾</name><cities><city>台北</city><city>高雄</city></cities></province><province><name>新疆</name><cities><city>乌鲁木齐</city></cities></province></country>
JSON表示
{
"name": "中国",
"province": [{
"name": "黑龙江",
"cities": {
"city": ["哈尔滨", "大庆"]
}
}, {
"name": "广东",
"cities": {
"city": ["广州", "深圳", "珠海"]
}
}, {
"name": "台湾",
"cities": {
"city": ["台北", "高雄"]
}
}, {
"name": "新疆",
"cities": {
"city": ["乌鲁木齐"]
}
}]
}
四、JSON的语法规则
4.1、基本的语法规则
JSON 语法是 JavaScript 对象表示语法的子集。
数据在名称/值对中
数据由逗号分隔，多个数据（键值对）之间由逗号分开
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象
JSON的数据都是由键值对构成的，JSON的书写格式：key：value
JSON的键可以是用引号引上，单引号双引号都可以。
值的取值类型为以下类型
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中） {“persons”:[{},{}]}
- 对象（在花括号中） {“address”:{“province”：“陕西”…}}
- null
JSON获取数据的方式
- json对象.键名
- json对象[“键名”]
- 数组对象[索引]代码演示
<!--
*@packageName
*@className Json
*@author wang
*@date 2022/3/25 15:05
*@Description
--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Json</title></head><script>//Json的基本定义格式var person ={"name":"张三","age":23,"gender":true};// alert(person);//Json的取值格式/*
* 1. json对象.键名
2. json对象["键名"]
3. 数组对象[索引]*///1. json对象.键名var age = person.age;var name = person.name;// alert(name +":" + age);//张三：23//JSON的嵌套定义格式 {} ->[]var persons ={"persons":[{"name":"张三","age":23,"gender":true},{"name":"李四","age":25,"gender":true},{"name":"王五","age":26,"gender":true}]};// alert(persons);// JSON获取值的格式2. json对象["键名"]var name1 = persons["persons"][1].name;// alert(name1)//李四//JSON的嵌套定义格式的第二种[]->{}var persons2 =[{"name":"张三","age":23,"gender":true},{"name":"张三","age":23,"gender":true},{"name":"王五","age":23,"gender":true}];// alert(persons2);// JSON获取值的格式3. 数组对象[索引]*/var name2 = persons2[2].name;alert(name2);//王五</script><body></body></html>
JSON实现遍历的方式
<!--
*@packageName
*@className Json
*@author wang
*@date 2022/3/25 15:05
*@Description
--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Json2遍历</title></head><script>//Json的基本定义格式var person ={"name":"张三","age":23,"gender":true};//JSON的嵌套定义格式的第二种[]->{}var persons2 =[{"name":"张三","age":23,"gender":true},{"name":"李四","age":23,"gender":true},{"name":"王五","age":23,"gender":true}];//Json的遍历格式for(var key in person){//通过key获取值的方式，JSON对象[key],因为获取的key字符串形式的，所以可以用这种方式获取值，//而如果直接这样Json对象.key，则相当于Json."key"，当然是无法获取到值的。//alert(key+":" + person.key);//gender:undefined.....//注意，key本身就是字符串形式，因此不需要加引号了// alert(key + ":" + person[key]);//gender:true.....}//Json 遍历数组for(var i =0; i < persons2.length; i++){var p = persons2[i];for(var key in p){alert(key +":"+ p[key]);//name:张三....name:李四........}}</script><body></body></html>
# 五、JSON对象与java对象的相互转换
要实现JSON与java的互相转换，我们首先就得采用一些解析器，常见的解析器有Jsonlib，Gson，fastjson，jackson，今天我们使用Jackson，首先就需要导入Jackson的相关jar包，大家可以在CSDN搜索或者去官网下载。
5.1、JSON转为Java对象
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换 1. readValue(json字符串数据,Class)
5.2、Java对象转换JSON
使用步骤：
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换 1. 转换方法： 1、 writeValue(参数1，obj): 参数1：File：将obj对象转换为JSON字符串，并保存到指定的文件中Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中 2、*writeValueAsString(obj):将对象转为json字符串 2. 注解： 1. @JsonIgnore：排除属性。 2. @JsonFormat：属性值得格式化 * @JsonFormat(pattern = “yyyy-MM-dd”) 注解是为了将一些无法转换的数据类型改变为我们期望的样式， 注解的位置应该在实体类的属性上方，或者相应的get方法上面 3. 复杂java对象转换 1. List：类似数组 2. Map：转换之后与java对象格式一致
代码演示
packagecom.study.test;importcom.fasterxml.jackson.core.JsonProcessingException;importcom.fasterxml.jackson.databind.ObjectMapper;importcom.study.domain.Person;importorg.junit.Test;importjava.io.BufferedWriter;importjava.io.File;importjava.io.FileWriter;importjava.io.IOException;importjava.util.ArrayList;importjava.util.Date;importjava.util.HashMap;/**
* @author wang
* @version 1.0
* @packageName com.study.test
* @className JsonTransferTest
* @date 2022/3/25 16:15
* @Description JSON与java对象的转换测试类
*/publicclassJsonTransferTest{@TestpublicvoidtestJsonChangeTOJava()throwsIOException{Person zhangSan =newPerson("张三",22,"男");Person lisi =newPerson("李四",29,"男");//将java对象转换为JSON对象的方式一：/*1. 转换方法：
1、* writeValue(参数1，obj):
参数1：
File：将obj对象转换为JSON字符串，并保存到指定的文件中
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
2、* writeValueAsString(obj):将对象转为json字符串
*/// 2. 创建Jackson核心对象 ObjectMapperObjectMapper mapper =newObjectMapper();String json =null;// 先使用第二种方式进行转换try{
json = mapper.writeValueAsString(zhangSan);}catch(JsonProcessingException e){
e.printStackTrace();}System.out.println(json);//{"name":"张三","age":22,"gender":"男"}File file =newFile("E:\\javaPractice\\WebProject2\\Ajax&JSON\\src\\com\\study\\files\\a.txt");//第二种方式，写进文件里面
mapper.writeValue(file, zhangSan);FileWriter file2 =newFileWriter("E:\\javaPractice\\WebProject2\\Ajax&JSON\\src\\com\\study\\files\\b.txt");
mapper.writeValue(file2, lisi);}@TestpublicvoidtestJsonChangeTOJava2()throwsException{Person zhangSan =newPerson("张三",22,"男",newDate());Person lisi =newPerson("李四",29,"男",newDate());//注解来获取对应的转换之后的JSON对象ObjectMapper mapper =newObjectMapper();String z = mapper.writeValueAsString(zhangSan);System.out.println(z);//没有转换之前的输出：{"name":"张三","age":22,"gender":"男","date":1648197658090}格式不好看//使用@JsonIgnore注解之后：{"name":"张三","age":22,"gender":"男"}，对于某些需求来说也不够好//使用@JsonFormat(pattern = "yyyy-MM-dd")注解之后：{"name":"张三","age":22,"gender":"男","date":"2022-03-25"}//就可以达到我们想要的不同的结果了。}/**
* @Date 2022/3/25 16:58
* @Param
* @Return void
* @MetodName testJsonChangeTOJava3
* @Author wang
* @Description list集合的转换
*/@TestpublicvoidtestJsonChangeTOJava3()throwsException{Person zhangSan =newPerson("张三",22,"男",newDate());Person lisi =newPerson("李四",29,"男",newDate());Person wangwu =newPerson("王五",35,"男",newDate());//注解来获取对应的转换之后的JSON对象ArrayList<Person> people =newArrayList<>();
people.add(zhangSan);
people.add(lisi);
people.add(wangwu);ObjectMapper mapper =newObjectMapper();String z = mapper.writeValueAsString(people);System.out.println(z);//[{"name":"张三","age":22,"gender":"男","date":"2022-03-25"},// {"name":"李四","age":29,"gender":"男","date":"2022-03-25"},// {"name":"王五","age":35,"gender":"男","date":"2022-03-25"}]}/**
* @Date 2022/3/25 17:01
* @Param
* @Return void
* @MetodName testJsonChangeToJava4
* @Author wang
* @Description map集合转换为JSON对象
*/@TestpublicvoidtestJsonChangeToJava4()throwsException{HashMap<String,Object> map =newHashMap<>();
map.put("name","张三");
map.put("age",12);
map.put("gender","男");//创建ObjectMapper对象ObjectMapper mapper =newObjectMapper();//转换String s = mapper.writeValueAsString(map);System.out.println(s);//{"gender":"男","name":"张三","age":12}}/**
* @Date 2022/3/25 17:21
* @Param
* @Return void
* @MetodName testJsonChangeToJava5
* @Author wang
* @Description JSON转java对象
*/@TestpublicvoidtestJsonChangeToJava5()throwsException{String json ="{\"name\":\"王五\",\"age\":35,\"gender\":\"男\",\"date\":\"2022-03-25\"}";ObjectMapper mapper =newObjectMapper();Person person = mapper.readValue(json,Person.class);System.out.println(person);//Person{name='王五', age=35, gender='男'}}}
# 六、案例练习：校验用户名是否存在
案例描述：在我们注册一个网站的用户时，网站会对用户名进行一个去重的做法，也就是不能重复注册相同的名字，因此需要实现这个功能。
解决思路
1、首先可以在注册的页面给用户名标签绑定一个离焦事件，当用户输入完成时就发送Ajax请求，将用户名发送到服务器端的Servlet中。
2、Servlet在数据库中操作，查询有没有与该用户相同的名字，如果有，就可以存一个map集合，集合中方两对数据，类似下方代码
HashMap<String,Object> map =newHashMap<>();//说明存在相同的名字if(flag){//存储对应的数据// System.out.println("相同的我来了");
map.put("userExist",true);
map.put("msg","用户名太受欢迎了，请换一个用户名");}else{
map.put("userExist",false);
map.put("msg","用户名可用");}
3、将map集合转换为JSON对象，响应回客户端浏览器
4、当浏览器获取到服务器响应回来的数据之后，对userExist进行判断即可，分别显示想要的结果。
Servlet代码展示：
packagecom.study.web.Servlet;importcom.fasterxml.jackson.databind.ObjectMapper;importcom.study.service.UserService;importcom.study.service.UserServiceImpl;importorg.omg.CORBA.OBJECT_NOT_EXIST;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.IOException;importjava.util.HashMap;/**
* @author wang
* @version 1.0
* @packageName ${PACKAGE_NAME}
* @className ${NAME}
* @date 2022/3/25 19:36
* @Description ${description}
*/@WebServlet("/findUserServlet")publicclassFindUserServletextendsHttpServlet{@OverrideprotectedvoiddoPost(HttpServletRequest request,HttpServletResponse response)throwsServletException,IOException{//设置编码//解决服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：//1. $.get(type):将最后一个参数type指定为"json"// 2. 在服务器端设置MIME类型//也就是显示不了的问题//第二种方式就是设置mime类型
response.setContentType("application/json;charset=utf-8");// response.setContentType("text/html;charset=utf-8");//获取usernameString username = request.getParameter("username");//调用service层判断用户是否存在UserService service =newUserServiceImpl();boolean flag = service.checkUser(username);HashMap<String,Object> map =newHashMap<>();//说明存在相同的名字if(flag){//存储对应的数据// System.out.println("相同的我来了");
map.put("userExist",true);
map.put("msg","用户名太受欢迎了，请换一个用户名");}else{
map.put("userExist",false);
map.put("msg","用户名可用");}// System.out.println(map.toString());//将封装了数据的map集合转换成JSON对象ObjectMapper mapper =newObjectMapper();
mapper.writeValue(response.getWriter(), map);}@OverrideprotectedvoiddoGet(HttpServletRequest request,HttpServletResponse response)throwsServletException,IOException{this.doPost(request, response);}}
HTML页面
<!--
*@packageName
*@className case
*@author wang
*@date 2022/3/25 19:12
*@Description
--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>用户名校验</title><scriptsrc="../js/jquery-3.3.1.min.js"></script><script>//入口函数$(function(){//给username绑定一个鼠标离焦事件$("input[name=username]").blur(function(){//获取username输入框的值var username =$(this).val();//发送Ajax请求，/*期望服务器返回的格式：如果名字相同的存在的情况：{"userExist":true,"msg","用户名太受欢迎了，请换一个用户名"}
如果名字不同的情况存在：{"userExist":false,"msg","用户名可用"}
* */
$.get("/findUserServlet",{username: username},function(data){//获取span标签对象var span =$("#username_check");//判断响应会来的数据的userExist值是否为true// alert(data.userExist);// alert(data.msg);if(data.userExist){//为true,代表存在相同的名字
span.css("color","red");
span.html(data.msg);}else{//为false，则代表不存在相同的名字
span.css("color","green");
span.html(data.msg);}});})});</script></head><body><inputtype="text"name="username"placeholder="请输入用户名"><spanid="username_check"></span><br><inputtype="password"name="password"placeholder="请输入密码"><br><inputtype="submit"value="提交注册"></body></html>
本文转载自: https://blog.csdn.net/ww166955/article/details/123830734
版权归原作者 空山新雨后~ 所有， 如有侵权，请联系我们删除。
版权归原作者 空山新雨后~ 所有， 如有侵权，请联系我们删除。