html界面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function fun(){ //发送异步请求 //1.创建核心请求对象（不同版本浏览器获取不同的对象） //（这段代码不需要背，www.w3school上面有） var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //2. 建立请求连接 /* open方法的参数： 第一个参数： 请求方式：GET POST 第二个参数： 请求的URL(请求那一个Servlet) 第三个参数： 同步或异步请求 true（异步）或 false（同步） */ xmlhttp.open("GET","AjaxServlet?username=tom",true); /* 请求的参数的定义 * get方式的请求参数在url后边拼接。send方法空参 * post方式的请求参数在send方法中定义 */ //3. 发送请求 xmlhttp.send(); //4. 客户端浏览器接收并处理来自服务器的响应结果 //获取方式：xmlhttp.responseText //什么时候获取？当服务器响应后再获取 //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。 xmlhttp.onreadystatechange=function() { //判断readyState就绪状态是否为4，并且再次判断status响应状态码是否为200 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //获取服务器的响应结果 var responseText = xmlhttp.responseText; alert(responseText) } } } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun()"> <input type="text"> </body> </html>Servlet代码
package cn.itcast.web.servlet; import java.io.IOException; @javax.servlet.annotation.WebServlet("/AjaxServlet") public class AjaxServlet extends javax.servlet.http.HttpServlet { protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { //1. 获取请求参数 String username = request.getParameter("username"); //处理业务逻辑。耗时 try { Thread.sleep(5000); } catch (InterruptedException e) { e.printStackTrace(); } //2. 打印username System.out.println(username); //3. 响应 response.getWriter().write("hello," + username); } protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { this.doPost(request, response); } }$.ajax()发送请求的通用4方式
语法：$.ajax({键值对})
$.ajax({ url:"",//设置请求的资源路径（一般为一个servlet的路径） data:{json的数据格式},//设置请求参数 data:"参数1=值1 & 参数2=值2 &..." //设置请求参数 success:function(data){//设置成功后的回调函数,data是响应回来的东西}, dataType:"JSON",//设置接收到的响应的数据类型 type:"GET", //设置请求的方式 async:true //默认异步，false为同步 error:funcation(){},//如果请求出现错误，执行的函数 还有很多的设置，w3shool上的api自己去看 });$.get()：发送get请求
语法： $.get(url,[data],[callback],[type]) 参数 : url：请求路径data：请求参数。如："name=zhangsan&age=18",或使用json格式callback：回调函数type ：响应结果的类型 $.get("AjaxServlet",{username:"tom"},function (data) { alert(data) },"text");$.post()：发送post请求
语法：$.post(url,[data],[callback],[type]) $.post("AjaxServlet",{username:"tom"},function (data) { alert(data) },"text");JavaScript Object Notation：JavaScript对象表示法
Person p = new Person(); p.setName("张三"); p.setAge(23); var p = {"name":"张三","age":23}; 1JSON 是存储和交换文本信息的语法
进行数据的传输。
数据在名称/值对中：json数据是由键值对构成的
键用引号（单双都行）引起来，也可以不使用引号值的取值类型： 数字（整数或浮点数）字符串（在双引号中）逻辑值（true或false）数组（在方括号中）：{"persons":[{},{}]}对象（在花括号中）:{"address":{"province":"浙江"...}}null数据由逗号分隔：多个键值对由逗号分隔
花括号保存对象：使用{}定义json格式
方括号保存数组：[]
<script> //1. 定义基本格式 var person = {"name":"张三", "age":23, "gender":"男"}； alert(person.name); //2. 嵌套格式 {} -> [] var persons = { "persons":[ {"name":"zhangsan", "age":23}, {"name":"lisi", "age":21}, {"name":"wangwu", "age":26} ] }; //2. 嵌套格式 [] -> {} var p = [ {"name":"zhangsan", "age":23}, {"name":"lisi", "age":21}, {"name":"wangwu", "age":26} ]; </script>使用步骤
导入Jackson的相关jar包创建Jackon核心对象:ObjectMapper调用ObjectMapper的相关方法进行转换 常见的转换方法： writeValue(参数1,obj) 常见的参数1有： File：将obj对象转换为JSON字符串，并保存到指定的文件中Writer：将obj对象转换为JSON字符串，并将JSON数据填充到字符输出流中OutputStream：将obj对象转换为JSON字符串，并将JSON数据填充到字节输出流中 writeValueAsString(obj)将对象转为json字符串 public void test1() throws Exception { //1. 创建Person对象 Person p = new Person(); p.setName("张三"); p.setAge(23); p.setGender("男"); //2. 创建Jackson的核心对象 ObjectMapper ObjectMapper om = new ObjectMapper(); //3. 转换 String json = om.writeValueAsString(p); System.out.println(json);//{"name":"张三","age":23,"gender":"男"} //writeValue：将数据写到d://text文件中 om.writeValue(new File("d://a.txt"), p); //writeValue：将数据关联到Writer中 om.writeValue(new FileWriter("d://b.txt"), p); }注解：
@JsonIgnore：排除属性（对象被排除的属性就不会转为JSON字符串了）（添加到User类中对于的属性上或者对于的get方法上）
@JsonIgnore//忽略birthday private Date birthday;@JsonFormat：属性值的格式化（对于的属性被转化为JSON的时候，先被格式化）（添加到User类中对于的属性上或者对于的get方法上）
//pattern为设置格式化的规则 @JsonFormat(pattern = "yyyy-MM-dd") private Date birthday;复杂的java对象转换JSON数据
List集合转JSON：转为数组 [ {}，{}，{}，....]Map集合转JSON：对象格式一致 { "键"="值",.....}校验用户名是否存在
服务器响应的数据，在客户端使用时，要想当做json数据格式使用 $.get(...,"json"):将最后一个参数指定为json在服务器端设置MIME格式 response.setContentType("application/json;charset=utf-8");注册页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <script src="js/jquery-3.3.1.min.js"></script> <script> //在页面加载完成后 $(function () { //给username绑定blur事件 $("#username").blur(function () { //获取username文本输入框的值 var username = $(this).val(); //发送ajax请求 //期望服务器响应回的数据格式：{"userExist":true, "msg":"此用户已注册，请更换"} // {"userExist":false, "msg":"用户名可用"} $.get("findUserServlet", {username:username}, function (data) { //判断userExist键的值是否为true var span = $("#s_username"); if(data.userExist){ //用户名存在 span.css("color", "red"); span.html(data.msg); } else { //用户名不存在 span.css("color", "green"); span.html(data.msg); } }); }); }); </script> </head> <body> <form> <input type="text" name="username" id="username" placeholder="请输入用户名"> <span id="s_username"></span><br> <input type="password" name="password" placeholder="请输入密码"> <br> <input type="submit" value="注册"> </form> </body> </html>findUserServlet
package cn.itcast.web.servlet; import com.fasterxml.jackson.databind.ObjectMapper; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.HashMap; import java.util.Map; @WebServlet("/findUserServlet") public class findUserServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1. 获取用户名 String username = request.getParameter("username"); //2. 调用service层判断用户名是否存在 //期望服务器响应回的数据格式：{"userExist":true, "msg":"此用户已注册，请更换"} // {"userExist":false, "msg":"用户名可用"} //解决乱码 // response.setContentType("text/html;charset=utf-8"); //设置响应的格式为json response.setContentType("application/json;charset=utf-8"); Map<String, Object> map = new HashMap<>(); if("tom".equals(username)){ //存在 map.put("userExist", true); map.put("msg", "此用户已注册，请更换"); } else{ //不存在 map.put("userExist", false); map.put("msg", "用户名可用"); } //将map转为json,并传递回客户端 //将map转为json ObjectMapper mapper = new ObjectMapper(); //传递回客户端 mapper.writeValue(response.getWriter(), map); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } }