AJAX_02_利用AJAX验证注册用户名是否可用
利用AJAX验证注册用户名是否可用
*AJAX代码
<%--
Created by IntelliJ IDEA.
User: SHIGE
Date: 2021/4/29
Time: 16:43
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>使用AJAX发送get请求验证用户名是否可用</title>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"></head>
</head>
<body>
//发送AJAX请求验证用户名是否可用
<script type="text/javascript">
function checkUserName(username) {
//发送AJAX请求的代码主要包括四步: 1.创建AJAX核心对象XmlHttpRequest 2.注册回调函数 3.开启浏览器和服务器之间的通道 4.发送AJAX请求
//发送AJAX全靠浏览器内置对象XmlHttpRequest,使用XmlHttpRequest对象可以在浏览器中单独启动一个浏览器线程,通过浏览器线程发送该请求从而达到异步效果
//1.创建AJAX核心对象XmlHttpRequest
var xmlHttpRequest;
if(window.XMLHttpRequest){
//浏览器支持 XMLHttpRequest对象
xmlHttpRequest=new XMLHttpRequest();
}else{
//不支持XMLHttpRequest对象
//IE5和IE6不支持XMLHttpRequest对象,只支持ActiveXObject对象,也就是说IE5和IE6使用的是ActiveXObject对象发送AJAX请求。
xmlHttpRequest= new ActiveXObject("Microsoft.XMLHTTP");
}
//2.注册回调函数
//程序执行到这里后,回调函数并不会执行,而是将回调函数注册给xmlHttpRequest对象,等xmlHttpRequest对象的readystate发生改变的时候,后边的回调函数才会执行。
//xmlHttpRequest对象的readystate属性,在请求和响应的过程中,该对象的状态值会从0~4进行进行变化
// 0: 请求未初始化
// 1:服务器连接已建立
// 2:请求已接收
// 3:请求已处理
// 4:请求已完成,且响应已就绪
xmlHttpRequest.onreadystatechange=function () {
//每当readystate的值发生改变的时候,回调函数就会调一次
//当xmlHttpRequest对象的readyState属性的值为4的时候,证明请求已完成,且响应已就绪
if(xmlHttpRequest.readyState==4){
//xmlHttpRequest.status可以获取到响应状态码,判断响应状态码值,从而做出处理
if(xmlHttpRequest.status==200){
//接收响应回来的数据
var s=xmlHttpRequest.responseText; //获取响应数据
var nameTipMessage=document.getElementById("nameTipMessage");
nameTipMessage.innerHTML=s; // 将响应数据和span标签进行绑定
}else{
//xmlHttpRequest.status获取到响应状态码
alert(xmlHttpRequest.status);
}
}
}
//3.开启浏览器和服务器之间的通道
//xmlHttpRequest.open(method,url,async);开启通道
// method:指定请求方式为get还是post
// url:请求路径
//async:true/fasle(true表示支持异步,false表示支持同步)
xmlHttpRequest.open("Get", "/myWeb/checkusername.do?username="+username,true);
//4.发送AJAX请求
xmlHttpRequest.send();
}
</script>
用户名:<input type="text" placeholder="电子邮箱" name="username" onblur="checkUserName(this.value);"><span id="nameTipMessage" font-size:12px></span>
<br>
密码:<input type="password" placeholder="密码" name="password"><br>
<button type="submit">登录</button><br>
</body>
</html>