1.什么是AJAX?能干什么?作用是什么?同步和异步的区别
异步的javaScript和XML
AJAX是通过和浏览器进行少量的数据交互,使网页实现异步更新,进行局部更新
少量数据交换,局部更新
同步:当客户端访问服务端,服务器处理的时候,不能做任何操作,直到操作完,才能继续操作
异步::当客户端访问服务端,服务器处理的时候,可以做其他操作,实现局部的刷新
2.jQuery的原生方式实现AJAX
核心语法:$get(url,[data],[callback],[type])
3.get/post实现AJAX
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form autocomplete="off">
姓名:<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码:<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//为用户名绑定失去焦点事件
$("#username").blur(function () {
let username = $("#username").val();
//jQuery的get方式实现AJAX
$.get(
//请求的资源路径
"userServlet",
//请求参数
"username=" + username,
//回调函数
function (data) {
//将响应的数据显示到Span标签
$("#uSpan").html(data);
},
//响应数据形式
"text"
);
});
</script>
</html>
UserServlet
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("/userServlet")
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求和响应的乱码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//1.获取请求参数
String username = req.getParameter("username");
//模拟服务器处理请求需要5秒钟
/*try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}*/
//2.判断姓名是否已注册
if("zhangsan".equals(username)) {
resp.getWriter().write("<font color='red'>用户名已注册</font>");
}else {
resp.getWriter().write("<font color='green'>用户名可用</font>");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
post方式只需要将get更换成post即可
4.jQuery的通用方式实现AJAX,是一个字面量对象
$.ajax({name:value
name:value
name:value…});
url:请求资源路径
Asanc:是否异步请求true/false
Data:发送到服务器的数据,可以是键值对形式
Type:请求方式get/post
dataType:预期返回的数据类型,取值可以是xml,html,json,text
success:请求成功时调用的回调函数
error:请求失败的回调函数
案例:判断用户名是否注册
register02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form autocomplete="off">
姓名:<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码:<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//jQuery通用方式实现ajax,定义字面量对象方式
$.ajax({
//请求资源路径
url: "userServlet",
//是否异步 不写默认为true
async: true,
//请求参数
data: {username, userName},
//请求方式 不写默认为get
type: "GET",
//数据形式
dataType: "text",
//请求成功后调用的回调函数
success: function (data) {
$("#uSpan").html(data);
},
//请求失败后的回调函数
error: function () {
alert("数据请求失败...")
},
});
</script>
</html>
当前端页面访问Servlet,会通过获取用户名,判断是否注册
package com.itheima;
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("/userServlet")
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求和响应的乱码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//1.获取请求参数
String username = req.getParameter("username");
//模拟服务器处理请求需要5秒钟
/*try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}*/
//2.判断姓名是否已注册
if("zhangsan".equals(username)) {
resp.getWriter().write("<font color='red'>用户名已注册</font>");
}else {
resp.getWriter().write("<font color='green'>用户名可用</font>");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
5.JSON的处理
json:是一种轻量级的数据交换
创建格式:
对象类型:{name;value,name:value…};
数组/集合类型:[{name:value},{name:value…}]
混合类型:{name:[{name:value},{name:value}…]}
常用方法:
stringify(对象):将指定格式转换为json格式字符串
parse(字符串):将指定json格式字符串解析成对象
6.JSON转换工具的使用
JSON转换工具是通过JAVA封装好的JAR工具包
可以将java对象集合转换成JSON格式字符串,也可以将字符串转换成java对象
7.综合案例(搜索联想)
使用到的技术点:
html,jquery,ajax
tomcat,servlet
三层
mybatis
mysql
前端页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户搜索</title>
<style type="text/css">
.content {
width: 643px;
margin: 100px auto;
text-align: center;
}
input[type='text'] {
width: 530px;
height: 40px;
font-size: 14px;
}
input[type='button'] {
width: 100px;
height: 46px;
background: #38f;
border: 0;
color: #fff;
font-size: 15px
}
.show {
position: absolute;
width: 535px;
height: 100px;
border: 1px solid #999;
border-top: 0;
display: none;
}
</style>
</head>
<body>
<form autocomplete="off">
<div class="content">
<img src="img/logo.jpg">
<br/><br/>
<input type="text" id="username">
<input type="button" value="搜索一下">
<div id="show" class="show"></div>
</div>
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//为用户名输入框绑定鼠标单击事件
$("#username").mousedown(function () {
//获取输入的用户名
let username = $("#username").val();
//判断用户名是否为空
if (username == null || username == "") {
//如果为空,将联想框隐藏
$("#show").hide();
return;
}
//如果不为空,发送AJAX请求,并将数据显示到联想框
$.ajax({
//请求资源路径
url: "userServlet",
//请求参数
data: {"username": username},
//请求方式
type: "POST",
//请求成功后的回调函数
success: function (data) {
//将返回的数据显示到show的div
let names = "";
for (let i = 0; i < data.length; i++) {
console.log(data[i]);
names += "<div>" + data[i].name + "<div>"
}
$("#show").html(names);
$("#show").show();
},
dataType: "JSON"
});
});
</script>
</html>
为用户名框绑定单击事件,获取到用户名,判断用户名是否为空,如果为空,则隐藏联想提示框,如果不为空,则发送AJAX请求,并将响应数据显示到联想框
控制层
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求和响应乱码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//获取请求参数
String username = req.getParameter("username");
//调用业务层的模糊查询方法得到数据
UserService userService = new UserServiceImpl();
List<User> users = userService.selectLike(username);
//将数据转换成JSON,响应到客户端
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(users);
resp.getWriter().write(json);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
获取请求参数,调用业务层的模糊查询方法,将返回的数据转成JSON,并相应给客户端