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格式的请求参数，会在请求报文中保存传输到服务器，因此请求方式必须为postdata:{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格式的请求参数转换为mapMap 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格式的请求参数转换为mapMap 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<String, User> 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<String, User> 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);
}