文章目录
- JSON
- Fastjson
- fastjson引入
- fastjson 常用API
- fastjson作用
- 常用API
- 使用实例
- ajax和json综合(重要)
- 请求参数和响应数据都是普通字符串
- 响应数据改为json格式
- 请求和响应都是js数据
- 封装到Result类和抽取到BaseController
- 原生Ajax
- AJAX的执行流程
- XMLHttpRequest对象
- 使用原生的AJAX
JSON
JavaScript Object Notation：JavaScript对象文本表示形式
【1】json在js中是一个对象，在java中是字符串
建议：json的name书写在双引号中，值如果是字符类型建议书写在双引号中
【2】json是目前 前后端数据交互的主要格式之一
【3】json是一种特殊的 js 对象
#json的语法主要有两种:1. 对象 { }2. 数组 [ ]1. 对象类型{name:value,name:value} 2. 数组类型[{name:value,name:value}, {name:value,name:value},{name:value,name:value}]3. 复杂对象{name:value,wives:[{name:value},{},{}],son:{name:value}}
#注意: 1. 其中name必须是string类型json在js中,name的双引号可以省略2. value必须是以下数据类型之一：字符串数字 对象（JSON 对象）数组布尔Null3. JSON 中的字符串必须用双引号包围。(单引号不行!)
Fastjson
fastjson引入
为了方便服务器解析，这要求服务端在响应之前，需要将响应的数据转换成符合Json格式的字符串
通过拼接字符串的形式，将Java对象转换成json格式字符串无疑是非常麻烦的，在开发中我们一般使用转换工具来实现
所谓的转换工具是通过java封装好的一些jar工具包，可以直接将java对象或集合转换成json格式的字符串
常见的json转换工具：
fastjson 常用API
fastjson作用
- 将java对象转成json字符串=》响应给前端
- 将json字符串转成java对象=》接受前端的json数据封装到对象中
常用API
fastjson API 入口类是com.alibaba.fastjson.JSON,常用的序列化操作都可以在JSON类上的静态方法直接完成
public static final String toJSONString(Object object); // 将java中任意对象序列化为JSON文字符串
//下面的两个方法是将页面获取json数据封装到实体类对象中
public static final T parseObject(String text, Class clazz); // 把JSON字符串text解析成指定类型JavaBean
public static final T parseObject(InputStream is, Class clazz); // 将从页面获取的字节输入流中的字符数据解析成指定类型JavaBean
举例：User user = JSON.parseObject(request.getInputStream(), User.class);
注意：
1）request.getInputStream()：表示获取关联浏览器的字节输入流
2）使用parseObject方法将前端接收的json数据转换为对应实体类对象，要求前端传递的json数据的key必须和实体类对象的成员变量名一致
举例：
{“username”:“张子枫”,“password”:1234} 来自于前端浏览器
实体类：
class User{
private String username;//这里的成员变量必须前端提交json格式的数据的key一致，必须是username
private String password;
}
使用实例
- 导包
<!--fastjson--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.47</version></dependency>
- 写实体类
- 利用上面方法进行转换
ajax和json综合(重要)
请求参数和响应数据都是普通字符串
@WebServlet("/ajaxJsonTest01Servlet")
public class AjaxJsonTest01Servlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//前后端都是字符串//获取前端发过来的字符串String username = request.getParameter("username");String password = request.getParameter("password");User user = new User(username, password);System.out.println(username +"---"+ password);response.getWriter().print(user);}
}
响应数据改为json格式
@WebServlet("/ajaxJsonTest02Servlet")
public class AjaxJsonTest02Servlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//请求是字符串，获得响应是json//获取前端发过来的字符串String username = request.getParameter("username");String password = request.getParameter("password");User user = new User(username, password);System.out.println(username +"---"+ password);String s = JSON.toJSONString(user);response.getWriter().print(s);}
}
请求和响应都是js数据
@WebServlet("/ajaxJsonTest03Servlet")
public class AjaxJsonTest03Servlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//请求是json，获得响应是json//获取前端发过来的字符串User user = JSON.parseObject(request.getInputStream(), User.class);System.out.println(user);//响应给前端//模拟从数据库中查找ArrayList<User> list = new ArrayList<>();Collections.addAll(list,new User("张三","1234"),new User( "李四","1234"),user);String s = JSON.toJSONString(list);response.getWriter().print(s);}
}
封装到Result类和抽取到BaseController
package com.example.json;public class Result {private boolean flag;private String message;private Object userList;//用于增删改表单，不需要查看数据public Result(boolean flag, String message) {this.flag = flag;this.message = message;}//用于查询表单public Result(boolean flag, String message, Object userList) {this.flag = flag;this.message = message;this.userList = userList;}public boolean isFlag() {return flag;}public void setFlag(boolean flag) {this.flag = flag;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public Object getUserList() {return userList;}public void setUserList(Object userList) {this.userList = userList;}@Overridepublic String toString() {return "Result{" +"flag=" + flag +", message='" + message + '\'' +", userList=" + userList +'}';}
}public class BaseController {//解析json为objectpublic static <T> T getObject(HttpServletRequest request,Class<T> clazz) throws IOException {T t = JSON.parseObject(request.getInputStream(), clazz);return t;}public static void getJson(HttpServletResponse response,Object obj) throws IOException {String s = JSON.toJSONString(obj);response.getWriter().print(s);}
}@WebServlet("/ajaxJsonTest04Servlet")
public class AjaxJsonTest04Servlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//请求是json，获得响应是json//获取前端发过来的字符串//User user = JSON.parseObject(request.getInputStream(), User.class);User user = BaseController.getObject(request, User.class);System.out.println(user);//响应给前端//模拟从数据库中查找ArrayList<User> list = new ArrayList<>();Collections.addAll(list,new User("张三","1234"),new User( "李四","1234"),user);Result result = new Result(true, "查询列表成功", list);
// String s = JSON.toJSONString(result);
// response.getWriter().print(s);BaseController.getJson(response,result);}
}
原生Ajax
AJAX的执行流程
流程说明：
- 用户访问的时候，由JavaScript底层创建一个请求对象：XMLHttpRequest对象。
- 请求对象创建一个回调函数，回调函数用于处理服务器返回的响应
- 请求对象用于发送请求给服务器
- 服务器接收到浏览器发过来的请求，并且对数据进行处理。
- 将数据以XML的格式发送回浏览器，由XMLHttpRequest请求对象的回调函数接收数据
- 使用HTML和CSS更新网页最新结果
XMLHttpRequest对象
| 创建XMLHttpRequest对象 | 说明 |
|---|---|
| new XMLHttpRequest() | 构造方法直接创建对象 |
| XMLHttpRequest对象的事件 | 说明 |
|---|---|
| on ready state change | 每当 readyState 改变时，就会触发 onreadystatechange 事件 |
| XMLHttpRequest对象的属性 | 说明 |
|---|---|
| readyState | 准备状态的值，当它等于4的时候，表示服务器数据接收完毕 |
| status | 服务器的状态码。等于200的时候，服务器正确响应 |
| responseText | 接收服务器返回的字符串数据 |
| XMLHttpRequest对象的方法 | 说明 |
|---|---|
| open(“GET”,“URL”,true) | 打开服务器的连接 1. GET或POST表示请求的方式 2. URL访问服务器的地址 3. true 表示异步，false表示同步。 同步是指要等待服务器响应回来以后，才继续向后执行。 |
| send() | 发送请求，如果是GET方法send()不需要参数。 如果是POST，send()需要传递浏览器端的数据 |
注：
#post发送参数前，需要设置编码格式,否则后台获取不到数据，post请求是模拟form表单提交数据
//application/x-www-form-urlencoded 表示form表单操作类型
xmlHttp.setRequestHeader(“CONTENT-TYPE”,“application/x-www-form-urlencoded”);
说明：
readyState属性是XMLHttpRequest对象的属性，它是表示当前ajax引擎和服务器交互过程中的变化情况，也就是对象状态（表示请求状态），通过5个数字体现状态变化：
0 ： 表示客户端建立了XMLHttpRequest对象，但并没有和服务器进行交互(请求未初始化).
1 ： 表示客户端已经调用XMLHttpRequest对象中的open方法，打开了和服务器的连接(请求正在加载).
2 ： 表示客户端已经调用XMLHttpRequest对象中的send方法，发送出了请求数据(请求已加载).
3 ： 表示服务器已经处理完请求但还没有给客户端响应数据(交互中).
4 ： 表示服务器响应数据正常结束(请求完成).
get请求
post请求
** **
使用原生的AJAX
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax的get请求</title>
</head>
<body><button id="btn">发送get请求</button>
</body>
<script>//给按钮绑定事件document.getElementById("btn").onclick = function () {//ajax发送get请求//1.创建xhr XMLHttpRequest ajax引擎 发送请求var xhr = new XMLHttpRequest();;//2.监听请求和响应状态 请求 响应xhr.onreadystatechange = function () {//请求和响应 OKif(xhr.readyState == 4 && xhr.status == 200){//接收响应数据 ajax能够接收的响应数据类型：1.字符串 2.xmlvar responseText = xhr.responseText;alert(responseText);}}//3.设置请求参数 get post 数据//1.method get post//2.url 请求地址//3.async 同步?异步？ 默认异步==truexhr.open("GET","/ajaxGetServlet?name=张三&age=19",true);//4.发送请求xhr.send();}
</script>
</html>
java
@WebServlet("/ajaxGetServlet")
public class AjaxGetServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String username = request.getParameter("username");String age = request.getParameter("age");System.out.println(username+"==="+age);response.getWriter().print("请求已收到");}
}
