Ajax技术
通过阿贾克斯（Ajax）异步刷新，实现检测用户帐号是否已经注册
我们常常在网页注册的时候会遇到类似于下图的提示：你的手机号码已经被注册过。但是你会发现整个页面并没有刷新，这其实就是利用了Ajax实现的。
jsp：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax练习</title>
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax练习</title>
<script type="text/javascript">
window.onload=function()
{
var text=document.getElementById('text');
var p=document.getElementById('p');
text.onchange=function()
{
var a=text.value;
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","com.servlet/Ajax",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name="+a);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4&&xmlhttp.status==200){
var str=xmlhttp.responseText;
if(str=="true")
{
p.innerHTML='帐号已存在';
}
}
};
};
};
</script>
</head>
<body>
<input id="text" type="text"><p id="p" style="color:red"></p>
<br>
<button id="but" >提交</button>
</body>
</html>
servlet:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// TODO 自动生成方法存根
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
System.out.println(request.getParameter("name"));
if( request.getParameter("name").equals("123456"))
{
out.print("true");
}
else
{
out.print("false");
}
}
// TODO 自动生成方法存根
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
System.out.println(request.getParameter("name"));
if( request.getParameter("name").equals("123456"))
{
out.print("true");
}
else
{
out.print("false");
}
}