文章目录
一、Ajax
1.1 概念
- ASynchronous JavaScript And XML:异步的JavaScript和XML
- 异步和同步:客户端和服务器端相互通信的
- 同步:客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 异步:客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
- 异步和同步:客户端和服务器端相互通信的
- 特点:
- Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
- 通过在后台与服务器进行少量数据交换,Ajax可以是网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- 传统的网页(不适用Ajax)如果需要更新内容,必须重载整个网页页面。
- 提升用户的体验。
1.2 实现方式
1.2.1 原生的JS实现方式
-
html界面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生实现Ajax</title> <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. 建立连接 /* 参数: 1. 请求方式:GET POST * get方式,请求擦书在url后边拼接。send方法空参 * post方式,请求参数在send方法中定义 2. 请求的URL 3. 同步或异步请求 true(异步)或 false(同步) */ xmlhttp.open("GET","AjaxServlet?username=tom",true); //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); } }
1.2.2 JQuery实现方式
-
$.ajax()
-
语法:
$.ajax({键值对})
$.ajax({ url:"", data:{},//请求的数据类型 success:function(data){//成功后的回调函数,data是响应回来的东西 }, dataType:"text",//返回的数据类型 type:"GET", async:true //默认异步,false为同步 });
-
-
$.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("AjaxServlet",{username:"tom"},function (data) { alert(data) },"text");
二、JSON
2.1 概念
-
JavaScript Object Notation:JavaScript对象表示法
Person p = new Person(); p.setName("张三"); p.setAge(23);
var p = {"name":"张三","age":23};
-
JSON 是存储和交换文本信息的语法
-
进行数据的传输。
2.2 语法
2.2.1 基本规则
-
数据在名称/值对中: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>
2.2.2 获取数据
json对象.键名
json对象["键名"]
json数组对象[下标]
<script>
//1. 定义基本格式
var person = {"name":"张三", "age":23, "gender":"男"};
// alert(person.name);
//2. 嵌套格式 [] -> {}
var ps = [
{"name":"zhangsan", "age":23},
{"name":"lisi", "age":21},
{"name":"wangwu", "age":26}
];
//获取person对象中所有的键和值
//for in 循环
for(var key in person){
// alert(key + "---" + person.key);//person.key相当于person."name",key为字符串形式
alert(key + "---" + person[key]);
}
//获取ps中的所有值 - 双层for循环
for(var i = 0; i < ps.length; i++){
var p = ps[i];//把数组中的每个元素拿出来
for(var key in p){ //把每个元素中的键拿出来
alert(key + "---" + p[key]);
}
}
</script>
2.3 JSON数据和Java对象的相互转换
2.3.1 JSON解析器
- 常见的解析器:Jsonlib,Gson,fastjson,jackson
2.3.2 JSON对象转为Java对象
- 使用步骤
- 导入
Jackson
的相关jar包 - 创建
Jackon
核心对象:ObjectMapper
- 调用
ObjectMapper
的相关方法进行转换readValue(json字符串, Class)
- 导入
2.3.3 Java对象转为JSON对象
-
使用步骤
- 导入
Jackson
的相关jar包 - 创建
Jackon
核心对象:ObjectMapper
- 调用
ObjectMapper
的相关方法进行转换
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. 转换 /* 转换方法 writeValue(参数1,obj) 参数1: File:将obj对象转换为JSON字符串,并保存到指定的文件中 Writer:将obj对象转换为JSON字符串,并将JSON数据填充到字符输出流中 OutputStream:将obj对象转换为JSON字符串,并将JSON数据填充到字节输出流中 writeValueAsString(obj):将对象转为json字符串 */ 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
:排除属性@JsonIgnore//忽略birthday private Date birthday;
-
@JsonFormat
:属性值的格式化@JsonFormat(pattern = "yyyy-MM-dd") private Date birthday;
-
复杂的java对象转换
List
:数组Map
:对象格式一致
-
三 案例 - 校验用户名是否存在
-
校验用户名是否存在
- 服务器响应的数据,在客户端使用时,要想当做json数据格式使用
$.get(...,"json")
:将最后一个参数指定为json
- 在服务器端设置MIME格式
response.setContentType("application/json;charset=utf-8");
- 服务器响应的数据,在客户端使用时,要想当做json数据格式使用
-
注册页面
<!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); } }