ajax 的入门案例

一、ajax

ajax，Asynchronous JavaScript And XML，异步的JavaScript和XML

同步：伴随着页面的刷新或跳转，即全局刷新；同步请求会阻塞代码的执行，即同步请求会一个一个的执行

异步：在不刷新页面的情况下与服务器进行交互，即局部刷新；异步请求不会阻塞代码的执行，ajax请求一旦发送，不会等服务器响应结果完毕，后面的代码就会继续执行

ajax的核心对象XMLHttpRequest

二、axios

1、axios入门案例

testAxios(){
    axios({
        url:"testAxiosServlet?method=testAxios",//请求路径
        method:"get"//请求方式
    }).then(response=>{//请求成功要执行的钩子函数
        //response表示封装了服务器响应信息的对象
        console.log(this.message);
    });
}

2、axios发送请求参数

2.1、发送普通的请求参数

axios({
    url:"testAxiosServlet?method=testAxios",//请求路径
    method:"post",//请求方式
    //params设置普通的请求参数，不管使用的get或post请求方式，请求参数都会拼接在请求地址后
    params:{username:"admin",password:"123456"}
}).then(response=>{//请求成功要执行的钩子函数
    //response表示封装了服务器响应信息的对象
    console.log(this.message);
});

2.2、发送json格式的请求参数

axios({
    url:"testAxiosServlet?method=testAxiosUseData",//请求路径
    method:"post",//请求方式
    //data设置json格式的请求参数，会在请求报文中保存传输到服务器，因此请求方式必须为post
    data:{username:"root",password:"abc123"}
}).then(response=>{//请求成功要执行的钩子函数
    //response表示封装了服务器响应信息的对象
    console.log(this.message);
});

params和data的区别：

1、params传输请求参数时，可以使用get或post请求方式，会以name=value&name=value的格式拼接在请求地址后

2、data传输请求参数时，只能使用post请求方式，会以{key:value,key:value}的格式在请求报文的请求体中传输到服务器

3、params传输的请求参数可以通过request.getParameter()或request.getParameterValues()获取，但是data传输的请求参数不能通过此方法获取，只能通过获取请求体的方式获取json字符串整体，在通过相应技术转换为Java对象

3、axios.get()

axios.get(
    "testAxiosServlet?method=testAxiosByGet&username=admin&password=123456"
).then(response=>{
    console.log(response.data);
});

4、axios.post()

axios.post(
    "testAxiosServlet?method=testAxiosByPost",//请求参数
    {username:"root",password:"abc123"}//使用data的方式传输json格式的请求参数
).then(response=>{
    console.log(response.data);
});

5、处理json格式的请求参数

5.1、使用gson

protected void testAxiosUseJson(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //获取请求体中json格式的请求参数
    BufferedReader reader = request.getReader();
    StringBuffer sb = new StringBuffer();
    String body;
    while((body = reader.readLine()) != null){
        sb.append(body);
    }
    String data = sb.toString();
    //data = {"username":"admin","password":"123456","age":23,"gender":"男"}
    //将json格式的请求参数转换为Java对象（实体类对象、map）
    //使用Gson将json格式的请求参数转换为实体类对象
    Gson gson = new Gson();
    User userByGson = gson.fromJson(data, User.class);
    System.out.println(userByGson);
    //使用Gson将json格式的请求参数转换为map
    Map mapByGson = gson.fromJson(data, Map.class);
    System.out.println(mapByGson);
    response.getWriter().write("hello,testAxiosUseJson");
}

5.2、使用jackson

protected void testAxiosUseJson(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //获取请求体中json格式的请求参数
    BufferedReader reader = request.getReader();
    StringBuffer sb = new StringBuffer();
    String body;
    while((body = reader.readLine()) != null){
        sb.append(body);
    }
    String data = sb.toString();
    //data = {"username":"admin","password":"123456","age":23,"gender":"男"}
    //将json格式的请求参数转换为Java对象（实体类对象、map）
    //使用jackson将json格式的请求参数转换为实体类对象
    ObjectMapper mapper = new ObjectMapper();
    User userByJackson = mapper.readValue(data, User.class);
    System.out.println(userByJackson);
    //使用jackson将json格式的请求参数转换为map
    Map mapByJackson = mapper.readValue(data, Map.class);
    System.out.println(mapByJackson);
    response.getWriter().write("hello,testAxiosUseJson");
}

6、响应浏览器json格式的结果

6.1、使用gson

protected void testAxiosReturnJson(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    User user1 = new User(1001,"admin1","123456",23,"男");
    User user2 = new User(1002,"admin2","123456",23,"男");
    User user3 = new User(1003,"admin3","123456",23,"男");
    Gson gson = new Gson();
    //通过gson将实体类对象转换为json响应浏览器
    //String jsonString = gson.toJson(user);
    //通过gson将map转换为json响应浏览器
    /*Map map = new HashMap<>();
    map.put("1001", user1);
    map.put("1002", user2);
    map.put("1003", user3);
    String jsonString = gson.toJson(map);*/
    //通过gson将list转换为json响应浏览器
    List<User> list = Arrays.asList(user1, user2, user3);
    String jsonString = gson.toJson(list);
    response.getWriter().write(jsonString);
}

6.2、使用jackson

protected void testAxiosReturnJson(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    User user1 = new User(1001,"admin1","123456",23,"男");
    User user2 = new User(1002,"admin2","123456",23,"男");
    User user3 = new User(1003,"admin3","123456",23,"男");
    ObjectMapper mapper = new ObjectMapper();
    //通过jackson将实体类对象转换为json响应浏览器
    //String jsonString = mapper.writeValueAsString(user1);
    //通过jackson将map转换为json响应浏览器
    /*Map map = new HashMap<>();
    map.put("1001", user1);
    map.put("1002", user2);
    map.put("1003", user3);
    String jsonString = mapper.writeValueAsString(map);*/
    //通过jackson将list转换为json响应浏览器
    List<User> list = Arrays.asList(user1, user2, user3);
    String jsonString = mapper.writeValueAsString(list);
    response.getWriter().write(jsonString);
}