学习目标：
- 理解Ajax的概念，学会使用js与jQuery实现ajax
- 理解什么是JSON，熟练掌握JSON与Java类的转换
学习内容：
一、AJAX
1、概念：ASynchronous JavaScript and Xml 异步的JavaScript和Xml
- 异步和同步：客户端和服务器端相互通信的基础上
- 同步：客户端必须等待服务器端的响应，在等待期间客户端不能做其他操作
- 异步：客户端不须等待服务器端的响应，在等待期间客户端能够做其他操作
- 一种能够在无需重新加载整个页面的情况下，更够更新部分网页的技术
- 通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新
- 传统的网页（不使用Ajax技术）如果需要更新内容，必须重载整个页面
- 提升用户体验
2、实现
- 原生js实现方式（了解）
- jQuery实现方式
- $.ajax(url,[settings]) $.ajax({键值对})
- $.get() 发送get请求
- 语法：$.get(url, [data], [callback], [type])
- 参数：
- url：请求路径
- data：请求数据
- callback：回调函数
- type：响应结果的类型
- $.post() 发送post请求
- 语法：$.post(url, [data], [callback], [type])
- 参数：
- url：请求路径
- data：请求数据
- callback：回调函数
- type：响应结果的类型
二、JSON
1、概念：JavaScript Object Notation JavaScript对象表示法
- Person p = new Person();
p.setName(“Jim”);
p.setAge(23); - 存储和交换文本信息的语法
- 进行数据传输
- 比xml更小、更快、更易解析
2、语法
- 基本规则
- 数据在名称/值对中：JSON数据由键值对构成：
- 键用引号（单双都行），也可以不用引号
- 值的取值类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true或false）
- 数组（在方括号中） {“person”:[{},{}]}
- 对象（在花括号中） {“address”:{“province”:“陕西”…}}
- null
- 数据由逗号分隔：多个键值对由逗号分隔
- 花括号保存对象：
- 方括号保存数组
- 数据在名称/值对中：JSON数据由键值对构成：
- 获取数据
- json对象，键名
- json对象[“键名”]
- 数组对象[索引]
3、JSON数据和Java对象的相互转换
-
JSON解析器
- 常见的解析器：JsonLib，Gson，fastjson，jackson
-
JSON转换为Java对象
-
Java对象转换为JSON
- 使用步骤
- 导入jackson相关jar包
- 创建jackson核心对象 ObjectMapper对象
- 调用ObjectMapper相关方法进行转换
- 注解（加在响应属性上面）
- @JsonIgnore：排除属性
- @JsonFormat：属性值格式化 pattern=“yyyy-MM-dd”
- 复杂Java对象转换
- List：数组
- Map：对象格式一致
- 使用步骤
4、案例：检验用户名是否存在
- 分析
- 当文本输入框失去焦点，发送Ajax请求，查询数据库是否存在该用户名
- 如果存在，提示信息：此用户名太受欢迎，
- 如果不存在，提示信息：用户名可用
- 当文本输入框失去焦点，发送Ajax请求，查询数据库是否存在该用户名
学习产出：
1、 用JS实现Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script>
// 定义方法
function fun() {
// 发送异步请求
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 发送请求
/**
* 参数：
* 1、请求方式
* 1、POST send函数传递参数
* 2、GET URL中传递参数
* 2、请求的URL
* 3、同步或异步请求：true（异步） false（同步）
*/
xmlhttp.open("GET","ajaxServlet?username=Jim",true);
// 发送请求
xmlhttp.send();
// 接收并处理l来自服务器的响应结果
// 获取方式：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>
2、JQuery实现Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// 定义方法
// 普通实现
// function fun() {
// $.ajax({
// url : "ajaxServlet", // 请求路径
// type : "POST", // 请求方式
// // data : "username=Jim&age=23", // 请求参数
// data : {"username":"Jim","age":23},
// success : function (data) {
// alert(data);
// }, // 响应成功执行的回调函数
// error : function () {
// alert("出错了！！！"); // 响应失败执行的回调函数
// },
// dataType : "text" // 设置接收到的响应数据的格式
// })
// }
// get方法实现
// function fun() {
// $.get("ajaxServlet",{"username":"Jim"},function (data) {
// alert(data);
// },"text");
// }
// post方法实现
function fun() {
$.post("ajaxServlet",{"username":"Jim"},function (data) {
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input type="text">
</body>
</html>
package xuefeng.domain;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;
import java.util.Date;
public class Person {
private String name;
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 Person() {
}
public Person(String name, int age, String gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
@Override
public String toString() {
return "Person{" + "name='" + name + '\'' + ", age=" + age + ", gender='" + gender + '\'' + '}';
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
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;
}
}
package xuefeng.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 {
// 获取请求参数
String username = request.getParameter("username");
// 处理业务逻辑，耗时
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
// 打印username
System.out.println(username);
// 响应
response.getWriter().write("hello:"+username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
3、 JSON定义方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script>
// 定义基本格式
var person = {"name":"Jim","age":23,"gender":true};
// alert(person);
// 获取name值
// var name = person.name;
// var name = person["name"];
// alert(name);
// 嵌套格式
var persons = {"persons":[
{"name":"Jim","age":23,"gender":true},
{"name":"Tom","age":22,"gender":false},
{"name":"Mary","age":24,"gender":true}
]
};
// alert(persons);
// var name = persons.persons[2].name;
// alert(name);
var ps = [
{"name":"Jim","age":23,"gender":true},
{"name":"Tom","age":22,"gender":false},
{"name":"Mary","age":24,"gender":true}
];
// alert(ps);
// alert(ps[1].name)
</script>
</head>
<body>
</body>
</html>
4、 JSON遍历方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON遍历</title>
<script>
// 定义基本格式
var person = {"name":"Jim","age":23,"gender":true};
// 嵌套格式
var persons = {"persons":[
{"name":"Jim","age":23,"gender":true},
{"name":"Tom","age":22,"gender":false},
{"name":"Mary","age":24,"gender":true}
]
};
var ps = [
{"name":"Jim","age":23,"gender":true},
{"name":"Tom","age":22,"gender":false},
{"name":"Mary","age":24,"gender":true}
];
// 获取person对象的所有键和值
// for in 循环
/*for (var key in person) {
// 这里不能够直接使用person.key获取值，因为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>
</head>
<body>
</body>
</html>
3、 用户名校验案例
<!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();
alert(username);
// 发送ajax请求
// 期望服务器响应回的消息数据格式：
// {"userExist":true,"msg":"此用户名太受欢迎，请更换一个"}
// {"userExist":false,"msg":"此用户名可用"}
$.get("findUserServlet",{"username":username},function (data) {
var span = $("#s_username");
// 判断用户名是否存在
if (data.userExist) {
// 用户名存在
span.css("color","red");
span.html(data.msg);
} else {
// 用户名不存在
span.css("color","green");
span.html(data.msg);
}
},"json")
})
})
</script>
</head>
<body>
<form action="">
<input type="text" id="username" name="username" placeholder="请输入用户名">
<span id="s_username"></span><br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" value="注册"><br>
</form>
</body>
</html>
package xuefeng.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 {
response.setContentType("text/html;charset=utf-8");
// 获取用户名
String username = request.getParameter("username");
System.out.println(username);
// 调用service层判断用户名是否存在
Map<String, Object> map = new HashMap<>();
if ("Jim".equals(username)){
// 存在
map.put("userExist",true);
map.put("msg","此用户名太受欢迎，请更换一个");
} else {
// 不存在
map.put("userExist",false);
map.put("msg","此用户名可用");
}
// 将map转换成json数据，并传递给响应response
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getWriter(),map);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
