1、Ajax：异步的JavaScript和XML
1.1、Ajax的作用：
①、与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了
②、异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验等等…
1.2、Ajax快速入门：
//Servlet的编写
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//响应数据
response.getWriter().write("Hello ajax!");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
html的编写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1、创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、发送请求
/**
* 参数一表示请求的方式，参数二要写全路径
* */
xhttp.open("GET", "http://localhost:8080/test/ajaxServlet");
xhttp.send();
//3、获取响应
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
//this.responseText就是返回的数据
alert(this.responseText);
}
};
</script>
</body>
</html>
然后浏览器一访问这个html就会调用alert输出里面的信息。
1.3、用户注册案例，当用户在注册框输入用户名后的鼠标离开后，就会自动校验该用户名是否可用，实现的思路如下所示：
①、编写Servlet
@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取username
String username = request.getParameter("username");
//根据username调用service中的方法查询User对象
//用户和前端进行交互的判断标志，表明是否查找成功
boolean flag = true;
//响应标记
response.getWriter().write("" + flag);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
②、编写html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<script>
//1、给用户输入绑定焦点事件
document.getElementById("username").onblur = function () {
//2、发送Ajax请求
//获取用户输入的值
let username = this.value;
//2.1、创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.2、发送请求
/**
* 参数一表示请求的方式，参数二要写全路径
* */
xhttp.open("GET", "http://localhost:8080/test/selectUserServlet");
xhttp.send();
//2.3、获取响应
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
//this.responseText就是返回的数据
if (this.responseText == "true") {
//用户存在，显式提示信息，可以设置标签中的display属性来确定是否显示该标签
document.getElementById("username_err").style.display = '';
} else {
document.getElementById("username_err").style.display = 'none';
}
}
};
}
</script>
</body>
</html>
2、Axios
2.1、快速入门：
2.2、Axios请求方式别名
3、JSON
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
3.1、JSON基础语法
3.2、JSON数据和Java对象的转换
使用Fastjson库可以快捷完成完成我们的需求！！！！Fastjson库的使用如下所示：
请求数据：JSON字符串转为)ava对象
响应数据：Java对象转为SON字符串
public class Demo1 {
@Test
public void test1(){
//1、将Java对象转换为JSON字符串
Person p = new Person("zhangsan",21);
String s = JSON.toJSONString(p);
System.out.println("Java对象转换为JSON字符串为:" + s); //Java对象转换为JSON字符串为:{"age":21,"name":"zhangsan"}
//2、将JSON字符串转换为Java对象
Person person = JSON.parseObject(s, Person.class);
System.out.println("JSON字符串转换为Java对象为:" + person.toString()); //JSON字符串转换为Java对象为:Person{name = zhangsan, age = 21}
}
}