其中js代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<form method="post" action="user.do">
用户名:<input type="text" onkeyup="check()" id="username" name="username"><span id="span"></span><br>
密码:<input type="password">
</form>
<script>
function check(){
var request = new XMLHttpRequest();//第一条线打通(创建ajax对象)
var username = document.getElementById("username").value;//创建一个名叫username的变量使其值等于用户输入的用户名
//第二条线打通(打开此ajax引擎,并向服务器发送http请求)
request.open("get", "user.do?username="+username, true);//指明向哪里发出http请求以及请求的方式。此处true定义了此请求为异步。如果不加true,默认的也是true
request.send(null);
//第三条线打通(服务器返回的http响应)
request.onreadystatechange = function (){
if(request.readyState == 4 && request.status == 200){//条件成立则说明得到服务器相应成功.其中request.readyState == 4表示请求发送成功,request.status == 200 表示请求得到了回应.4 和 200这两个数字都是响应码
var text = request.responseText;
if(text == "true"){
document.getElementById("span").innerHTML= "yes";
document.getElementById("span").style.color="green";
}else{
document.getElementById("span").innerHTML= "no";
document.getElementById("span").style.color="red";
}
}
}
}
</script>
serlvet代码如下:
package ajax12demo;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UserServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String userName = request.getParameter("username");
if(userName.equals("ZwZ")){
response.getWriter().print(false);
}else{
response.getWriter().print(true);
}
System.out.println(userName);
}
}
以上代码可以实现对用户名验证的效果。
当请求为同步,即request.open( )中async参数值为false时,其中js代码的顺序应如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<form method="post" action="user.do">
用户名:<input type="text" onkeyup="check()" id="username" name="username"><span id="span"></span><br>
密码:<input type="password">
</form>
<script>
function check(){
var request = new XMLHttpRequest();//第一条线打通(创建ajax对象)
var username = document.getElementById("username").value;
//第三条线打通(服务器返回的http响应)
request.onreadystatechange = function (){
if(request.readyState == 4 && request.status == 200){//条件成立则说明得到服务器相应成功
var text = request.responseText;
if(text == "true"){
document.getElementById("span").innerHTML= "yes";
document.getElementById("span").style.color="green";
}else{
document.getElementById("span").innerHTML= "no";
document.getElementById("span").style.color="red";
}
}
}
//第二条线打通(向服务器发送http请求)
request.open("get", "user.do?username="+username, false);
request.send(null);
}
</script>
原因:与ajax同步与异步机制和js的解释运行原理有关。