使用ajax实现用户名有效性验证

需求：当用户输入完用户名时，用户可以通过页面上的按键来确认当前的用户名是否有效。如下图所示

思路：用户触发按键后可以向服务器发起http请求，将用户名提交给服务器来进行用户名确认，服务器返回检查结果。

很多浏览器中都支持XMLHttpRequest对象的创建，我们可以通过创建该对象，并进行一些设置来向服务器发起HTTP请求。

<html>
<head>
<title>用户注册</title>
<Meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">

function getXmlHttpObject(){
var xmlHttp = null;

if (window.XMLHttpRequest)
// code for IE7+,Firefox,Chrome,Opera,Safari
//获取一个XMLHttpRequestd对象
xmlHttp=new XMLHttpRequest();
else// code for IE6,IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}function checkUser(){
var myXmlHttpRequest = getXmlHttpObject();
//采用GET方式请求的URL，将数据提交给registerPorcess.PHP
//var urlGet="http://localhost/registerPorcess.PHP?username="+$("username").value;

//采用POST方式请求的URL
var urlPost="http://localhost/registerPorcess.PHP";
var data = "username=" + $("username").value;
if(myXmlHttpRequest){
//发起一个建立socket链接，发起http请求，true说明采用异步方式
//myXmlHttpRequest.open("GET",urlGet,true);
myXmlHttpRequest.open("POST",urlPost,true);

//采用POST方式需要设置请求头,GET方式则不需要
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//注册回调函数
myXmlHttpRequest.onreadystatechange = function(){callBack(myXmlHttpRequest)};
//如果是GET请求则填入NULL,否则，填入相应的数据
myXmlHttpRequest.send(data);
}
else {
window.alert("创建失败");
function callBack(xmlHttp){

//状态4表示浏览器已经拿到服务器返回的数据
if (xmlHttp.readyState==4 && xmlHttp.status == 200)

//获取服务器的返回值
$('myres').value = xmlHttp.responseText;
}

//该函必须使用$不好，不然会出现问题
function $(id){
return document.getElementById(id);
</script>
</head>
<body>
<form action="???" method="post">
用户名字:<input type="text" name="username1" onkeyup="checkUser();" id="username" /><input type="button" onclick="checkUser();" value="验证用户名" />
<input style="border-width: 0;color: red" type="text" id="myres">
<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
</body>
</html>

处理页面registerPorcess.PHP

<?PHP
header("Content-Type: text/html;charset=utf-8");
header("Cache-Control: no-cache");
$username = $_POST['username'];
if($username == 'abcd'){
echo '用户名不可用';
}
else {
echo '用户名有效';
}
?>

注：谷歌浏览器调试问题

F12进入开发者模式

原文链接：https://www.f2er.com/ajax/162637.html

带你走进ajax(3)

使用ajax实现用户名有效性验证

猜你在找的Ajax相关文章