概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML
异步和同步：客户端和服务器端相互通信的基础上 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。提升用户的体验实现方式：
原生的JS实现方式（了解） 代码实现如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> //定义方法 function fun() { //发送异步请求 //1.创建核心对象 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.建立连接 /* * * 参数： * method：请求的类型；GET 或 POST *get方式：请求参数在url后面拼接，send方法为空参 *post方式：请求参数在send方法中定义 url：文件在服务器上的位置 async：true（异步）或 false（同步） * * */ xmlhttp.open("GET", "/ajaxServlet?username=Tom", true); //3.发送请求 // string：仅用于 POST 请求 xmlhttp.send(); //4.接受并处理来自服务器的响应结果 //获取方式：document.getElementById("myDiv").innerHTML=xmlhttp.responseText; //什么时候获取？当服务器响应成果之后 //当xmlhttp对象的就绪状态改变是否为4，判断status响应状态是否为200 /* * readyState： * 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 status： 200: "OK" 404: 未找到页面 * * */ xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } } } </script> <body> <input type="button" value="发送异步请求" onclick=fun();> </body> </html> JQeury实现方式 代码如下： Ajaxservlet： package zhang.chen.servlet; 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; @WebServlet("/ajaxServlet") public class AjaxServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.获取请求参数 String username = request.getParameter("username"); //2.打印username System.out.println(username); //3.做出响应 response.getWriter().write("hello :" + username); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <script> //定义方法 function fun() { //使用$.ajax()发送异步请求 $.ajax({ url: "ajaxServlet",//请求参数路径 type: "POST",//请求方式 //data:"username=jack&age=23",//请求参数 data: {"username": "jack", "age": "23"}, success: function (data) { alert(data); //响应成功后的回调函数 }, error: function () { alert("出错了。。。") },//表示如果请求响应出现错误，会执行的回调函数 dataType: "text"//设置接受到的响应数据的格式 }); } </script> <body> <input type="button" value="发送异步请求" onclick=fun();> </body> </html> . g e t ( ) ： 发 送 g e t 请 求 ∗ 语 法 ： .get()：发送get请求 * 语法： .get()：发送get请求∗语法：.get(url, [data], [callback], [type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数 * type：响应结果的类型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <script> //定义方法 function fun() { //使用$.get(url, [data], [callback], [type]) /* url:待载入页面的URL地址 data:待发送 Key/value 参数。 callback:载入成功时回调函数。 type:返回内容格式，xml, html, script, json, text, _default。*/ $.get("ajaxServlet", {username: "rose"}, function (data) { alert(data); }, "text"); } </script> <body> <input type="button" value="发送异步请求" onclick=fun();> </body> </html> . p o s t ( ) ： 发 送 p o s t 请 求 ∗ 语 法 ： .post()：发送post请求 * 语法： .post()：发送post请求∗语法：.post(url, [data], [callback], [type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数 * type：响应结果的类型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <script> //定义方法 function fun() { //使用$.post(url, [data], [callback], [type]) /* url:发送请求地址。 data:待发送 Key/value 参数。 callback:发送成功时回调函数。 type:返回内容格式，xml, html, script, json, text, _default。*/ $.post("ajaxServlet", {username: "rose"}, function (data) { alert(data); }, "text"); } </script> <body> <input type="button" value="发送异步请求" onclick=fun();> </body> </html>概念： JavaScript Object Notation JavaScript对象表示法 Person p = new Person(); p.setName(“张三”); p.setAge(23); p.setGender(“男”);
var p = {“name”:“张三”,“age”:23,“gender”:“男”};
json现在多用于存储和交换文本信息的语法进行数据的传输JSON 比 XML 更小、更快，更易解析。语法：
基本规则 数据在名称/值对中：json数据是由键值对构成的 键用引号(单双都行)引起来，也可以不使用引号值得取值类型： 数字（整数或浮点数）字符串（在双引号中）逻辑值（true 或 false）数组（在方括号中） {“persons”:[{},{}]}对象（在花括号中） {“address”:{“province”：“陕西”…}}null 数据由逗号分隔：多个键值对由逗号分隔花括号保存对象：使用{}定义json 格式方括号保存数组：[] 代码如下: perosn类： package zhang.chen.domian; import com.fasterxml.jackson.annotation.JsonFormat; import com.fasterxml.jackson.annotation.JsonIgnore; import java.util.Date; public class person { private String username; private int age; private String gender; // @JsonIgnore // 忽略该属性 @JsonFormat(pattern = "yyyy-MM-dd") private Date birthday; public Date getBirthday() { return birthday; } public void setBirthday(Date birthday) { this.birthday = birthday; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String getGender() { return gender; } public void setGender(String gender) { this.gender = gender; } @Override public String toString() { return "person{" + "username='" + username + '\'' + ", age=" + age + ", gender='" + gender + '\'' + '}'; } }json数据语法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> //1.定义基本格式 var person = {"username": "张三", age: 23, 'gender': true}; //alert(person); //var username = person.username; var username = person["username"]; //alert(username); //2.嵌套格式{}--》[] var persons = { "persons": [ {"username": "张三", "age": 23, "gender": true}, {"username": "李四", "age": 24, "gender": false}, {"username": "王五", "age": 25, "gender": true}, {"username": "赵六", "age": 26, "gender": false} ] }; var username1 = persons.persons[2].username; //alert(username1); //alert(persons); //3.嵌套格式[]-->{} var ps = [ {"username": "张三", "age": 23, "gender": true}, {"username": "李四", "age": 24, "gender": false}, {"username": "王五", "age": 25, "gender": true}, {"username": "赵六", "age": 26, "gender": false} ]; var username2 = ps[1].username; alert(username2); //alert(ps); </script> <body> </body> </html> 2. 获取数据: 1. json对象.键名 2. json对象["键名"] 3. 数组对象[索引] 4. 遍历json遍历语法： 代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> //3.嵌套格式[]-->{} var person = {"name": "张三", "age": 23, "gender": true}; var ps = [ {"username": "张三", "age": 23, "gender": true}, {"username": "李四", "age": 24, "gender": false}, {"username": "王五", "age": 25, "gender": true}, {"username": "赵六", "age": 26, "gender": false} ]; //获取person对象中所有的键和值 //for in 循环 for (var key in person) { //这个样子获取不行，因为相当于person."username" // alert(key+":"+person.key); //alert(key + ":" + person[key]); } //获取ps中所有的值 for (var i = 0; i < ps.length; i++) { var p = ps[i];//把数组中的每个单独的对象获取出来 for (var key in p) { alert("key" + ":" + p[key]); } } </script> <body> </body> </html>JSON数据和Java对象的相互转换
JSON解析器： 常见的解析器：Jsonlib，Gson，fastjson，jackson JSON转为Java对象 导入jackson的相关jar包创建Jackson核心对象 ObjectMapper调用ObjectMapper的相关方法进行转换 readValue(json字符串数据,Class) Java对象转换JSON 使用步骤： 导入jackson的相关jar包创建Jackson核心对象 ObjectMapper调用ObjectMapper的相关方法进行转换转换方法：
writeValue(参数1，obj): 参数1： File：将obj对象转换为JSON字符串，并保存到指定的文件中 Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中 OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中writeValueAsString(obj):将对象转为json字符串注解：
@JsonIgnore：排除属性。@JsonFormat：属性值得格式化 @JsonFormat(pattern = “yyyy-MM-dd”)复杂java对象转换
List：数组Map：对象格式一致 代码如下： package zhang.chen.test; import com.fasterxml.jackson.databind.ObjectMapper; import org.junit.Test; import zhang.chen.domian.person; import java.io.FileWriter; import java.io.IOException; import java.util.*; public class jacksonTest { // Java对象转为JSON字符串 @Test public void test01() throws Exception { //1.创建Person对象 person p = new person(); p.setUsername("张三"); p.setAge(23); p.setGender("男"); //2.创建Jackson的核心对象 ObjectMapper ObjectMapper mapper = new ObjectMapper(); //3.转换 /* 转换方法： writeValue(参数1，obj): 参数1： File：将obj对象转换为JSON字符串，并保存到指定的文件中 Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中 OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中 writeValueAsString(obj):将对象转为json字符串 */ String json = mapper.writeValueAsString(p); //{"username":"张三","age":23,"gender":"男"} System.out.println(json); //writeValue，将数据写到d://a.txt文件中 //mapper.writeValue(new File("D:\workspace\javaIDEAspace\Ajax&&Json\src\zhang\chen\test"),p); //writeValue.将数据关联到Writer中 mapper.writeValue(new FileWriter("D:\\workspace\\javaIDEAspace\\Ajax&&Json\\src\\zhang\\chen\\test/b.txt"), p); } @Test public void test02() throws Exception { //1.创建Person对象 person p = new person(); p.setUsername("张三"); p.setAge(23); p.setGender("男"); p.setBirthday(new Date()); //2.创建Jackson的核心对象 ObjectMapper ObjectMapper mapper = new ObjectMapper(); //3.转换 String json = mapper.writeValueAsString(p); System.out.println(json); //{"username":"张三","age":23,"gender":"男","birthday":1601880852911} //使用JsonFormat格式化之后得到{"username":"张三","age":23,"gender":"男","birthday":"2020-10-05"} } @Test public void test03() throws Exception { //1.创建Person对象 person p = new person(); p.setUsername("张三"); p.setAge(23); p.setGender("男"); person p1 = new person(); p1.setUsername("张三"); p1.setAge(23); p1.setGender("男"); person p2 = new person(); p2.setUsername("张三"); p2.setAge(23); p2.setGender("男"); person p3 = new person(); p3.setUsername("张三"); p3.setAge(23); p3.setGender("男"); //封装到List集合之中 List<person> ps = new ArrayList<person>(); ps.add(p); ps.add(p1); ps.add(p2); ps.add(p3); //2.创建Jackson的核心对象 ObjectMapper ObjectMapper mapper = new ObjectMapper(); //3.转换 String json = mapper.writeValueAsString(ps); System.out.println(json); // [{"username":"张三","age":23,"gender":"男","birthday":null}, // {"username":"张三","age":23,"gender":"男","birthday":null}, // {"username":"张三","age":23,"gender":"男","birthday":null}, // {"username":"张三","age":23,"gender":"男","birthday":null}] } @Test public void test04() throws Exception { //1.创建Map对象 Map map = new HashMap(); map.put("username", "张三"); map.put("age", 23); map.put("gender", "男"); //2.创建Jackson的核心对象 ObjectMapper ObjectMapper mapper = new ObjectMapper(); //3.转换 String json = mapper.writeValueAsString(map); System.out.println(json); //{"gender":"男","age":23,"username":"张三"} } @Test public void test06() throws IOException { //json转Java对象 //1.初始化JSON字符串 String json = "{\"gender\":\"男\",\"age\":23,\"username\":\"张三\"}"; 2.创建ObjectMapper对象 ObjectMapper mapper = new ObjectMapper(); person person = mapper.readValue(json, person.class); System.out.println(person); //person{username='张三', age=23, gender='男'} } }代码如下： findUserServlet：
package zhang.chen.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层是否存在该用户 //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"} // {"userExsit":false,"msg":"用户名可用"} //设置响应的数据格式为json response.setContentType("application/json;charset=utf-8"); Map<String,Object> map=new HashMap<>(); //这里先设置为tom if("tom".equals(username)){ //存在 map.put("userExsit", true); map.put("msg", "此用户名太受欢迎,请更换一个"); }else{ //不存在 map.put("userExsit", false); map.put("msg", "用户名可用"); } //3.将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); } }验证码判断页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> <script src="js/jquery-3.3.1.min.js"></script> <script> //在页面加载完成之后 $(function () { //给username绑定单击事件 //blur([[data],fn]) // 当元素失去焦点时触发 blur 事件。 /* data:blur([Data], fn) 可传入data供函数fn处理。 fn:在每一个匹配元素的blur事件中绑定的处理函数*/ $("#username").blur(function () { //获取username文本输入框的值 var username = $(this).val(); //发送Ajax请求 //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"} // {"userExsit":false,"msg":"用户名可用"} /* url:待载入页面的URL地址 data:待发送 Key/value 参数。 callback:载入成功时回调函数。 type:返回内容格式，xml, html, script, json, text, _default。 */ $.get("findUserServlet", {username:username}, function (data) { //1.判断userExsit键的值是否为true //userEsit是判断用户名是否一样 var span=$("#s_username"); if(data.userExsit){ //用户名存在 span.css("color","red"); span.html(data.msg); }else{ //用户名不存在 span.css("color","green"); span.html(data.msg); } }); }); }); </script> <form> <input type="text" id="username" name="username" placeholder="请输入用户名"> <span id="s_username"></span> <input type="password" name="password" placeholder="请输入密码"> <input type="button" value="注册"> </form> </body> </html>结果如下：
