1 Ajax
1.1Ajax 概述
概念：ajax（Asynchronous Javascript And XML）：异步的 JavaScript 和 Xml
1.2 Ajax 的作用
使用 Html+Ajax 来替换 Jsp 页面，并可以实现 前后端分离
本来是通过 Servlet 和 Jsp 实现的，下图是 Jsp 的实现原理。上篇文章提到 Jsp 逐步被淘汰了。
如下就是一个异步请求的例子：
1.2.1 同步和异步
个人感觉还是比较容易理解的：
1.3 Ajax 的快速入门
1.3.1 编写 AjaxServlet(后端)
并用 Response 输出字符串。继承 HttpServlet
@WebServlet("/ajaxServlet01")public class AjaxDemo01 extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.getWriter().write("hello,ajax~~"); }
@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req,resp); }}
复制代码
1.3.2 编写 Ajax（前端）
放在 Html 文件中
不需要记，用到的时候查询网站即可 Ajax官方网站
点下一节，就可以看到每一步的代码，copy 过来为我所用就 ok
需要注意的是：Ajax 的代码需要放在 script 中
下面的全路径指的是在浏览器访问这个 Servlet 的全路径，如下
为什么要用全路径？
这是因为前端后端的代码并不是放在一个服务器之中的，所以也需要输入地址和端口号，这也就说明了为什么可以实现项目的前后端分离。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>
</body><script> /*1、创建xhttp对象*/ var xhttp; if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } /*2、向服务器发送请求 */ /* 此处应该写全路径 */ xhttp.open("Get","http://localhost:8081/JavaWeb_Demo_06_war/ajaxServlet01"); xhttp.send(); /*3、获得请求对象*/ xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { /*用this.responseText获取数据*/ alert(this.responseText); } };</script></html>
复制代码
访问 hello.html，成功看到了如下的效果，代表异步请求设置成功
2 Axios
2.1 概念
Axios 对原生的 Ajax 进行封装，简化书写。 官网 传送门
官网的定义
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和 node.js 中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
2.2 Axios 快速入门
Axios 只是对 Ajax 的一种封装，除了一些方法不同外，他们的语法是一样的
2.2.1 编写 AxiosServlet
@WebServlet("/axiosServlet01")public class AxiosDemo01 extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("get.....");
/*获取参数*/
String username = req.getParameter("username"); System.out.println("获取的参数为:"+username); resp.getWriter().write("hello,axios~~"); }
@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("post....."); req.setCharacterEncoding("UTF-8"); /*获取参数*/ String username = req.getParameter("username"); System.out.println("获取的参数为:"+username); resp.getWriter().write("hello,axios~~"); }}
复制代码
2.2.2 编写 Axios+Html
get
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>
</body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script> /* 1、get请求 */ axios({ url:"http://localhost:8081/JavaWeb_Demo_06_war/axiosServlet01?username=zhangsan", method:"get" }).then(function (response) { // 处理成功情况 alert(response.data) }) </script></html>
复制代码
post
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>
</body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script> /* 2、post请求 */ axios({ url:"http://localhost:8081/JavaWeb_Demo_06_war/axiosServlet01", method:"post", data:"username=张三" }).then(function (response) { // 处理成功情况 alert(response.data) })</script></html>
复制代码
2.3 Axios 请求方式别名（★）
感觉这个才是常用的，官网上也是用的这种方式。
但是这种请求方式阅读性稍微差一点，不过用多了就没什么了。
方便和可阅读性二者不可兼得嘛
get
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>
</body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script> /* 1、get请求 */ axios.get("http://localhost:8081/JavaWeb_Demo_06_war/axiosServlet01?username=zhangsan") .then(function (response) { // 处理成功情况 alert(response.data) })
</script></html>
复制代码
post
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>
</body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script> /* post请求 */ axios.post("http://localhost:8081/JavaWeb_Demo_06_war/axiosServlet01","username=zhangsan") .then(function (response) { // 处理成功情况 alert(response.data) })
</script></html>
复制代码
3 Json
3.1 Json 的简介
3.1.1 Json 和 JavaScript 的对比
非常的类似，JavaScript 对象的键，是可以加引号也可以不加引号的。但是 JSON 对象的键是必须要加引号的。
3.2 JSON 的基础语法
value 的数据类型：
3.3 JSON 数据和 Java 对象的转换
请求数据：JSON 字符串转为 Java 对象
获取数据：Java 对象转为 JSON 字符串
3.3.1 引入 Fastjson 的依赖
Fastjson 是阿里巴巴提供的一个 Java 语言编写的高性能功能完善的 JSON 库，是目前 Java 语言中最快的 JSON 库，可以实现 Java 对象和 JSON 字符串的相互转换。
<!--引入FastJson--><dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.75</version></dependency>
复制代码
3.3.2 Java 对象转 Json
String jsonStr = JSON.toJSONString(obj);
复制代码
3.3.3 JSON 转 Java 对象
User user = JSON.parseObject(jsonStr, User.class);
复制代码
通过一个整体例子实战一下
3.4 Json 实战
用户类
package com.you.Ajax;
public class User { private String username; private String password; private String email;
public User() { }
public User(String username, String password, String email) { this.username = username; this.password = password; this.email = email; }
public String getUsername() { return username; }
public void setUsername(String username) { this.username = username; }
public String getPassword() { return password; }
public void setPassword(String password) { this.password = password; }
public String getEmail() { return email; }
public void setEmail(String email) { this.email = email; }
@Override public String toString() { return "User{" + "username='" + username + '\'' + ", password + '\'' + ", email='" + email + '\'' + '}'; }}
复制代码
JsonServlet
@WebServlet("/JsonDemo01")public class JsonDemo01 extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("get....."); User user = new User(); user.setEmail("1111@qq.com"); user.setUsername("zhangsan"); user.setPassword("2000000"); /* Java对象转Json */ String jsonString = JSON.toJSONString(user); /* 响应请求 */ resp.getWriter().write(jsonString);
}
@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("post....."); User user = new User(); user.setEmail("1111@qq.com"); user.setUsername("zhangsan"); user.setPassword("2000000"); /* Java对象转Json */ String jsonString = JSON.toJSONString(user); /* 响应请求 */ resp.getWriter().write(jsonString); }}
复制代码
访问这个 Servlet 是可以拿到 JSon 数据
前端
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>
</body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script> var json = { "username":"zhangsan", "passworD":"1", "email":"qq.com" } axios.post("http://localhost:8081/JavaWeb_Demo_06_war/JsonDemo01",json).then(function (response) { let resultData = response.data; alert("username:"+resultData.username+",password:"+resultData.password+",email:"+resultData.email);
})</script></html>
复制代码
评论