前置
同步:浏览器发送一次请求,刷新一次页面
异步:浏览器可以在不刷新整个页面的基础上,仅用JavaScript来实现某一部分的刷新,并且不影响页面其他部件的操作
实现技术
AJAX
代码案例
1、前台注册页面
要点:
1、使用JQuery的Ajax,引入JQuery库
2、写一个用户名输入的<input>,用JQuery在其失去焦点的时候将其name值username,存入一个叫做username的parameter中,用get的方式推送到服务器findUserServlet上,之后获取回调函数的传回的服务器data
3、根据服务器data用JavaScript展示页面数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>register</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#username").blur(function () {
var username = $(this).val();
$.get("findUserServlet",{username:username},function (data) {
var span = $("#s_username");
if (data.userExsit){
span.css("color","red")
span.html(data.msg)
}else {
span.css("color","green")
span.html(data.msg)
}
},"json")
})
})
</script>
</head>
<body>
<form>
<input id="username" type="text" name="username" placeholder="请输入用户名"><br/>
<span id="s_username"></span><br/>
<input type="submit" value="注册"><br/>
</form>
</body>
</html>
2、服务器校验
要点:
1、response设置json数据格式
2、用Map封装校验结果和返回值信息
3、把封装的信息用Json解析器封装成json格式返回给前端
package com.hisense.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;
/**
* @author : sunkepeng E-mail:sunkepengouc@163.com
* @date : 2020/8/19 13:44
*/
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
response.setContentType("application/json;charset=utf-8");
Map<String,Object> map = new HashMap<>();
if ("hisense".equals(username)){
map.put("userExsit",true);
map.put("msg","Already");
}else {
map.put("userExsit",false);
map.put("msg","Can Use");
}
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getWriter(),map);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}