Ajax,(Asynchronous Javascript And XmL),可以实现在不刷新整个网页的情况下对页面进行局部操作。
比如在注册信息的时候,当用户填写完用户名后,可以立即对该用户名进行校验,而不必等待页面提交之后才进行。
好了,下面写具体的代码。
首先编写一个简单的注册页面。
<body>
<input type = "text" id = "userNameId" placeholder = "请输入用户名" onblur = "checkName()"/><span id = "showNameId"></span>
</body>
然后写checkName()方法。
<head>
<script type = "text/javascript">
function checkName(){
/*1.实例化xml对象
*XMLHttpRequest对象可以帮助实现在不刷新整个页面的情况下交换数据,我对这个对象是如何实现的很感兴趣,以后会研究现在用它就好了。
*/
var xmlhttp = new XMLHttpRequest();
//2.设置监听器
xmlhttp.onreadystatechange = function(){
//这里接受从页面返回的信息,并进行处理。
/*5种状态
* 0:没有建立连接
* 1:请求已经建立但还没有发出
* 2:请求已经发出,正在处理
* 3:请求已经出来,服务器还没响应
* 4:响应已完成,可以访问服务器兵使用它
*/
if(xmlhttp.readyState == 4)
var data = xmlhttp.responseText;
//接下来就是处理了
if(data == fail)
document.getElementById("showNameId").InnerHTML = "<font>用户名重复</font>"
}
/*3.打开通道建立连接
*value为任意类型数据,这里为用户名。
*第三个参数为boolean类型,如果为true,则异步执行表示脚本会在send方法之后继续执行,不必等待浏览器的响应。
*如果为false,则表示失败对其他代码无影响不过这种情况很少见。一般用true
*/
xmlhttp.open("OneServlet","value",true);
//4.设置请求头部信息
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencode");
//5.发送数据
var userNameValue = document.getElementById("userNameId").value;
xmlhttp.send("userName="+userNameValue);
}
</script>
</head>
然后建立Servlet进行处理。使用request.getParamater("userName")来接值,然后去数据库中比对。
使用PrintWriter writer = response.getWriter();
writer.print("success or fail");来传回值。在监听器中处理成功或者失败的状况