1.什么是AJAX?
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。与传统的页面相比,在更新部分内容时,不需要加载整个页面。
2.如何使用AJAX?
jQuery 对 JS 原生的 AJAX 进行了封装,最常用的AJAX中是:
$.ajax( { option1:value1,option2:value2… } );
常用的 option 有如下:
- async:是否异步,默认是 true 代表异步
- data:发送到服务器的参数,建议使用 json 格式
- dataType:服务器端返回的数据类型,常用 text 和 json
- success:成功响应,执行的函数,对应的类型是 function 类型(回调函数,通常会有一个参数,接收来自servlet中返回的数据)
- type:请求方式,POST/GET
- url:请求服务器端地址
3.具体案例的实现
以简单的注册页面为例,当我们输入姓名的时候,希望当鼠标光标移动到密码框的时候,就可以判断出来用户名是否就已经重复不可以被使用了。
register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//校验该用户名是否已经存在
function checkUsername(username){
$.ajax({
url:"checkUsernameServlet",
type:"post",
data:{"username":username},
success:function(data){
if(data=="true"){
//说明存在
$("#msg").html("该用户已存在");
}else{
//不存在
$("#msg").html("");// 清空
}
}
});
}
</script>
</head>
<body>
<form action="RegisterServlet" method="post">
用户名:
<input name="username" type="text" placeholder="请输入用户名" value="" onblur="checkUsername(this.value)" >
<span id="msg"></span><br>
密码:
<input type="password" name="password" value="" placeholder="请输入密码" ><br>
<input type="submit" value="提交">
</form>
</body>
</html>
这里我们主要分析js中的代码:
在form表单的用户名文本框中,有onblur="checkUsername(this.value)"这么一个函数,onblur()函数是在对象失去焦点时触发,简单来说就是鼠标光标离开input输入框时就被调用。
//校验该用户名是否已经存在
function checkUsername(username){
$.ajax({
url:"checkUsernameServlet",
type:"post",
data:{"username":username},
success:function(data){
if(data=="true"){
//说明存在
$("#msg").html("该用户已存在");
}else{
//不存在
$("#msg").html("");// 清空
}
}
});
}
语法主要是:
$ajax({ 代码 });
常用的选项有:
async:是否异步,默认是 true 代表异步,所以可以不写
url:主要是请求的服务器端地址,上面案例是发送给servlet
type:请求的方式,get/post
data:发送到服务器中的参数,通常使用json格式
success:成功响应,执行的函数,对应的类型是 function 类型,function中的参数,是servlet返回的数据。这里需要放一下servlet中的代码,如下
@WebServlet("/checkUsernameServlet")
public class checkUsernameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String username=request.getParameter("username");
//根据username查询数据库,省略校验过程
//假设存在
response.getWriter().write("true");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
function函数中的参数就是 response.getWriter().write(“true”);,这句代码返回的值,接下来就是具体的需求逻辑。
最后可以实现在输入用户名就可以判断判断是否用户名可以被使用。
以上。