传统Web与Ajax的区别：
servlet层
@javax.servlet.annotation.WebServlet(name = "AjaxServlet",urlPatterns = {"/AjaxServlet"})
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name=request.getParameter("uname");
if (name.equals("admin")){
response.getWriter().write("true");
}else{
response.getWriter().write("false");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
ajax.jsp页面
</head>
<body>
<form id="form1">
<input name="uname"/><span id="msg"></span>
<input name="upwd" value="000000"/>
<div id="box">
</div>
</form>
</body>
最原始的提交方式：
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$("[name=uname]").blur(function () {
//原始方法的调用
oldajax();
});
/*
* 最原始的方法
*/
function oldajax() {
//1.发送ajax请求
var xhr=null;
if(window.XMLHttpRequest){ //非IE浏览器（版本比较高的IE）
xhr=new XMLHttpRequest();
}else{
//code execute here,说明是IE
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//01.能准备发送请求的 方式 目标地址 是否异步 true 异步
xhr.open("post","/AjaxServlet",true);
xhr.onreadystatechange=function () {
if(xhr.readyState==4 && xhr.status==200){ //认为请求已经成功发送，并且客户端浏览器已经成功获取到服务器响应的数据
//一个系统对象的属性，获取到响应回来的文本
var data=xhr.responseText;
// alert(data);
$("#msg").html(data);
}
};
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("uname="+$("[name=uname]").val());
}
}
</script>
效果如下：
输入的值与判断的值相同时：
输入的值与判断的值不同：
