Ajax（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
传统的网页（不使用Ajax），如果需要更新内容必须重新加载整个网页，较麻烦，用户体验差。
Ajax主要用于创建快速动态网页；应用实例：新浪微博、Google 地图、开心网等等。
JSON（JavaScript Object Notation）一种简单的数据格式，基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JQuery是一个快速、简洁的JavaScript代码库（框架）。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jsp:
<script type="text/javascript" src="static/js/jquery-3.4.1.js"></script><!--导入jQuery库-->
<script type="text/javascript">
$(function() {
console.log(document.getElementById("username").value);//获取username结点
console.log($("#username").val());//在浏览器控制台显示username传入的内容
});
function checkUsername() {
var username = $("#username").val();
console.log(username.length);//在浏览器显示username的长度
if (username.length == 0) {//判断请求的username参数的长度是否为0，如果是则执行以下表达式
//返回页面
//alert("用户名不允许为空");以弹框方式显示
$("#msg").text("用户名不允许为空");//以文本的方式显示
return;
}
if (username.length < 6 || username.length > 12) {//判断请求的参数是否满足6~12个字符，如果不满足，则执行以下表达式
//返回页面
//alert("用户名长度必须大于6且小于12");以弹框方式显示
$("#msg").text("用户名长度必须大于6且小于12");//以文本的方式显示
return;
}
//ajax返回json时的处理方式
//json:一个“{}”代表一个对象,对象的值是键值对的形式（key：value）
$.ajax({
url: "/blog/checkUsername",
data: {
username: username
},
dataType: "json",
type: "GET",
//async: false, (async表示异步执行，设置为false则变为同步)
success: function( data ) {
if (data.success){
console.log(data.msg);
$("#msg").text(data.msg);
} else {
//alert(data.msg);
$("#msg").text(data.msg);
}
},
error:function(data){
console.log(data);
}
});
}
</script>
<body>
<form action="/blog/SignupServlet" method=post>
<!-- οnblur="xxx" 触发函数-->
登录名称：<input name="username" onblur="checkUsername()" id="username"
type="text" />
<!--定义返回文本的样式-->
<label id="msg" style="color: red;"></label><br />
</form>
</body>
servlet：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=utf-8");//解决返回文本乱码的问题
String username = request.getParameter("username");//获取请求的参数
String sql = "select * from t_user where username = ?";//定义sql查询语句
//连接数据库
Connection connection = null;
PreparedStatement preparedStatement = null;
ResultSet resultSet = null;
try {
connection = (Connection) DBUtil.getConnection();
preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1, username);//参数传递
resultSet = preparedStatement.executeQuery();//执行sql
resultSet.last();//将存储的结果移动到最后一行
//判断数据库中是否存在同名参数
int rowCount = resultSet.getRow();
if (rowCount <= 0) {
Map<String, Object> resultMap = new HashMap<String, Object>();
resultMap.put("success", true);
resultMap.put("msg", "用户名可用");
System.out.println(JSON.toJSONString(resultMap));
response.getWriter().append(JSON.toJSONString(resultMap));
return;
}
Map<String, Object> resultMap = new HashMap<String, Object>();
resultMap.put("success", false);
resultMap.put("msg", "用户名已被占用");
System.out.println(JSON.toJSONString(resultMap));//调用JSON的toJSONString方法，以json的格式返回结果;类似于调用resultMap.toString方法,使用fastjson包
response.getWriter().append(JSON.toJSONString(resultMap));
return;
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
Map<String, Object> resultMap = new HashMap<String, Object>();
resultMap.put("success", false);
resultMap.put("msg", "系统异常！" + e.getMessage());
System.out.println(JSON.toJSONString(resultMap));
response.getWriter().append(JSON.toJSONString(resultMap));
return;
} finally {
DBUtil.close(connection, preparedStatement, resultSet);
}
}
同步和异步的区别：
- 同步：发送一个请求，等待返回后，再执行下一个请求。
同步需要等待，发送请求到返回给用户所用时间长，但同步执行保证了程序按顺序进行可以避免出现死锁和脏读等问题的发生。- 异步：发送一个请求,不等待返回，随时可以再发送下一个请求 。
异步无需长时间等待，可以提高程序的执行效率，但是不利于对程序的控制，且会占用较多的资源。
举例：下班回家准备做饭，先把米洗好放进电饭锅煮，同步场景下，你什么都不能做，只能等饭煮熟，然后去洗菜炒菜，一步步进行；异步场景下，你可以在煮饭的这个时间段里，去洗菜炒菜，等菜炒好饭可能也熟了。
