原生态javascript实现ajax验证用户名_javascript简单实现注册用户名校验ajax-CSDN博客

本文介绍了一种使用Ajax技术实现实时检测用户名是否已存在的方法。文章详细解释了如何创建Ajax对象，并根据不同浏览器类型进行适配，同时展示了如何利用Ajax发送POST请求到服务器，接收响应并根据返回值更新前端提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function check() {
//把用户输入的用户名，通过ajax发送到后台服务页面进行检测，
//然后根据服务页面发挥的数据来判断该用户名是否可用

//创建ajax对象
//ajax是根据内置的activeXObject对象来创建与后台的通讯对象的
var ajax;
//先判断是不是ie浏览器
if (window.ActiveXObject) {
try {
//ie6.0及以上版本的创建方式
ajax = new ActiveXObject("msxml2.xmlhttp");
} catch (e) {
//ie5.0及以下版本
ajax = new ActiveXObject("microsoft.xmlhttp");
}
}
//其他浏览器
else if (window.XMLHttpRequest) {
//浏览器项实现ajax效果，必须要支持ajax的核心对象XMLHttpRequest
ajax = new XMLHttpRequest();
}

//判断ajax对象是否创建成功
if (ajax == null) {
alert("创建失败");
return; //直接退出当前函数
}

//ajax状态改变事件
ajax.onreadystatechange = function () {
//ajax对象发送和接受数据都有一个侦听
//ajax对象有5个状态
//0:表示ajax对象未创建
//1:表示初始化请求信息
//2：表示发送请求
//3：表示客户端接受服务器端的数据
//4：表示接卸发回的数据

var arr = [
"ajax对象未创建<br/>",
"初始化请求...<br/>",
"发送请求...完成<br/>",
"接受数据..完成<br/>",
"解析数据...完成<br/>"
];

//下面ajax的对象的状态打印在页面上
var vspan = document.createElement("span");
vspan.innerHTML = arr[ajax.readystate];
document.body.appendChild(vspan);
if (ajax.readystate == 4) {
if (ajax.status == 200) {
//到这一步，说明ajax请求，服务器处理，解析接受数据全部都执行完成
var value = ajax.responseText; //获取服务器发回的数据
var span = document.getElementById("msg")
if (value == 0) {
//用户名可用
span.innerHTML = "此用户名可用";
span.style.color = "green";
}
else if (value == 1) {
//用户名不可用
span.innerHTML = "此用户名已被注册";
span.style.color = "red";
}
else {
alert("非法数据");
}
}
else if (ajax.status == 404) {
alert("请求的页面不存在");
}
else {
alert("请求出错");
}
}
};

//创建成功
//获取用户名
var username = document.getElementById("username").value;//escape函数使字符串逃离解析
//var url = encodeURI("UserService.aspx?username=" + username);对字符串进行uri编码
//open函数的三个参数
//1.请求发送方式：get，post
//get方式发送的数据，如果以前发送过，那就到缓存中把以前接受到的数据直接拿过来用
//2.请求的url地址（如果是get方式要把数据拼接在地址上）
//3.同步还是异步true标识异步请求 false表示同步请求(在请求到接受到数据的过程中，页面是卡死的，不能干其他的操作)
// ajax.open("get", url, true);
// ajax.open("get", "UserService.aspx?username=" + escape(username), true);
//发送数据
// ajax.send();

//post方式发送请求，不管数据以前是否发送过，每次都会重新向服务端发送请求
ajax.open("post", "UserService.aspx", true);
//设置请求头信息
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//发送数据
ajax.send("username="+escape(username));
}
</script>
</head>
<body>
<form id="form1" runat="server" ">
<div>
用户名:<input type="text" name="username" id="username" onblur="check();" />
<input type="button" name="set" />
<span id="msg"></span>
<asp:Button ID="button1" runat="server" />
<asp:Button ID="Button21" runat="server" Text="注册" />
</div>
</form>
</body>
</html>