一.概述

Ajax(Asynchronous JavaScript and XML,异步的JavaScript和XML)技术可以实现页面的局部更新
传统请求方式是在页面跳转或页面刷新时发出请求，每次发出请求都会请求一个新的页面，即使刷新也是重新加载本页面
Ajax异步请求方式不同于传统的方式，通过Ajax异步请求方式向服务器发出请求，得到数据后再更新页面（通过DOM操作修改页面），整个过程不发生页面跳转或刷新操作
传统方式与Ajax异步请求的对比
Ajax优势：

方式	协议	请求发出方式	数据展示方式
传统请求方式	HTTP	页面链接跳转	重新载入新页面
Ajax异步请求方式	HTTP	由XMLHttpRequest实例发出请求	JavaScript和DOM技术把数据更新到页面

请求数据量少：只需请求必要数据，对不需更新的数据不做请求
请求分散：按需请求，异步的形式，在任意时刻发出，所以请求不会集中爆发
用户体验优化：响应时间短，速度快

使用JavaScript可以实现Ajax，但是代码复杂需要考虑到浏览器兼容问题
jQuery二次封装了JavaScript，同时对Ajax操作进行了整理和封装，简化了Ajax操作

二.实现方式

1.使用GET方式实现Ajax

语法

$.get(url,data,function(data,status,xhr),datatype)

该方法由jQuery提供，其中参数含义如下

参数	说明
url	必选，规定加载资源的路径
data	可选，发送至服务器的数据
function(data,status,xhr)	可选，请求成功时执行的函数，data表示从服务器返回的数据，status表示请求的状态值，xhr表示当前请求相关的XMLHttpRequest对象
datatype	可选，预期的服务器响应的数据类型（xml,html,text,script,json,jsonp）

范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
</head>
<body>
    <label for="username">姓名</label>
    <input type="text" id="username">
    <label for="password">密码</label>
    <input type="password" id="password">
    <input type="button" id="btn" value="登录">
    <div id="div"></div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $("#btn").on("click",function(){
        let username = $("#username").val();
        let password = $("#password").val();
        $.get(
            "AjaxServlet",
            {"username":username,"password":password},
            function(data){
                $("#div").html(data);
            },
            "html"
        );
    });
</script>
</html>

2.使用POST方式实现Ajax

POST方式实现的Ajax与GET方式类似，只是方法名不同，为$.post()

3.使用通用方式实现Ajax

通用的方式是使用$.ajax()方法来实现Ajax
上述的GET和POST方式使用到的方法都是通过封装了这个$.ajax()方法来实现
语法

$.ajax({name:value,name:value....})

ajax方法的参数是一对{}包起来的键值对

该方法的常用参数（键）如下

参数	说明
url	请求的路径
async	是否异步，true或false，默认为true
data	发送到服务器的数据
type	请求的方式，POST或GET，默认是GET
dataType	预期的服务器响应的数据类型（xml,html,text,script,json,jsonp）
success(result,status,xhr)	请求成功是执行的方法
error(xhr,status,error)	请求失败时执行的方法

范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
</head>
<body>
    <label for="username">姓名</label>
    <input type="text" id="username">
    <label for="password">密码</label>
    <input type="password" id="password">
    <input type="button" id="btn" value="登录">
    <div id="div"></div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $("#btn").on("click",function(){
        let username = $("#username").val();
        let password = $("#password").val();
        $.ajax({
            url:"AjaxServlet",
            data:{
                "username":username,
                "password":password
            },
            dataType:"text",
            success:function(data){
                $("#div").html(data);
            }
        });
    });
</script>
</html>

三.JSON补充知识

JavaScript笔记中只基本了解了JSON

1.转换工具

Jackson：开源免费的JSON转换工具，通过Java封装好的一些jar工具包
可以将Java对象或集合转换成JSON格式的字符串，也可以将JSON格式的字符串转换成Java对象
需要引入相关jar包

2.常用类以及方法

常用类

类名	说明
ObjectMapper	jackon工具包的核心类，提供一些方法实现json字符串和对象之间的转换
TypeReference	用于指定反序列化的对象类型

ObjectMapper常用方法

方法名	说明
String writeValueAsString(Object obj)	将Java对象转为json字符串
<T> T readValue(String json,Class<T> valueType)	将json字符串转为Java对象，用于对象类型为内置类型
<T> T readValue(String json,TypeReference valueType)	将json字符串转为Java对象，用于对象类型为含有自定义类型数据的集合类

3.范例

User类：

public class User {
    private String name;
    private int age;
    public User(){}
    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", age=" + age +
                '}';
    }
}

使用范例1：

@Test
public void test01() throws IOException {
    //将User对象转为json字符串
    User user = new User("张三",23);
    ObjectMapper objectMapper = new ObjectMapper();
    String s = objectMapper.writeValueAsString(user);
    System.out.println(s);
    //将json字符串转为User对象
    User user1 = objectMapper.readValue(s, User.class);
    System.out.println(user1);
}

使用范例2：

@Test
public void test02() throws IOException{
    //将Map对象转为json字符串
    HashMap<String,String> map = new HashMap<>();
    map.put("name","张三");
    map.put("gender","男");
    ObjectMapper objectMapper = new ObjectMapper();
    String s = objectMapper.writeValueAsString(map);
    System.out.println(s);
    //将json字符串转为Map对象
    HashMap<String,String> hashMap = objectMapper.readValue(s, HashMap.class);
    System.out.println(hashMap);
}

使用范例3：

@Test
public void test03() throws IOException{
    //将包含自定义对象的Map对象转为json字符串
    HashMap<String,User> map = new HashMap<>();
    map.put("1号",new User("张三",23));
    map.put("2号",new User("李四",24));
    ObjectMapper objectMapper = new ObjectMapper();
    String s = objectMapper.writeValueAsString(map);
    System.out.println(s);
    //将json字符串转为包含自定义对象的Map对象
    HashMap<String,User> hashMap = objectMapper.readValue(s,new TypeReference<HashMap<String,User>>(){});
    System.out.println(hashMap);
}

使用范例4：

@Test
public void test04() throws IOException{
    //将List对象转为json字符串
    ArrayList<String> list = new ArrayList<>();
    list.add("张三");
    list.add("李四");
    ObjectMapper objectMapper = new ObjectMapper();
    String s = objectMapper.writeValueAsString(list);
    System.out.println(s);
    //将json字符串转为List对象
    ArrayList<String> arrayList = objectMapper.readValue(s, ArrayList.class);
    System.out.println(arrayList);
}

使用范例5：

@Test
public void test05() throws IOException{
    //将含有自定义对象的List对象转为json字符串
    ArrayList<User> list = new ArrayList<>();
    list.add(new User("张三",23));
    list.add(new User("李四",24));
    ObjectMapper objectMapper = new ObjectMapper();
    String s = objectMapper.writeValueAsString(list);
    System.out.println(s);
    //将json字符串转为含有自定义对象的List对象
    ArrayList<User> arrayList = objectMapper.readValue(s,new TypeReference<ArrayList<User>>(){});
    System.out.println(arrayList);
}

Ajax

一.概述

二.实现方式

1.使用GET方式实现Ajax

2.使用POST方式实现Ajax

3.使用通用方式实现Ajax

三.JSON补充知识

1.转换工具

2.常用类以及方法

3.范例

热门文章

最新文章

相关课程

相关电子书