最近在写东西的时候一直用jQuery的ajax,原生的ajax很久没有用了，今天心血来潮用原生的ajax写了一个小案例希望可以对初学者有所帮助
一、jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xhr;
//验证用户名是否存在
function isExists(){
//获取用户名文本框的值
var sendContent = document.getElementById("account").value;
console.log(sendContent);
//获取错误提示信息对象
var msg = document.getElementById("msg");
//创建XMLHttpRequest对象
if(window.XMLHttpRequest){//其他浏览器
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
}
//打开与服务器的链接
xhr.open("post","<%=basePath%>accountIsTrue.handler",true);
//设置请求头部
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送信息
xhr.send("sendContent="+sendContent);
//接受响应信息
xhr.onreadystatechange=function(){
var responseContent;
if(xhr.readyState==4 && xhr.status==200){
responseContent = xhr.responseText;//接受响应信息
if(responseContent=='false'){
msg.innerHTML='输入的用户名错误';
document.getElementById("account").select();
}else if(responseContent=='true'){
msg.innerHTML='';
}
}
}
}
//判断用户密码是否正确
function passwordIsTrue(){
//获取用户名和密码
var sendContent = document.getElementById("account").value;
var password = document.getElementById("password").value;
//获取错误信息提示
var msg = document.getElementById("msg");
//创建XMLHttpRequest对象
if(window.XMLHttpRequest){//其他浏览器
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
}
//打开与服务器的链接
xhr.open("post","<%=basePath%>passwordIsTrue.handler",true);
//设置请求头部
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送信息
var param = "sendContent="+sendContent+"&password="+password;
xhr.send(param);
//接受响应信息
xhr.onreadystatechange=function(){
var responseContent;
if(xhr.readyState==4 && xhr.status==200){
responseContent = xhr.responseText;//接受响应信息
if(responseContent=='false'){
msg.innerHTML='输入的用户密码错误';
document.getElementById("password").select();
}else if(responseContent=='true'){
msg.innerHTML='';
}
}
}
}
</script>
<style type="text/css">
#d01{
position:absolute;
left:35%;
top:20%;
border:1px solid grey;
text-align:center;
padding:25px;
width: 600px;
height: 250px;
}
.input{
width:300px;
height:25px;
border:1px solid blue;
}
.btn{
width:100px;
height:35;
background-color:blue;
color:white;
}
</style>
</head>
<body bgcolor="035551">
<div id="d01">
<form action="#" method="post" name="submitValidateForm">
<div align="center" style="font-size: 30px;color: white;">原生ajax异步判断用户名和密码是否输入正确</div><br/>
<div>
<p><font color="red"><span id="msg"></span></font></p>
<p><label><span style="color: white;">用户名：</span></label><input type="text" class="input" name="account" id="account" onblur="isExists()"></p>
<p><label><span style="color: white;">用户密码：</span></label><input type="password" class="input" name="password" id="password" onblur="passwordIsTrue()"></p>
<p>
<input type="button" name="submit" class="btn" value="提交" onclick="bsubmit()">
<input type="reset" name="reset" class="btn" value="重置">
</p>
</div>
</form>
</div>
</body>
</html>
二、Controller层
@Controller
@ResponseBody
public class AjaxLoginController {
@Autowired
private AjaxLoginService ajaxLoginService;
public AjaxLoginService getAjaxLoginService() {
return ajaxLoginService;
}
public void setAjaxLoginService(AjaxLoginService ajaxLoginService) {
this.ajaxLoginService = ajaxLoginService;
}
/**
* 查找用户(看用户是否存在)
* @param sendContent
* @param response
* @return
* @throws IOException
*/
@Autowired
HttpServletResponse response;
@RequestMapping("accountIsTrue.handler")
public String findAccount(@RequestParam("sendContent") String sendContent) throws IOException {
System.out.println(sendContent);
boolean flag = ajaxLoginService.findAccount(sendContent);
System.out.println(flag);
PrintWriter out = response.getWriter();
if(flag==true) {
out.print(true);
}else {
out.print(false);
}
return null;
}
@RequestMapping("passwordIsTrue.handler")
public String passwordIdTrue(Model model,String sendContent,String password) throws IOException {
System.out.println(sendContent+password);
String resultPassword = ajaxLoginService.findPassword(sendContent);
PrintWriter out = response.getWriter();
if(resultPassword.equals(password)) {
out.print(true);;
}else {
out.print(false);;
}
return null;
}
}
为了解决前台页面传到后台的中文出现乱码，在web.xml中配置过滤器如下
注：过滤器放在监听器的前边
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
效果展示：只有用户名输入正确之后才能输入密码
两者都输入正确
