|
首先来看主程序代码（reg.html）：
| 代码如下 |
复制代码 |
|
<div id="reg">
请输入用户名：<input id="usrname" value="请输入用户名" onfocus="regInit();regKey()" onblur="regInit()" onkeyup="regKey()"/>
</div>
|
<div id="regtip" style="display:none">用户名重复或非法</div>
<!--以下为JS代码部分，功能是Ajax响应验证用户名合法性-->
| 代码如下 |
复制代码 |
|
<script language="javascript">
function getem(aID)
{
return (document.getElementById) ? document.getElementById(aID): document.all[aID];
}
function changeDsp()
{
getem(regtip).style.display="";//也可以使用inner方式重新赋值
}
<!--Ajax校验用户名-->
var v=getem('usrname');
var s_value=getem('usrname').value;//保存初值
function regInit()
{
v.style.color="#000000";
if(v.value==s_value)//无效用户名
v.value='';
else if(v.value==''){//恢复默认提示信息
v.value=s_value;
v.style.color="";
}
}
function regKey()
{
str=v.value;
if(!str){
return 0;
}
var xhttp=getXmlhttp();
xhttp.onreadystatechange=function(){
if(xhttp.readyState == 4 && (xhttp.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById("regtip").innerHTML=xhttp.responseText;
changeDsp();
}
}
var url = "chkusr.php?usr="+ encodeURI(str);//需要进行Ajax的URL地址
xhttp.open("GET",url,true);
xhttp.setRequestHeader("If-Modified-Since","0");//不缓存
xhttp.send(null);
}
</script>
|
程序说明：
1、onblur事件是输入框失去焦点事件，onkeyup是键盘按下又松开时候触发。
2、reg是注册信息部分，这里大家可以加上自己的代码，比如用户名、密码、邮箱等都可以使用Ajax进行适时校验。
3、regtip是提示信息部分，一般为空，如果Ajax校验失败，则在这里进行错误提示。
4、chkusr.php是用户名的校验程序，后面的usr就是传递的URL参数，如果使用ASP等其它语言，修改方式类似，最终只需要返回查询的结果提示信息即可，比如“输入用户名重复，请更换个更酷的”、“电子邮箱已被注册，请修改后再次提交注册”等等。
5、示例chkusr.php程序如下，实际使用肯定需要跟数据库相连，特别要小心用户输入信息的过滤和安全：
| 代码如下 |
复制代码 |
|
<?php
//注意这里好像是用不带PHP三个字母返回值是包括PHP限定符（在IE6上），带PHP就没问题，稍后再研究一下具体区别
$usr=$_trim['usr'];
if($usr=='admin')
{
echo "Sorry, this name is fobiddened to use.";
}
else
{
echo "Hi, this name is free for register."
}
?>
|
上面写的是js ajax了，其实但现在js ajax用得很少，用得多的是jquery+ajax/" target="_blank">jquery ajax了，下面我也来介绍。
实例：
1、请求页面AJax.aspx
HTML代码
| 代码如下 |
复制代码 |
|
Code
<div>
<input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" />
<div id="showResult" style="float:left">div>
div>
|
JS代码
| 代码如下 |
复制代码 |
|
Code
<script type="text/javascript" src="CSS/jquery-1.3.2.js"></script>
<script type="text/javascript">
function JudgeUserName()
{
$.ajax({
type:"GET",
url:"AjaxUserInfoModify.aspx",
dataType:"html",
data:"userName="+$("#txtName").val(),
beforeSend:function(XMLHttpRequest)
{
$("#showResult").text("正在查询");
//Pause(this,100000);
},
success:function(msg)
{
$("#showResult").html(msg);
$("#showResult").css("color","red");
},
complete:function(XMLHttpRequest,textStatus)
{
//隐藏正在查询图片
},
error:function()
{
//错误处理
}
});
}
</script>
|
2 、页面AjaxUserInfoModify.aspx
后台代码
| 代码如下 |
复制代码 |
|
Code
protected void Page_Load(object sender, EventArgs e)
{
string userName = Request.QueryString["userName"].ToString ();
if (userName == "James Hao")
{
Response.Write ("用户名已经存在！");
}
else
{
Response.Write ("您可以使用此用户名！");
}
}
|
|
