【JavaScript】ajax实现用户名验证

1.创建一个XMLHttpRequest对象
2.创建url,data,通过 xmlHttpRequest.send()
3.服务器端接收 ajax的请求,做相应处理(操作数据库)，然后返回结果(echo 语句)
4.客户端通过xmlHttpRequest的属性 reponseText , responseXML 取的数据，然后就完成局部刷新当前页面任务

1. [代码]用户名需要验证的表单    

<form action="" method="post">
用户名:<input  type="text" name="username1" id="username"/><input  type="button" onclick="checkName();" value="验证用户名"/><span id="myres" style="color:#FF0000"></span><br />
</form>

2. [代码]r.php    

<?php
      header("Content-Type: text/xml;charset=utf-8");
	//不要缓存数据
	header("Cache-Control: no-cache");

	//接受数据
        // $username=$_POST['username'];
	$username=$_GET['username'];
	if($username=="zqwang121"){
	echo "用户名不可用";
	}else{
	echo "用户名可用";
	}
?>

3. [代码]创建ajax引擎    

	function xmlHttpObject(){
		var xmlHttpRequest;
		if(window.ActiveXObject){
			  xmlHttpRequest= new ActiveXObject("Microsoft.XMLHTTP");
				
		}else{
			xmlHttpRequest= new XMLHttpRequest();		
		}
		return xmlHttpRequest;
	}

4. [代码]使用get方式提交数据    

function checkName(){
	var myXmlHttpRequest=xmlHttpObject();
	if(myXmlHttpRequest){
                //通过myXmlHttpRequest对象发送到服务器的某个页面
		var url="http://localhost/r.php?nowtime="+new  Date()+"&username="+document.getElementById("username").value;
                //第一个参数表示请求的方式, "get" / "post"
                //第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
                //第三个参数表示 true表示使用异步机制,如果false表示不使用异步
		myXmlHttpRequest.open("get",url,true);
		myXmlHttpRequest.onreadystatechange=chuli;		
	myXmlHttpRequest.send(null);	
		}

5. [代码]使用post提交数据    

function checkName(){
var myXmlHttpRequest=xmlHttpObject();
if(myXmlHttpRequest){
		var url="http://localhost/r.php";
		var date="username="+ document.getElementById("username").value;
	
		myXmlHttpRequest.open("post",url,true);
		
		myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		
		myXmlHttpRequest.onreadystatechange=chuli;
		
		myXmlHttpRequest.send(date);
	
}

6. [代码]回调函数    

function chuli(){	
	if(myXmlHttpRequest.readyState==4){
		document.getElementById("myres").innerHTML=myXmlHttpRequest.responseText;
			if(myXmlHttpRequest.responseText=="用户名不可用"){
				document.getElementById("myres").style.color="red";			
			}else{
				document.getElementById("myres").style.color="green"
			}	
		}	
	}