AJAX 检测用户名是否存在

首先要了解AJAX的工作原理

AJAX工作原理：

1：HTML页面(触发)——->javascript脚本（执行）—–>
PHP 文件(反应)——–>javascript脚本（返回）—–>HTML页面(展示)

验证用户名源码：

index.html

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'>@H_404_22@
<html@H_404_22@>@H_404_22@
<head@H_404_22@>@H_404_22@
<Meta@H_404_22@ http-equiv@H_404_22@='Content-Type'@H_404_22@ content@H_404_22@='text/html; charset=utf-8'@H_404_22@>@H_404_22@
<title@H_404_22@>@H_404_22@insert into title</title@H_404_22@>@H_404_22@
<script@H_404_22@ type@H_404_22@="text/javascript"@H_404_22@ src@H_404_22@="ajax.js"@H_404_22@>@H_404_22@@H_404_22@</script@H_404_22@>@H_404_22@
</head@H_404_22@>@H_404_22@
<body@H_404_22@>@H_404_22@
       <form@H_404_22@ method@H_404_22@="get"@H_404_22@ name@H_404_22@="myform"@H_404_22@ enctype@H_404_22@="multipart/form-data"@H_404_22@>@H_404_22@
            用户：<input@H_404_22@ type@H_404_22@="text"@H_404_22@ name@H_404_22@="user"@H_404_22@ id@H_404_22@="user"@H_404_22@ onblur@H_404_22@="showName(this.value)"@H_404_22@>@H_404_22@<br@H_404_22@>@H_404_22@
               <div@H_404_22@ name@H_404_22@="txtint"@H_404_22@ id@H_404_22@="txtint"@H_404_22@ style@H_404_22@="width:200px;height:20px;"@H_404_22@>@H_404_22@</div@H_404_22@>@H_404_22@
            密码：<input@H_404_22@ type@H_404_22@="password"@H_404_22@ name@H_404_22@="pass"@H_404_22@ id@H_404_22@="pass"@H_404_22@ style@H_404_22@="width:149px;"@H_404_22@>@H_404_22@<br@H_404_22@>@H_404_22@
       </form@H_404_22@>@H_404_22@

</body@H_404_22@>@H_404_22@
</html@H_404_22@>@H_404_22@

ajax.JS

var@H_404_22@ xmlHttp;

@H_404_183@function@H_404_22@ GetXmlHttpObject@H_404_22@()@H_404_22@{@H_404_22@
    var@H_404_22@ xmlHttp=null@H_404_22@;
    try@H_404_22@{
        xmlHttp=new@H_404_22@ XMLHttpRequest();
    }catch@H_404_22@(e){
        try@H_404_22@{
            xmlHttp=new@H_404_22@ ActiveXObject("Msxml2.XMLHTTP"@H_404_22@);
        }catch@H_404_22@(e){
            xmlHttp=new@H_404_22@ ActiveXObject("Microsoft.XMLHTTP"@H_404_22@);
        }
    }

    return@H_404_22@ xmlHttp;
}

@H_404_183@function@H_404_22@ showName@H_404_22@(str)@H_404_22@{@H_404_22@
    if@H_404_22@(str.length==0@H_404_22@){
        document.getElementById("txtint"@H_404_22@).innerHTML="用户名不能为空！"@H_404_22@;
        return@H_404_22@;
    }

    xmlHttp=GetXmlHttpObject()
    if@H_404_22@(xmlHttp==null@H_404_22@){
        alert("Browser does not support HTTP Request"@H_404_22@);
        return@H_404_22@;
    }

    var@H_404_22@ url="index.PHP"@H_404_22@
        url=url+"?q="@H_404_22@+str
        url=url+"&uid="@H_404_22@+Math@H_404_22@.random()
        xmlHttp.open("GET"@H_404_22@,url,true@H_404_22@);
        xmlHttp.onreadystatechange=statechanged
        xmlHttp.send(null@H_404_22@)
}

@H_404_183@function@H_404_22@ statechanged@H_404_22@()@H_404_22@{@H_404_22@    
    if@H_404_22@(xmlHttp.readyState==4@H_404_22@||xmlHttp.readyState=="complete"@H_404_22@){
        document.getElementById("txtint"@H_404_22@).innerHTML=xmlHttp.responseText
    }
}

index.PHP

header("content-type:text/html;charset=utf-8"@H_404_22@);  

  $q@H_404_22@=$_GET@H_404_22@["q"@H_404_22@];
  $conn@H_404_22@=MysqL_connect("localhost"@H_404_22@,"root"@H_404_22@,"admin"@H_404_22@)or@H_404_22@ die@H_404_22@(MysqL_error());
  MysqL_select_db("test"@H_404_22@,$conn@H_404_22@)or@H_404_22@ die@H_404_22@(MysqL_error());
  MysqL_query("SELECT * FROM UTF8"@H_404_22@);

  $sql@H_404_22@="SELECT * FROM testuser where Firstname='"@H_404_22@.$q@H_404_22@."'"@H_404_22@;
  $result@H_404_22@=MysqL_query($sql@H_404_22@,$conn@H_404_22@);

  if@H_404_22@(!is_array(MysqL_fetch_row($result@H_404_22@))){
         echo@H_404_22@ "<font color='green'>用户名可以使用</font>"@H_404_22@;

  }else@H_404_22@{
         echo@H_404_22@ "<font color='red'>用户名已经存在</font>"@H_404_22@;
  }

AJAX 检测用户名是否存在

首先要了解AJAX的工作原理

验证用户名源码：

猜你在找的Ajax相关文章