Ajax
概述
AJAX(Asynchronous Javascript And
XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
AJAX还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。
案例介绍
为了容易理解,咱们还是拿用户注册的案例进行讲解
AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象。
所有的异步交互都是使用XMLHttpRequest对象完成的。
也就是说,我们只需要学习一个Javascript的新对象即可。
在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。
服务器返回true或false,返回true表示这个用户名已经被注册过,返回false表示没有注册过。
客户端得到服务器返回的结果后,确定是否在用户名文本框后显示“用户名已被注册”的错误信息!
案例代码
import com.srzx.sms.service.impl.AdminServiceImpl;
import com.srzx.sms.service.inte.AdminServiceInte;
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.io.PrintWriter;
@WebServlet("/register")
public class RegisterServlet extends HttpServlet {
AdminServiceInte asi = new AdminServiceImpl();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String action = req.getParameter("a");
if("ui".equals(action)){
req.getRequestDispatcher("/WEB-INF/sms/register.jsp").forward(req,resp);
}
//ajax 检查账号是否已存在
if("check".equals(action)){
String account = req.getParameter("account");
boolean flag = asi.checkAccount(account);
PrintWriter pw = resp.getWriter();
//resp.setContentType("application/json");
if(flag){
pw.print("{'status':1,'msg':'ok'}");
}else{
pw.print("{'status':2,'msg':'error'}");
}
}
}
}
前台页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String contextPath = request.getContextPath();
%>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="<%=contextPath%>/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="<%=contextPath%>/bootstrap/js/jquery-3.4.1.js"></script>
<script src="<%=contextPath%>/bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
#form{
/*background-color: #cccccc;*/
}
#fm{
margin-top:40px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" id="form">
<h2>注册</h2>
<h4 id="msg" class="">${err_msg}</h4>
<form class="form-horizontal" action="<%=contextPath%>/login?a=login" method="post">
<div class="form-group">
<label for="account" class="col-sm-2 control-label">账号</label>
<div class="col-sm-10">
<input type="text" name="account" class="form-control" id="account" placeholder="账号">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" name="password" class="form-control" id="password" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 同意协议
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">注册</button>
</div>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
<script type="text/javascript">
$("#account").change(function(){
var value = $(this).val();
$.get("?a=check",{'account':value},function(data){
console.log(data);//{'status':2,'msg':'error'}
eval("var d = ("+ data + ")");
if(d.status == 2){//重复
$('#msg').text(d.msg).removeClass("text-success").addClass("text-danger");
}else{
$('#msg').text(d.msg).removeClass("text-danger").addClass("text-success");
}
});
});
</script>
</body>
</html>