* Asynchronous Javascript And XML”(异步 JavaScript 和 XML)
* 异步和同步:客户端和服务器端相互通信的基础上
* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
提升用户的体验
* 语法:$.ajax({键值对});
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误,会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
<script src="/js/jquery-3.3.1.min.js"></script>
<script>
//定义方法:
function fun() {
//使用$.ajax()发送异步请求
$.ajax({
url:"servlet",//请求路径
type:"POST",//请求方式
//data:"username=jack&age=23",//请求参数
data:{"username":"jack","age":"23"},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦。。。")
},//表示如果请求响应出现错误,会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
}
</script>
* 语法:$.get(url, [data], [callback], [type])
* 参数:
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型
<script>
//定义方法:
function fun() {
$.get("servlet",{username:"silent"},function (data) {
alert(data);
});
}
</script>
* 语法:$.post(url, [data], [callback], [type])
* 参数:
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型
<script>
//定义方法:
function fun() {
$.post("servlet",{username:"silent"},function (data) {
alert(data);
});
}
</script>
* JavaScript Object Notation JavaScript对象表示法
* json现在多用于存储和交换文本信息的语法
* 进行数据的传输
* JSON 与 XML 更小、更快,更容易解析
* 数据在名称/值对中:json数据是由键值对构成的
* 键用引号(单双都可)引起来,也可以不适用引号
* 值得取值类型:
1.数字:(整数或浮点数)
2.字符串(在双引号中)
3.逻辑值(true 或 false)
4.数组:(在方括号中) {"person":[{},{}]}
5.对象:(在花括号中) {"address":{"province":"陕西"}...}
6.null
<script>
//定义基本格式:
var person = {name: "张三", age: 12, gender: true};
// alert(person);
//嵌套格式: {} - []
var persons = {
"persons": [{name: "张三", age: 12, gender: true},
{name: "张三", age: 12, gender: true},
{name: "张三", age: 12, gender: true}
]
};
// alert(persons);
//嵌套格式:[] - {}
var ps = [{name: "张三", age: 12, gender: true},
{name: "张三", age: 12, gender: true},
{name: "张三", age: 12, gender: true}
];
alert(ps);
</script>
1. json对象.键名
2. json对象["键名"]
3. 数组对象[索引]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//定义基本格式:
var person = {name: "张三", age: 12, gender: true};
// alert(person);
//获取张三的值
//var name = person.name;
var name = person["name"];
// alert(name);
//嵌套格式: {} - []
var persons = {
"persons": [{name: "张三", age: 12, gender: true},
{name: "张三", age: 12, gender: true},
{name: "王五", age: 12, gender: true}
]
};
// alert(persons);
//获取王五的值
var name1 = persons.persons[2].name;
// alert(name1);
//嵌套格式:[] - {}
var ps = [{name: "张三", age: 12, gender: true},
{name: "李四", age: 12, gender: true},
{name: "张三", age: 12, gender: true}
];
// alert(ps);
//获取李四的值
alert(ps[1].name);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//定义基本格式:
var person = {name: "张三", age: 12, gender: true};
//嵌套格式:[] - {}
var ps = [{name: "张三", age: 12, gender: true},
{name: "李四", age: 12, gender: true},
{name: "张三", age: 12, gender: true}
];
//遍历person
//for in 循环换
/* for (var key in person) {
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>
* 常见的解析器:
Jsonlib, Gson, fastjson, jackson
* 使用步骤:
1.导入Jackson的相关jar包
2.创建Jackson的核心对象 ObjectMapper
3.调用ObjectMapper的相关方法进行转换
* readValue(json字符串数据,Class)
@Test
public void test5() throws IOException {
//1.初始化json字符串
String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":12}";
//2.创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//3.转换为Java对象,Person对象
Person person = mapper.readValue(json, Person.class);
System.out.println(person);
}
* 使用步骤:
1.导入Jackson的相关jar包
2.创建Jackson的核心对象 ObjectMapper
3.调用ObjectMapper的相关方法进行转换
* WriteValue(参数1,obj):
* 参数1:
File:将obj对象转换为JSON字符串,并保存到指定的文件中
Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
OutputStream:将obj对象转换为json字符串,并将json数据填充到字节输出流中
* WritevalueAsString(obj):将对象转为json字符串
package cn.silentvoice.test;
import cn.silentvoice.domain.Person;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;
import java.io.File;
import java.io.FileWriter;
/**
* Created by NiuLinXuan on 2020-05-03 19:15
*/
public class JacksonTest {
//Java对象转为JSON字符串
@Test
public void test1() throws Exception {
//1.创建Person对象
Person person = new Person();
person.setName("张三");
person.setAge(12);
person.setGender("男");
//2.创建jackson的核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
//3.转换
String str = mapper.writeValueAsString(person);
// System.out.println(str);
//writeValue 将数据写到d://a.txt文件中
mapper.writeValue(new File("d://a.txt"),person);
//writeValue.将数据关联到writer中
mapper.writeValue(new FileWriter("d://b.txt"),person);
}
}
1. @JsonIgnore:排除属性
2. @JsonFormat:属性值的格式化
//@JsonIgnore 排除属性
@JsonFormat(pattern = "yyyy-MM-dd")
private Date birthday;
public Date getBirthday() {
return birthday;
}
@Test
public void test2() throws Exception {
//1.创建Person对象
Person person = new Person();
person.setName("张三");
person.setAge(12);
person.setGender("男");
person.setBirthday(new Date());
//转换:
ObjectMapper mapper = new ObjectMapper();
String str = mapper.writeValueAsString(person);
System.out.println(str);
}
1.List:数组
2.Map:对象格式一致
@Test
public void test3() throws JsonProcessingException {
Person p1 = new Person();
p1.setName("张三");
p1.setAge(23);
p1.setGender("男");
Person p2 = new Person();
p2.setName("张三");
p2.setAge(23);
p2.setGender("男");
Person p3 = new Person();
p3.setName("张三");
p3.setAge(23);
p3.setGender("男");
//创建List对象
List list = new ArrayList();
list.add(p1);
list.add(p2);
list.add(p3);
//转换
ObjectMapper listMapper = new ObjectMapper();
String str = listMapper.writeValueAsString(list);
System.out.println(str);
}
//创建Map对象
@Test
public void test4() throws JsonProcessingException {
Map<String,Object> map = new HashMap<String, Object>();
map.put("name","张三");
map.put("age",12);
map.put("gender","男");
//转换
ObjectMapper mapMapper = new ObjectMapper();
String str = mapMapper.writeValueAsString(map);
System.out.println(str);
}
* 校验用户名是否存在
1. 服务器响应的数据,在客户端使用时,要想当做json数据格式使用。有两种解决方案:
1. $.get(type):将最后一个参数type指定为"json"
2. 在服务器端设置MIME类型
response.setContentType("application/json;charset=utf-8");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>regist</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//在页面加载完成后
$(function () {
//给username绑定blur事件
$("#username").blur(function () {
//获取username文本框输入的值
var username = $(this).val();
//发送ajax请求
//期望服务器响应回的数据格式:{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
$.get("findUserServlet",{username:username},function (data) {
//判断userExsit键的值是否是true
var span = $("#s_username");
if (data.userExsit) {
//用户名存在
span.css("color","red");
span.html(data.msg);
} else {
//用户名不存在
span.css("color","green");
span.html(data.msg);
}
});
});
});
</script>
* FindUserServlet.java
* ```java
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
/**
* Created by NiuLinXuan on 2020-05-03 22:23
*/
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取用户名
String username = request.getParameter("username");
//2.调用service层判断用户名是否存在
//期望服务器响应回的数据格式:{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
//设置响应的格式为json
response.setContentType("application/json;charset=utf-8");
Map<String, Object> map = new HashMap<String,Object>();
if ("tom".equals(username)) {
//存在
map.put("userExsit",true);
map.put("msg","此用户名太受欢迎,请更换一个");
} else {
//不存在
map.put("userExsit",false);
map.put("msg","用户名可用");
}
//将map转为json,并且传递给客户端
//将map转换为json
ObjectMapper mapper = new ObjectMapper();
//并且传递给客户端
mapper.writeValue(response.getWriter(),map);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}