[jQuery]ajax在php程序无刷新判断用户名

[jQuery]ajax在php程序无刷新判断用户名  
register.php

<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()+"&usernameusername="+$("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" onkeyup="checkName()" name="username1" id="username" />  
            <input onclick="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 "恭喜您，此用户名可用！"; 
} 
 
  
作者：churk2012