AJAX实现无刷新验证用户名

最新推荐文章于 2022-06-21 22:18:28 发布

Apson.zhang

最新推荐文章于 2022-06-21 22:18:28 发布

阅读量2k

点赞数

分类专栏：【HTML/CSS/JS/JQ/AJAX技术文档】

本文链接：https://blog.csdn.net/churk2012/article/details/9274103

版权

【HTML/CSS/JS/JQ/AJAX技术文档】专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>用户注册</title>
<script type="text/javascript">
//创建ajax引擎
function getXmlHttpObject(){
	//不同的浏览器获取xmlhttprequest 的方法不一样
	if(window.ActiveXObject){
		//window.alert('ie');
		xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
		}
	else{
		//window.alert('ff');
		xmlHttpRequest=new XMLHttpRequest();
		}
	return xmlHttpRequest;
}
var myXmlHttpRequest="";
function checkName(){
	myXmlHttpRequest=getXmlHttpObject();//1号线
	if(myXmlHttpRequest){
		//window.alert("创建Ajax引擎成功！");
		//通过myXmlHttpRequest对象发送请求到服务器的某一个页面
		//第一个参数表示请求的方式，get/post
		//第二个参数指定url，对那个页面发出ajax请求(本质仍然是http请求)，只要是web开发的底层是http请求，http的底层是tcp/ip协议
		//第三个参数 true 表使用异步机制，false表示不使用异步机制。
		//打开请求 
		//var url="/ajax/registerPro.php?username="+$("username").value;
		//var url="/ajax/registerPro.php?mytime="+new date()+"&username="+$("username").value;
		var url="/ajax/registerPro.php";
		//这个是要发送数据
		var data="username="+$("username").value;
		//window.alert(url);
		myXmlHttpRequest.open("post",url,true);
		//这句话不可少
		//http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//指定回调函数 . chuli是函数名
		myXmlHttpRequest.onreadystatechange=chuli;
		//真的发送请求，如果是get请求发送null即可；如果是post请求，则填入实际的请求即可
		//myXmlHttpRequest.send(null); //2号线
		myXmlHttpRequest.send(data); //2号线
		}
}
//回调函数
function chuli(){

	//window.alert("回调函数成功!!"+xmlHttpRequest.readyState);
	//还是取值了
	if(xmlHttpRequest.readyState==4){
			//window.alert("服务器返回"+xmlHttpRequest.responseText);
			$("myres").value=xmlHttpRequest.responseText;
		}
}
//这里写一个函数
function $(id){
 	return document.getElementById(id);
 }
</script>
</head>
<body>
	<form action="" method="post">
			用户名字：<input type="text" οnkeyup="checkName()" name="username1" id="username" /> 
			<input οnclick="checkName();" type="button" value="验证用户名" /><input style="border-width:0px;color:red;" type="text" id="myres"/> <br /> 
			用户密码：<input type="password" name="password" /> <br /> 
			电子邮件：<input type="text" name="email" /> <br /> <input type="button" value="注册账号">
	</form>
</body>
</html>

registerPro.php

$username = $_POST['username'];
// echo "用户名是：" . $username; // 3号线
if ($username == "zhosoft") {
	echo "此用户名不可用！";  // 注意，这里的数据是返回给请求的页面。
} else {
	echo "恭喜您，此用户名可用！";
}

Apson.zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX实现无刷新验证用户名

register.php用户注册//创建ajax引擎function getXmlHttpObject(){ //不同的浏览器获取xmlhttprequest 的方法不一样 if(window.ActiveXObject){ //window.alert('ie'); xmlHttpRequest=new ActiveXObject("Microso
复制链接

扫一扫