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} } }
94
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
