Ajax & Json
1、Ajax
1.1、概念
ASynchronous JavaScript And XML 异步的 JavaScript 和 XML
异步和同步:客户端和服务器端相互通信的基础上
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pDvc79CJ-1637242119112)(素材/同步和异步.png)]
- 同步:客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 异步:客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
提升用户体验。
1.2、实现方式
-
原生的 JS 实现方式(了解)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //定义方法 function fun() { //发送异步请求 //1.创建核心对象 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //2. 建立连接 /* 参数: 1. 请求方式:GET、POST * get方式,请求参数在URL后边拼接。send方法为空参 * post方式,请求参数在send方法中定义 2. 请求的URL: 3. 同步或异步请求:true(异步)或 false(同步) */ xmlhttp.open("GET","ajaxServlet?username=tom",true); //3.发送请求 xmlhttp.send(); //4.接受并处理来自服务器的响应结果 //获取方式 :xmlhttp.responseText //什么时候获取?当服务器响应成功后再获取 //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。 xmlhttp.onreadystatechange=function() { //判断readyState就绪状态是否为4,判断status响应状态码是否为200 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //获取服务器的响应结果 var responseText = xmlhttp.responseText; alert(responseText); } } } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun();"> <input> </body> </html>
再创建一个 AjaxServlet:(将线程 “睡觉” 5 秒)
package com.example.day22_ajax_json; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io.IOException; @WebServlet("/ajaxServlet") public class AjaxServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.获取请求参数 String username = request.getParameter("username"); //处理业务逻辑,耗时 try { Thread.sleep(5000); } catch (InterruptedException e) { e.printStackTrace(); } //2.打印 username System.out.println(username); //3.响应 response.getWriter().write("hello:" + username); } }
显示效果:我们先改为同步
xmlhttp.open("GET","ajaxServlet?username=tom",true);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tel6swoC-1637242119114)(素材/同步示例.png)]
改为异步后,点击提交后,还可以在文本框中输入文字。(局部刷新)
-
JQeury 实现方式
-
$.ajax()
语法:
$.ajax({键值对});
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="libs/jquery-3.3.1.min.js"></script> <script> //定义方法 function fun() { //使用$.ajax()发送异步请求 $.ajax({ url:"ajaxServlet111", //请求路径 type:"POST", //请求方式 // data:"username=jack&age=23", //请求参数 data:{"username":"jack","age":23}, success:function (data) { alert(data); }, //响应成功后的回调函数 error:function () { alert("出错啦...") }, //表示如果请求响应出现错误,会执行的回调函数 dataType:"text" //设置接收到的响应数据的格式 }); } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun();"> <input> </body> </html>
-
$.get()
:发送 get 请求语法:
$.get(url, [data], [callback], [type])
- url:请求路径
- data:请求参数
- callback:回调函数
- type:响应结果的类型
-
$.post()
:发送 post 请求语法:
$.post(url, [data], [callback], [type])
- url:请求路径
- data:请求参数
- callback:回调函数
- type:响应结果的类型
//定义方法 function fun() { //使用$.ajax()发送异步请求 $.get("ajaxServlet", {username:"rose"}, function (data) { alert(data); }); }
-
2、Json
2.1、概念
JavaScript Object Notation JavaScript 对象表示法
比较麻烦的方式:
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
JSON 的方式:
var p = {"name":"张三","age":23,"gender":"男"};
- json 现在多用于存储和交换文本信息的语法
- 进行数据的传输
- JSON 比 XML 更小、更快,更易解析
2.2、语法
-
基本规则
- 数据在名称/值对中:json 数据是由键值对构成的
- 键用引号(单双都行)引起来,也可以不使用引号
- 值的取值类型:
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在方括号中) {“persons”:[{},{}]}
- 对象(在花括号中) {“address”:{“province”:“陕西”…}}
- null
- 数据由逗号分隔:多个键值对由逗号分隔
- 花括号保存对象:使用 {} 定义 json 格式
- 方括号保存数组:[]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //1.定义基本格式 var person = {"name":"张三", age:23, 'gender':true}; //获取name的值 var name = person.name; alert(name); var name = person["name"]; alert(name); // alert(person); //2.嵌套格式 {}-->[] var persons = {"persons": [ {"name":"张三", "age":23, "gender":true}, {"name":"李四", "age":24, "gender":true}, {"name":"王五", "age":25, "gender":false} ] } ; // alert(persons); //获取第三个 var name1 = persons.persons[2].name; alert(name1); //3.嵌套格式 []-->{} var ps = [ {"name":"张三", "age":23, "gender":true}, {"name":"李四", "age":24, "gender":true}, {"name":"王五", "age":25, "gender":false} ]; // alert(ps); //获取第二个 alert(ps[1].name); </script> </head> <body> </body> </html>
- 数据在名称/值对中:json 数据是由键值对构成的
-
获取数据
- json对象.键名
- json对象[“键名”]
- 数组对象[索引]
- 遍历
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //1.定义基本格式 var person = {"name":"张三", age:23, 'gender':true}; var ps = [ {"name":"张三", "age":23, "gender":true}, {"name":"李四", "age":24, "gender":true}, {"name":"王五", "age":25, "gender":false} ]; //获取person对象中所有的键和值 //for in 循环 for (var key in person){ //这样的方式获取不行,因为相当于 person."name" // alert(key + ":" + person.key); alert(key + ":" + person[key]); } //获取ps中的所有值 for (var i = 0; i < ps.length; i++){ var p = ps[i]; for (var key in p){ alert(key + ":" + p[key]); } } </script> </head> <body> </body> </html>
-
JSON 数据和 Java 对象的相互转换
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3cXpVb4E-1637242119116)(素材/JSON.png)]
JSON 解析器:
- 常见的解析器:Jsonlib,Gson,fastjson,jackson
-
Java 对象转换 JSON
使用步骤:
-
导入 jackson 的相关 jar 包;
-
创建 Jackson 核心对象 ObjectMapper;
-
调用 ObjectMapper 的相关方法进行转换。
-
转换方式:
writeValue(参数1,obj)
:参数1:
File:将 obj 对象转换为 JSON 字符串,并保存到指定的文件中;
Writer:将 obj 对象转换为 JSON 字符串,并将 json 数据填充到字符输出流中;
OutputStream:将 obj 对象转换为 JSON字符串,并将 json 数据填充到字节输出流中。
writeValueAsString(obj)
:将对象转为 json 字符串 -
注解
- @JsonIgnore:排除属性
- @JsonFormat:属性值得格式化
-
复杂 java 对象转换
- List:数组
- Map:对象格式一致
-
-
-
JSON 转为 Java 对象
-
导入 jackson 的相关 jar 包;
-
创建 Jackson 核心对象 ObjectMapper;
-
调用 ObjectMapper 的相关方法进行转换。
readValue(json字符串数据, Class)
-
package com.example.test; import com.example.domain.Person; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import org.junit.Test; import javax.print.attribute.PrintServiceAttributeSet; import java.io.File; import java.io.FileWriter; import java.util.*; public class JacksonTest { //Java对象转为JSON字符串 @Test public void test1() throws Exception { //1.创建Person对象 Person p = new Person(); p.setName("张三"); p.setAge(23); p.setGender("男"); //2.创建Jackson的核心对象 ObjectMapper ObjectMapper mapper = new ObjectMapper(); //3.转换 /* 转换方法: writeValue(参数1,obj) 参数1: File:将obj对象转换为JSON字符串,并保存到指定文件中 Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中 OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中 writeValueAsString(obj):将对象转为json对象 */ String json = mapper.writeValueAsString(p); System.out.println(json); // {"name":"张三","age":23,"gender":"男"} // mapper.writeValue(new File("G:\\a.txt"), p); //writeValue.将数据关联到 Write 中 mapper.writeValue(new FileWriter("G:\\b.txt"), p); } @Test public void test2() throws Exception { //1.创建Person对象 Person p = new Person(); p.setName("张三"); p.setAge(23); p.setGender("男"); p.setBirthday(new Date()); //2.创建Jackson的核心对象 ObjectMapper ObjectMapper mapper = new ObjectMapper(); //3.转换 String json = mapper.writeValueAsString(p); System.out.println(json); // {"name":"张三","age":23,"gender":"男","birthday":1637240800218} 没有@JsonIgnore // {"name":"张三","age":23,"gender":"男","birthday":"2021-11-18"} @JsonFormat(pattern = "yyyy-MM-dd") } @Test public void test3() throws Exception { //1.创建Person对象 Person p = new Person(); p.setName("张三"); p.setAge(23); p.setGender("男"); p.setBirthday(new Date()); Person p1 = new Person(); p1.setName("张三"); p1.setAge(23); p1.setGender("男"); p1.setBirthday(new Date()); Person p2 = new Person(); p2.setName("张三"); p2.setAge(23); p2.setGender("男"); p2.setBirthday(new Date()); // 创建List集合 List<Person> ps = new ArrayList<Person>(); ps.add(p); ps.add(p1); ps.add(p2); //2.创建Jackson的核心对象 ObjectMapper ObjectMapper mapper = new ObjectMapper(); //3.转换 String json = mapper.writeValueAsString(ps); // [{},{},{}] System.out.println(json); // [{"name":"张三","age":23,"gender":"男","birthday":"2021-11-18"},{"name":"张三","age":23,"gender":"男","birthday":"2021-11-18"},{"name":"张三","age":23,"gender":"男","birthday":"2021-11-18"}] } @Test public void test4() throws Exception { //1.创建Person对象 Map<String, Object> map = new HashMap<String, Object>(); map.put("name", "张三"); map.put("age", 23); map.put("gender", "男"); //2.创建Jackson的核心对象 ObjectMapper ObjectMapper mapper = new ObjectMapper(); //3.转换 String json = mapper.writeValueAsString(map); System.out.println(json); // {"gender":"男","name":"张三","age":23} } //演示 JSON 字符串为 Java 对象 @Test public void test5() throws Exception { //1.初始化JSON字符串 String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}"; //2.创建ObjectMapper对象 ObjectMapper mapper = new ObjectMapper(); //3.转换为 Java 对象 Person Person person = mapper.readValue(json, Person.class); System.out.println(person); // Person{name='张三', age=23, gender='男', birthday=null} } }