22-05-29 西安 javaweb(10) ajax、axios、gson 与 jackson

ajax  异步的JavaScript和XML

js中的一个技术，实现前后端分离，前后端分离就是分服务器部署，彻底舍弃了thymeleaf。

ajax中必须使用响应浏览器数据，不能是请求转发和重定向

浏览器兼容性问题 xmlHttpRequest

原生的ajax有浏览器的兼容问题
ie：xmlHttpRequest这个对象被继承到activex插件

ajax是分为原生ajax 和 封装后的ajax【axios】，axios不需要考虑浏览器的兼容问题

同步请求与异步请求

超链接，表单提交，地址栏输入回车，刷新都是同步请求

同步特点：
1、同步请求伴随着页面的刷新或跳转，实现全局更新
2、多个同步请求，请求会按照顺序依次执行，前面的请求没有执行完，后面的请求将处于阻塞状态

异步特点：
1.异步请求是在页面不刷新或跳转的情况下，与服务交互，实现局部刷新
2.异步请求一旦发送，其后面的代码继续执行，并不会等到ajax请求处理完毕（请求和响应都处理完毕）再执行

axios 最流行的前端ajax框架

ajax数据原生js的一部分,axios封装了ajax的技术。

使用的时候要引入axios.js

格式一：

"params"设置的请求参数都会拼接在请求地址后，不管get还是post

“data”里的请求参数一定不会去拼接，data冒号后面什么样，传的参数就长什么样

axios({
    url:"",//设置请求路径
    method:"",//设置请求方式
    params:{},//设置请求参数，name=value&name=value
    data:{}//设置请求参数，以json格式将数据在请求体中传输到服务器
}).then(function(response){
    //当前的ajax请求处理成功后执行then中的函数
    //response封装了服务器响应到浏览器的数据，其中response.data是服务器响应到浏览器的数据
}).catch(function(){
    //当前的ajax请求处理失败后执行catch中的函数
});

ES6 的箭头函数：

可以将回调函数简写为箭头函数

function (){}-----()=>{}
function (response){}-----response=>{}
function (a,b){}-----(a,b)=>{}      

这要就可以把then里改成这样了，好处是 可以使用this了。

• 如果this写在function(){}，this就不是vue对象了
• 如果this写在()=>{}，this就一定是vue对象

then(response => {
   this.message = response.data
})

在idea中需要设置一下，使得支持ES6的语法

格式二

get提交方式没有请求体，不能和data搭配,不能传json格式的数据

axios.get("请求地址");
axios.post("请求地址",{相当于data属性，传输一个json格式的请求参数});

axios.post("TestAxiosServlet?method=testGetJson",{
    username:"admin",
    password:"123456",
    age:"23"
}).then(response=>{
    console.log(response.data);
});

data里的数据，在服务端是不能使用下面俩个方法获取的，要用gson或者jackson。

request.getParameter(name)、request.getParameterValues(name)

一、获取请求体中的json 字符串

一段公共的的通用的代码，来获取请求体中的内容

//1.获取请求体
BufferedReader reader = request.getReader();
StringBuilder sb = new StringBuilder();
String line = "";
//2. 从requestReader中循环读取拼接字符串
while((line = reader.readLine()) != null){
    sb.append(line);
}
//3. 将stringBuilder转成字符串，这个字符串就是Json请求体
String jsonParam = sb.toString();

这样就可以原样获取请求体中的json字符串了：

第二步，使用gson或者jackson解析json字符串

gson 

Gson是Google研发的一款非常优秀的JSON数据解析和生成工具，它可以帮助我们将数据在JSON字符串和Java对象之间互相转换。

fromJson（）方法        

1.Json解析转成实体类对象

Gson gson = new Gson();
User user = gson.fromJson(jsonParam, User.class);

2.Json解析转成Map集合

Gson gson = new Gson();
Map map = gson.fromJson(jsonParam, Map.class);

总结：能用实体类则用实体类，没有实体类再用map

toJson（）方法

3.java中实体类对象转为json

User user = new User(1001,"root1","123456",30);
String jsonStr = gson.toJson(user);

4.java中map转为json

Map map = new HashMap<>();
map.put("id", "10086");
map.put("username", "admin");
map.put("password", "123456");
String jsonStr = gson.toJson(map);

5.将list集合转为json数组

List list = Arrays.asList(user, user1, user2);
String jsonStr = gson.toJson(list);

如图，java中实体类对象转为json，在浏览器控制台打印结果，对应第3点

如图，将list集合转为json数组，，在浏览器控制台打印结果，对应第5点

jackson  

是Java中比较常用的JSON解析的工具包 ，SpringMVC和SpringBoot中默认支持的就是jackson

readValue()  处理json格式的请求参数

ObjectMapper mapper = new ObjectMapper();
User user = mapper.readValue(jsonParam, User.class);

writeValueAsString（）

//将实体类转换为json字符串

ObjectMapper mapper = new ObjectMapper();
String jsonstr=mapper.writeValueAsString(user);

//将map集合转换为json字符串

Map map = new HashMap<>();
map.put("id", "10086");
map.put("username", "admin");
map.put("password", "123456");
String jsonStr = mapper.writeValueAsString(map);