首先引入一个概念什么是Ajax?
我们可以根据他的命名Ajax(Aynchronous JavaScript And XML),翻译过来就是异步的JavaScript与XML。
什么是异步的？
客户端不需要等待服务端的响应。在服务器处理请求的过程中，客户端可以进行其他操作。
实例：例如百度的搜索自动补全，还有注册的时候提醒你用户名已经被注册过。这些不重新加载整个页面的情况下，对网页的某部分进行更新
Jauery实现Ajax有三种方式：$.ajax(), $.get(), $.post()
-
$.ajax()
* 语法：$.ajax({键值对})； * 使用$.ajax()发送异步请求 ```javascript $.ajax({ url:"ajaxServlet1111" , // 请求路径 type:"POST" , //请求方式 //data: "username=jack&age=23",//请求参数 data:{"username":"jack","age":23}, success:function (data) { alert(data); },//响应成功后的回调函数 error:function () { alert("出错啦...") },//表示如果请求响应出现错误，会执行的回调函数 dataType:"text"//设置接受到的响应数据的格式 }); ``` -
$.get()：发送get请求
* 语法：$.get(url,[data],[callback],[type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数（响应成功后要执行的） * type：响应结果的类型 -
$.post()：发送post请求
* 语法：$.get(url,[data],[callback],[type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数（响应成功后要执行的） * type：响应结果的类型
一个简单案例加深一下理解：只给出前端的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//在页面加载完成后
$(function () {
//给username绑定blur事件
$("#username").blur(function () {
//获取username文本输入框的值
var username = $(this).val();
//发送ajax请求
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名已存在"}
// {"userExsit":false,"msg":"用户名可用"}
$.get("findUserServlet",{username:username},function (data) {
//判断userExsit键的值是否是true
// alert(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);
}
});
});
});
</script>
</head>
<body>
<form>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<span id="s_username"></span>
<br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" value="注册"><br>
</form>
</body>
</html>