一.AJAX技术
1.1 AJAX介绍
Ajax 即“Asynchronous Javascript And XML”（异步
JavaScript 和 XML），是指一种创建
交互式、快速动态应用的网页开发技术，无需重新加载整个网
页的情况下，能够更新页面局部数据的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使页面实
现异步更新。这意味着可以在不重新加载整个页面的情况下，
对页面的某部分进行更新。
1.2 同步请求和异步请求:
同步请求：串行操作，发送一个请求，需等待响应，期间
不能够再次发送请求；
异步请求：并行操作，发送一个请求，无需等待响应，即
可再发送请求；
开发方式：
服务器端渲染：页面渲染主要由服务器端渲染实现
前后端分离：所有请求和响应都基于Ajax技术实现
1.3 原生AJAX
创建两个javaWeb项目部署到Tomcat服务器上
在Web项目里面创建一个HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生AJAX</title>
//js代码
<script>
// XMLHttpRequest 可以与服务器实现异步交互，
//而无需让整个页面刷新，因此成为 Ajax 编程的核心对象。
function fn(){
//1.创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//2.给定请求方式以及请求地址
xhr.open("get","http://localhost:8080/code_02/demo01Servlet");
//3.发送请求
xhr.send();
//4.获取服务器端给客户端的响应数据
//哪个函数发送的ajax请求,响应结果就返回给那个函数
xhr.onreadystatechange = function(){
//0:open()没有被调用
//1:open()正在被调用
//2:send()正在被调用
//3:服务端正在返回结果
//4:请求结束，并且服务端已经结束发送数据到客户端
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("sp").innerHTML=xhr.responseText;
}
}
}
</script>
</head>
<body>
<h2>周六要放假</h2>
<h2 id="sp"></h2>
<input type="button" value="原生AJAX"
onclick="fn()"/>
</body>
</html>
创建javaServlet 继承HTTPServlet
@WebServlet("/demo01Servlet")
public class Demo01Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("周日要休息");
}
@Override
protected void doPost(HttpServletRequest
req, HttpServletResponse resp) throws
ServletException, IOException {
doGet(req,resp);
}
}
二.JSON详解
2.1 JSON简介
JSON(JavaScript Object Notation，JavaScript 对象表示法)
是一种基于字符串的轻量级的数据交换格式。易于人阅读和编
写，同时也易于机器解析和生成。JSON 是 JavaScript 数据类
型的子集。
{
"book": [
{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
},
{
"id":"07",
"language": "C++",
"edition": "second",
"author": "E.Balagurusamy"
}]
}2.2 JSON对象的格式
对象格式: {"k1" : obj , "k2" : obj}
举例:{"userid":1,"username":"admin","sex":"male"}
语法规则
对象可以包含多个 key/value（键/值）对。
key 必须是字符串，value可以是合法的 JSON 数据类型
（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。
2.3 JSON数组的格式
数组格式：[obj,obj,obj...]
举例：[ "baidu", "jd", "tengxun" ]
举例: [{"userid":1,"username":"admin"},
{"userid":2,"username":"oldlu"}]
}
语法规则:
JSON 数组在中括号中书写。
JSON 中数组value值必须是合法的 JSON 数据类型（字
符串, 数字, 对象, 数组, 布尔值或 null）。
JSON数组可以使用jQuery语法完成遍历。
2.4 JSON对象的解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//js代码
<script>
//JSON对象
let objectJson={"id":1,"username":"范冰冰","age":23};
//可以使用点号 . 来访问对象的值
console.log(objectJson.username);
//JSON数组
let arrayJson=[
{"id":1,"username":"范冰冰","age":23},
{"id":2,"username":"杨丽颖","age":24},
{"id":3,"username":"王姨","age":25}
];
//使用索引值来访问数组
console.log(arrayJson[2].username);
//使用 for 循环
for(let i=0;i<arrayJson.length;i++){
console.log(arrayJson[i].age)
}
</script>
</head>
<body>
</body>
</html>
2.5 JSON对象和JSON字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//js代码
<script>
//JSON对象
let objectJson={"id":1,"username":"范冰冰","age":23};
//可以使用点号 . 来访问对象的值
console.log(typeof objectJson);
console.log(objectJson);
console.log(objectJson.username);
console.log("------------------------")
//把JSON对象转成JSON字符串
let strJson =
JSON.stringify(objectJson);
console.log(typeof strJson);
console.log(strJson);
console.log(strJson.username);
console.log("------------------------")
//把JSON字符串转成JSON对象
let obj = JSON.parse(strJson);
console.log(typeof obj);
console.log(obj);
console.log(obj.username);
</script>
</head>
<body>
</body>
</html>
<!--Axios中，JSON字符串和JS对象自动进行转换-->三.Ajax异步请求库Axios
3.1 axios简介
原生ajax请求的代码编写太过繁琐,我们可以使用axios这个库
来简化操作！
在后续学习的Vue(前端框架)中发送异步请求,使用的就是
axios.
需要注意的是axios不是vue的插件,它可以独立使用.
官网：https://www.axios-http.cn/docs/intro
使用步骤
1. 引入axios核心js文件。
2. 调用axios对象的方法来发起异步请求。
3. 调用axios对象的方法来处理响应的数据。
3.2 Axios快速入门
3.2.1 API介绍
axios.get().then().catch().finally();
axios.post().then().catch().finally();
then(function(resp){}): axios执行成功后的回调函数
<!--catch(function(error){}): axios执行出错时,调用的函数
finally(function(){}): 无论如何都会执行的函数
then函数的参数response是一个json对象,我们重点只需要了
解response.data即可-->
{
<!-- `data` 由服务器提供的响应-->
data: {},
<!-- `status` 来自服务器响应的 HTTP 状态码-->
status: 200,
<!-- `statusText` 来自服务器响应的 HTTP 状态信息-->
statusText: 'OK',
<!-- `headers` 是服务器响应头-->
<!-- 所有的 header 名称都是小写，而且可以使用方括号语法访问-->
<!-- 例如: `response.headers['content-type']`-->
headers: {},
<!-- `config` 是 `axios` 请求的配置信息-->
config: {},
<!-- `request` 是生成此响应的请求-->
<!-- 在node.js中它是最后一个ClientRequest实例 (inredirects)，-->
<!-- 在浏览器中则是 XMLHttpRequest 实例-->
request: {}
}
3.2.2 前端请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/axios-0.18.0.js"></script>
<script>
function fn01(){
//发送GET请求
axios({
method:"get",
url:"http://localhost:8080/code_02/demo02Servlet?username=zhangsan"})
.then(function(response){
console.log(response);
console.log(response.data)
//将后端传入的数据赋值给id为sp的标签
document.getElementById("sp").innerHTML=response.data;
});
}
function fn02() {
//发送POST请求
axios({
method:"post",
url:"http://localhost:8080/code_02/demo02Servlet",
data:"username=zhangsan"
}).then(function(response){
console.log(response.data)
document.getElementById("sp").innerHTML=response.data;
});
}
</script>
</head>
<body>
<input type="button" value="GET请求"onclick="fn01()"/><br/>
<input type="button" value="POST请求"onclick="fn02()"/><br/>
<span id="sp"></span>
</body>
</html>3.2.3 后端响应
@WebServlet("/demo02Servlet")
public class Demo02Servlet 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.setContentType("text/html;charset=utf-8");
resp.getWriter().write("GET请求响应成功");
}
@Override
protected void doPost(HttpServletRequestreq, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("post请求...");
String username = req.getParameter("username");
System.out.println(username);
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("POST请求响应成功");
}
}3.3 Axios 请求方式别名
为了方便起见， Axios 已经为所有支持的请求方法提供了别
名。
3.3.1 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/axios-0.18.0.js"></script>
<script>
function fn01(){
//发送GET请求
axios.get("http://localhost:8080/code_02/demo02Servlet?username=zhangsan")
.then(function(response){
console.log(response.data)
document.getElementById("sp").innerHTML=response.data;
});
}
function fn02() {
//发送POST请求
axios.post("http://localhost:8080/code_02/demo02Servlet","username=zhangsan")
.then(function(response){
document.getElementById("sp").innerHTML=response.data;
});
}
</script>
</head>
<body>
<input type="button" value="GET请求" onclick="fn01()"/><br/>
<input type="button" value="POST请求" onclick="fn02()"/><br/>
<span id="sp"></span>
</body>
</html>
3.3.2 后端代码
@WebServlet("/demo02Servlet")
public class Demo02Servlet 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.setContentType("text/html;charset=utf-8");
resp.getWriter().write("GET请求响应成功");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("post请求...");
String username = req.getParameter("username");
System.out.println(username);
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("POST请求响应成功");
}
}
3.4 Jackson的使用
3.4.1 Jackson简介
在 JDK 中并没有内置操作 JSON 格式数据的 API，因此使用处
理 JSON 格式的数据需要借助第三方类库。
常用的 JSON 解析类库：
*Gson: 谷歌开发的 JSON 库，功能十分全面。
*FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。
*Jackson: 社区十分活跃且更新速度很快。被称为“最好的Json 解析器。
Jackson 是一种解析 JSON 格式数据的 API，也是最流行，速
度最快的 JSON API。在SpringMVC 中默认使用 Jackson API
处理 JSON 格式的数据。
导入json相关jar包
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.3.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.3.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.3.3</version>
</dependency>
API的使用
//创建核心解析对象
ObjectMapper om = new ObjectMapper();
//将java对象转成json字符串
String writeValueAsString(Object obj);
//json字符串转java对象
<T> T readValue(String var, Class<T> typeclass);3.4.2 Java对象和Json字符串转换
创建User实体类：
package com.ll.jopo;
public class User {
private int id;
private String username;
private int password;
public User() {
}
public User(int id, String username, int password) {
this.id = id;
this.username = username;
this.password = password;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public int getPassword() {
return password;
}
public void setPassword(int password) {
this.password = password;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password=" + password +
'}';
}
}
创建测试类：
public class DemoTest {
public static void main(String[] args)
throws Exception {
//创建核心转换对象
ObjectMapper om=new ObjectMapper();
//将Java对象转成json字符串
User u01=new User(1,"张三","123456");
String str01 = om.writeValueAsString(u01);
System.out.println(str01);
//将List集合转成json字符串
List<User> list=new ArrayList<>();
User u02=new User(2,"李四","123456");
User u03=new User(3,"王五","123456");
list.add(u02);
list.add(u03);
String str02 = om.writeValueAsString(list);
System.out.println(str02);
//将Map集合转成json字符串
Map<String,Object> map=new HashMap<>();
map.put("name","zs");
map.put("money",100);
String str03 = om.writeValueAsString(map);
System.out.println(str03);
System.out.println("---------------------------------");
//将Json字符串转成Java对象
User user = om.readValue(str01,User.class);
System.out.println(user);
//将Json字符串转成List集合
List<User> listUser = om.readValue(str02, List.class);
System.out.println(list);
//将Json字符串转成Map集合
Map<String,Object> m = om.readValue(str03, Map.class);
System.out.println(m);
}
}
3.5 axios和Jackson综合
3.5.1 请求参数和响应数据都是普通字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/axios-0.18.0.js"></script>
<script>
function fn(){
//请求参数和响应数据都是普通字符串
axios({
method:"get",
url:"http://localhost:8080/code_02/demo01Servlet?id=1&username=zhangsan&password=123456",
}).then(function(response){
console.log(response);
console.log(response.data)
document.getElementById("sp").innerHTML=response.data;
});
}
</script>
</head>
<body>
<input type="button" value="按钮"
onclick="fn()"/><br/>
<span id="sp"></span>
</body>
</html>后端代码
@WebServlet("/demo01Servlet")
public class Demo01Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
// 获取请求携带的参数
String id = req.getParameter("id");
String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println(id+"..."+username+"..."+password);
resp.setContentType("text/html;charset=utf-8");
//ajax响应结果必须以流的形式将结果写回给浏览器
resp.getWriter().print("响应结果为:"+id+"-"+username+"-"+password);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req,resp);
}
}3.5.2 响应数据-Json格式字符串Get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/axios-0.18.0.js"></script>
<script>
function fn(){
//请求参数和响应数据都是普通字符串
axios({
method:"get",
url:"http://localhost:8080/code_02/demo01Servlet?id=1&username=zhangsan&password=123456",
}).then(function(response){
console.log(response.data)
document.getElementById("sp").innerHTML=
response.data.id+"..."+response.data.username+"..."+response.data.password;
});
}
</script>
</head>
<body>
<input type="button" value="按钮"
onclick="fn()"/><br/>
<span id="sp"></span>
</body>
</html>后端代码
@WebServlet("/demo01Servlet")
public class Demo01Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
// 获取请求携带的参数
String id = req.getParameter("id");
String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println(id+"..."+username+"..."+password);
User user=new User(Integer.parseInt(id),username,password);
ObjectMapper om=new ObjectMapper();
String str = om.writeValueAsString(user);
//响应json格式的字符串给浏览器
resp.setContentType("application/json;charset=utf-8");
//ajax响应结果必须以流的形式将结果写回给浏览器
resp.getWriter().print(str);
}
@Override
protected void doPost(HttpServletRequest
req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}3.5.3 请求参数-Json格式字符串Post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/axios-0.18.0.js"></script>
<script>
function fn(){
//请求参数-json格式字符串
//请求参数为json格式的字符串,json格式的字符串会存放在请求体中带给服务器,只有post请求才有请求体
axios({
method:"post",
url:"http://localhost:8080/code_02/demo01Servlet"
,data{"id":1,"username":"zhangsan","password":"123456"}})
.then(function(response){
console.log(response.data)
document.getElementById("sp").innerHTML=
response.data.id+"..."+response.data.username+"..."+response.data.password;
});
}
</script>
</head>
<body>
<input type="button" value="按钮"
onclick="fn()"/><br/>
<span id="sp"></span>
</body>
</html>
后端代码
@WebServlet("/demo01Servlet")
public class Demo01Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
// 获取请求携带的参数 post请求的数据是在请求
//体中 不能使用request对象获取
//获取请求体的流信息
ServletInputStream in = req.getInputStream();
ObjectMapper om=new ObjectMapper();
User user = om.readValue(in,User.class);
System.out.println(user);
//响应json格式的字符串给浏览器
resp.setContentType("application/json;charset=utf-8");
//ajax响应结果必须以流的形式将结果写回给浏览器
String str = om.writeValueAsString(user);
resp.getWriter().print(str);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req,resp);
}
}
![[HNCTF 2022 Week1]calc_jail_beginner_level3(JAIL)](https://img-blog.csdnimg.cn/img_convert/d755d6c28a938797cf3419f961d9a130.png)
