Filter和Ajax

JavaWeb三大组件：Servlet、Filter、Listener

Ajax

概念

异步的JavaScript和XML，进行前后端数据交互的

作用

1、与服务器进行数据交换，通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器
2、异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术

axios

对原生的AJAX进行封装，简化书写
使用：

• 引入axios的js文件：

<script src="js/axios-0.18.0.js"></script>

或 在bootcdn.cn里在线获取

• 使用axios发送请求，并获取响应结果

//发送get请求
axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})
//发送post请求
axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

小括号中使用js对象传递请求相关的参数

• method属性，用来设置请求方式
• url属性，用来书写请求的资源路径。如果是get请求，需要将请求参数拼接到路径后面，格式：
  url?参数名=参数值&参数名=参数值
• data属性，作为请求体被发送的数据；如果是post请求的话，数据需要作为data属性的值
• then需要传递一个匿名函数（回调函数）。该匿名函数在发送请求的时候不会被调用，而是在成功响应后调用的函数。resp参数是对响应的数据进行封装的对象，通过resp.data可以获取到响应的数据。

请求方法别名

JSON

js对象定义格式：
{
name:“zhangsan”,
age:23,
city:“北京”
}
json对象定义格式： json 格式中的键要求必须使用双引号括起来
{
“name”:“zhangsan”,
“age”:23,
“city”:“北京”
}

定义格式

var 变量名 = ‘{“key”:value,“key”:value,…}’;写在body的script里
value的数据类型：

• 数字（整数或浮点数）
• 字符串（使用双引号括起来）
• 逻辑值（true或者false）
• 数组（在方括号中）
• 对象（在花括号中）
• null

获取到该json串中的name值：

• 如果是一个js对象：js对象.属性名
• 如果是JSON对象：
  1、将JSON字符串转为JS对象：
  let jsObject = JSON.parse(jsonStr);
  2、将JS对象转换为JSON字符串：
  let jsonStr2 = JSON.stringify(jsObject);

发送异步请求携带参数

使用axios发送请求的时候，如果要携带复杂的数据时都会以JSON格式进行传递。而如果请求参数是JSON格式，那么请求方式必须是post，因为json串需要放在请求体中。

JSON串和JAVA对象的相互转换

请求数据：JSON字符串转为Java对象
响应数据：Java对象转为JSON字符串
Fastjson：实现 Java 对象和 JSON 字符串的相互转换的api。

Fastjson的使用

• 导入坐标

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

• Java对象转JSON
  String jsonStr = JSON.toJSONString(obj);obj一般封装成对象
• JSON字符串转为Java对象
  User user = JSON.parseObject(jsonStr,User.class)