深圳企业网站建设开发费用,安阳百姓网,vs做网站登录界面,深圳住房和建设局网站轮候大厅一、ajax
ajax#xff0c;Asynchronous JavaScript And XML#xff0c;异步的JavaScript和XML
同步#xff1a;伴随着页面的刷新或跳转#xff0c;即全局刷新#xff1b;同步请求会阻塞代码的执行#xff0c;即同步请求会一个一个的执行
异步#xff1a;在不刷新页面…一、ajax
ajaxAsynchronous JavaScript And XML异步的JavaScript和XML
同步伴随着页面的刷新或跳转即全局刷新同步请求会阻塞代码的执行即同步请求会一个一个的执行
异步在不刷新页面的情况下与服务器进行交互即局部刷新异步请求不会阻塞代码的执行ajax请求一旦发送不会等服务器响应结果完毕后面的代码就会继续执行
ajax的核心对象XMLHttpRequest
二、axios
1、axios入门案例
testAxios(){axios({url:testAxiosServlet?methodtestAxios,//请求路径method:get//请求方式}).then(response{//请求成功要执行的钩子函数//response表示封装了服务器响应信息的对象console.log(this.message);});
}2、axios发送请求参数
2.1、发送普通的请求参数
axios({url:testAxiosServlet?methodtestAxios,//请求路径method:post,//请求方式//params设置普通的请求参数不管使用的get或post请求方式请求参数都会拼接在请求地址后params:{username:admin,password:123456}
}).then(response{//请求成功要执行的钩子函数//response表示封装了服务器响应信息的对象console.log(this.message);
});2.2、发送json格式的请求参数
axios({url:testAxiosServlet?methodtestAxiosUseData,//请求路径method:post,//请求方式//data设置json格式的请求参数会在请求报文中保存传输到服务器因此请求方式必须为postdata:{username:root,password:abc123}
}).then(response{//请求成功要执行的钩子函数//response表示封装了服务器响应信息的对象console.log(this.message);
});params和data的区别 1、params传输请求参数时可以使用get或post请求方式会以namevaluenamevalue的格式拼接在请求地址后 2、data传输请求参数时只能使用post请求方式会以{key:value,key:value}的格式在请求报文的请求体中传输到服务器 3、params传输的请求参数可以通过request.getParameter()或request.getParameterValues()获取但是data传输的请求参数不能通过此方法获取只能通过获取请求体的方式获取json字符串整体在通过相应技术转换为Java对象 3、axios.get()
axios.get(testAxiosServlet?methodtestAxiosByGetusernameadminpassword123456
).then(response{console.log(response.data);
});4、axios.post()
axios.post(testAxiosServlet?methodtestAxiosByPost,//请求参数{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响应浏览器/*MapString, User map new HashMap();map.put(1001, user1);map.put(1002, user2);map.put(1003, user3);String jsonString gson.toJson(map);*///通过gson将list转换为json响应浏览器ListUser 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响应浏览器/*MapString, User map new HashMap();map.put(1001, user1);map.put(1002, user2);map.put(1003, user3);String jsonString mapper.writeValueAsString(map);*///通过jackson将list转换为json响应浏览器ListUser list Arrays.asList(user1, user2, user3);String jsonString mapper.writeValueAsString(list);response.getWriter().write(jsonString);
}
