Ajax
1、概念
Asynchronous JavaScript And XML： 异步的JavaScript和XML
1、异步和同步：客户端和服务器通信的基础上
同步：客户端必须等服务器的响应，在等待的时间内不可以做其它的操作
异步：客户端不需要等待服务器的响应，在服务器处理请求的过程中可以干其它的事情
Ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术
通过与后台服务器少量数据交换，Ajax可以使网页实现异步更新，这意味着可以不在重新加载整个网页的情况下，对网站的某部分进行更新
传统的网页（不使用Ajax）如果需要更新内容，则需要加载整个页面
提升用户的体验
2、实现方式
1、原生的js实现方式 (了解)
2、JQuery实现方式
1、$.ajax
语法：$.ajax({键值对});
//使用$.ajax()的方式发送异步请求
$.ajax({
url:"ajaxServlet",//请求地址
type:"POST",//请求方式
//data:"username=admin&age=12",//请求参数
data:{"username":"admin","age":"12"},
success:function (data) {//data表示是变量，会去接收服务器响应的值
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...");
},//响应出错执行的回调函数
dataType:"text"//设置响应的数据格式
})
2、$.get
语法：$.get(url,[data],[callback],[type])
参数：
url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型
<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
function fun() {
$.get("ajaxServlet",{username:"xiao"},function (aaa) {
alert(aaa);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
3、$.post
语法：$.post(url,[data],[callback],[type])
参数：
url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型
<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
function fun() {
$.post("ajaxServlet",{username:"xiao"},function (aaa) {
alert(aaa);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
JSON
1、概念
JavaScript Object Notation 翻译：JavaScript对象表示法
JSON多用于存储和交换信息的语法
进行数据的传输，类似于xml，但是比xml速度更快，更易解析
2、语法
1、基本规则
数据在名称/值对中：json数据是由键值对构成的
键用引号（单双都行）引起来，也可以不使用引号
值的取值类型：
1、数字（整数或浮点数）
2、字符串（在双引号中）
3、逻辑值（true或false）
4、数组（在方括号中）{“persons”:[{},{}]}
5、对象（在花括号中）{“address”:{“province”:“陕西”},…}
6、null
数据由逗号分隔：多个键值对由逗号分隔
花括号保存对象：使用{ }定义json格式
方括号保存数组：[ ]
2、获取数据
1、json对象.键名
2、json对象.[“键名”]
3、数组对象[索引].属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//1、定义基本格式
var person={"name":"张三","age":13};
//获取数据，获取name属性的值
var name=person.name;
var name1=person["name"];
//alert(person)
//2、嵌套格式 {}--->[]
var persons={
"persons":[
{"name":"张三","age":23,"gender":true},
{"name":"李四","age":22,"gender":true},
{"name":"王五","age":21,"gender":false}
]
};
//alert(persons)
//获取王五 对象名.键名.属性
var name2=persons.persons[2].name;
//3、嵌套格式 []--->{}
var ps=[
{"name":"张三","age":23,"gender":true},
{"name":"李四","age":22,"gender":true},
{"name":"王五","age":21,"gender":false}
];
alert(ps)
//获取李四
var name3=ps[1].name;
</script>
</head>
<body>
</body>
</html>
JSON数据和Java对象的相互转换
JSON解析器
常见的解析器：Jsonlib，Gson，fastjson，，jackson（springmvc框架内置解析器）
JSON转为Java对象
使用步骤
1、导入Jackson相关架包
2、 创建Jackson核心对象 ObjectMapper
3、使用ObjectMapper相关方法进行转换
//JSON对象转换为Java对象
@Test
public void test5() throws Exception {
//1、创建json字符串
String json="{\"manger\":\"男\",\"name\":\"张三\",\"age\":20}";
//2、创建Jackson对象
ObjectMapper mapper=new ObjectMapper();
//3、转换
Person person=mapper.readValue(json,Person.class);
System.out.println(person);
}
Java对象转为JSON
使用步骤
1、导入Jackson相关架包
2、 创建Jackson核心对象 ObjectMapper
3、使用ObjectMapper相关方法进行转换
package com.project.test;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.project.entity.Person;
import org.junit.Test;
import java.io.File;
import java.io.FileWriter;
public class JacksonTest {
//java对象转为JSON
@Test
public void test1() throws Exception {
//1、新建person对象
Person p=new Person();
p.setName("张三");
p.setAge(20);
p.setManger("男");
//2、创建Jackson核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
//3、转换
/*
转换方法：
writeValue（参数1，obj）
参数1：
File：将obj对象转换为JSON字符串，并保存到指定文件中
write：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
*/
//将Java数据转换成json字符串输出到控制台
String s=mapper.writeValueAsString(p);
//{"name":"张三","age":20,"manger":"男"}
System.out.println(s);//{"name":"张三","age":20,"manger":"男"}
//将数据写道指定文件中（d://a.txt）
//mapper.writeValue(new File("d://a.txt"),p);
//将数据关联到write中
mapper.writeValue(new FileWriter("d://b.txt"),p);
}
}
4、注解
（1）@JsonIgnore：排除该属性
（2）@JsonFormat：属性值的格式化
5、复杂对象转换
（1）list：数组
//复杂对象的转换，list
@Test
public void test3() throws Exception {
//1、新建person对象
Person p = new Person();
p.setName("张三");
p.setAge(20);
p.setManger("男");
Person p1 = new Person();
p.setName("张三");
p.setAge(20);
p.setManger("男");
Person p2 = new Person();
p.setName("张三");
p.setAge(20);
p.setManger("男");
List<Person> list = new ArrayList<Person>();
list.add(p);
list.add(p1);
list.add(p2);
//2、创建Jackson对象
ObjectMapper mapper=new ObjectMapper();
//转换
String s=mapper.writeValueAsString(list);
System.out.println(s);
}
（2）map：对象格式一致
//复杂对象的转换，map
@Test
public void test4() throws Exception {
//1、创建map对象
Map<String,Object> map=new HashMap<String,Object>();
map.put("name","张三");
map.put("age",20);
map.put("sex","男");
//2、创建Jackson对象
ObjectMapper mapper=new ObjectMapper();
//转换
String s=mapper.writeValueAsString(map);
System.out.println(s);
}
注意：
1、服务器响应的数据，在客户端使用时，要想当作json格式来使用
(1) $.get(type)：将最后一个参数类型type指定为 “json”
(2) 在服务端设置MIME类型
//表示指定服务器返回的类型为json
response.setContentType("application/json");
1204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
