带你走进ajax(3)

最新推荐文章于 2024-09-23 14:48:30 发布

xdy387

最新推荐文章于 2024-09-23 14:48:30 发布

阅读量330

点赞数

分类专栏： ajax入门文章标签： ajax web应用

本文链接：https://blog.csdn.net/x15332366746/article/details/50193409

版权

ajax入门专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用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" οnkeyup="checkUser();" id="username" /><input type="button" οnclick="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进入开发者模式