ajax的实例 

<!--
燕十八 公益PHP培训    课堂地址:YY频道88354001   学习社区:www.zixue.it -->
<html>
<head>
<title>ajax</title>
<meta http-equiv="content-type"content="text/html;charset=utf-8 "/>
<script language="javascript">

	function $(id){
		return document.getElementById(id);
	}
		var myXMLHttpRequest="";
	//判断浏览器支持创建ajax引擎
	function getXMLHttpObject(){
		if(window.ActiveXObject){
			return myXMLHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
		}
		else{
			return myXMLHttpRequest=new XMLHttpRequest();
			
		}
	}
	//验证函数
	function CheakName(){
		var myXMLHttpRequest=getXMLHttpObject();
		if(myXMLHttpRequest){
			var url="/Ajax/register.php?username="+$('username')+"&"+new Date();
			window.alert(url);
			myXMLHttpRequest.open('get',url,true);
			myXMLHttpRequest.onreadystatechange=deal;
			myXMLHttpRequest.send(null);
		}
	}
	//设定ajax的回调函数
	function deal(){
		//window.alert("guosisdlg"+myXMLHttpRequest.readyState);
		if(myXMLHttpRequest.readyState==4){
			//window.alert("服务器返回"+myXMLHttpRequest.responseText);
　　　　　　　　　　　　　　　　//responseText 确定服务端返回的数据格式
			$('val').value=myXMLHttpRequest.responseText;
		}
	}




</script>
</head>
<body>
<form action="???" method="post">
<table>
<tr><td>用户名:</td>
<td><input type="text" value="" id="username" /></td>
<td><input type='button' value="test" onclick="CheakName();" /></td>
<td><input type="text" style="border-width:0px;color:red;" id="val" /></td>
</tr>
</table>
</form>
<form action="???" method="post">
<table>
<tr><td>用户名:</td>
<td><input type="text" value=""   /></td>
<td><input type='button' value="验证"   /></td>
<td><input type="text" style="border-width:0px;color:red;" /></td>
</tr>
</table>
</form>
</body>
</html>
<!------------服务端---------------------->
<?php 
/*
　　服务端只要打印客户端ajax请求的内容即可
　　1:text格式->直接文本格式
　　2:xml格式->标准的xml格式
　　3:json格式->js原生数据格式
*/
　//1:text 格式
　　echo "服务端返回contents";
　　//2:xml格式
　　echo "<root><content>服务端返回内容</content></root>";
　　//3:json 格式
　　echo "{'content':'服务端放回的数据格式'}";
?>

 

 

posted @ 2012-12-22 20:20  arvim  阅读(180)  评论(0)    收藏  举报