您的位置：首页 > 其它

带你走进ajax(3)

2015-12-06 10:36 218 查看

使用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进入开发者模式

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航