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':'服务端放回的数据格式'}";

?>

 

 

你可能感兴趣的:(Ajax)