韩顺平 PHP视频教程 Ajax技术第03讲-无刷新验证用户名　笔记

时间：2022-10-27 17:29:02

register.php文件

<html>
  <head>
     <title>用户注册</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<meta http-equiv="content-type" content="text/html;charset=gb2312" />
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">

	//创建ajax引擎
	function getXmlHttpObject(){

		var xmlHttpRequest;

		//不同的浏览器获取对象xmlhttprequest对象方法不同
		if(window.ActiveXObject){
			//IE下创建xmlhttprequest对象
			xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

			}else{
				//非IE下创建xmlhttprequest对象
				xmlHttpRequest=new XMLHttpRequest();

				}

			return xmlHttpRequest;

		}

	//验证用户名是否存在
	//这里我发现把myXmlHttpRequest=getXmlHttpObject();定义在函数外面结果也是一样，当然作用也是一样
	//var myXmlHttpRequest=getXmlHttpObject();
	var myXmlHttpRequest;//因为函数外部调用了该变量，所以必须定义为全局变量
	function checkName(){
		//这里我发现把myXmlHttpRequest=getXmlHttpObject();定义在函数外面结果也是一样，当然作用也是一样
		myXmlHttpRequest=getXmlHttpObject();
		if(myXmlHttpRequest){
			//get方式提交
			//var url="/ajax/registerProcess.php?username="+$("username").value;
			//var url="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;//如果不想让浏览器缓存，每次发送的地址都不相同，浏览器就不会缓存，在这里加上时间就可以
			//post方式提交
			var url="/ajax/registerProcess.php";//这里因为加的文件所有目录的问题，造成找不到该文件，且也无法显示的出错，让我费了一天的时间。
			data="username="+$('username').value;
			//第一个参数post是提交数据的方式
			//第二个参数url是提交数据到了哪个页面，这是是/ajax/registerProcess.php，因为程序是新打开，所以最好写上此程序目录所在
			//第三个参数true时，说明是异步传送；如果是false是非异步传送
			myXmlHttpRequest.open("post",url,true);

			//当提交方法为post时，要写上这句，固定用法
			myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

			//当对象的状态发生改变时，调用返回函数
			myXmlHttpRequest.onreadystatechange=chuli;

			//发送数据
			myXmlHttpRequest.send(data);
		}

	}
	function chuli(){
		 //window.alert("处理函数被调用"+myXmlHttpRequest.readyState);
		 if(myXmlHttpRequest.readyState==4){
			 	//根据返回数据的类型，使用myxmlhttprequest的对象属性，当返回文本数据时，使用responseText属性
				//window.alert("服务器无刷新"+myXmlHttpRequest.responseText);
				$('myres').value=myXmlHttpRequest.responseText;
			 }
		}
	function $(id){//把DOM对象封装为一个函数进行调用
		return document.getElementById(id);
	}
	

</script>
  </head>
  
  <body>
    <form action="???" method="post">
    用户名字:<input type="text"  name="username1" id="username"><input type="button" onclick="checkName();" value="验证用户名">
    <input style="border-width: 0" type="text" id="myres">
    <br/>
    用户密码:<input type="password" name="password"><br>
    电子邮件:<input type="text" name="email"><br/>
    <input type="submit" value="用户注册">
    </form>
     <form action="???" method="post">
    用户名字:<input type="text" name="username2" >
   
    <br/>
    用户密码:<input type="password" name="password"><br>
    电子邮件:<input type="text" name="email"><br/>
    <input type="submit" value="用户注册">
    </form>
  </body>
</html>


registerProcess.php

<?php
	//返回数据的xml格式编码
	header("Content-Type:text/xml;charset=gb2312");
	//返回数据不缓存
	header("Cache-Control:no-cache");
	//$username=$_REQUEST['username'];
	$username=$_POST['username'];
	if($username=="shunping"){
		echo "用户不可用";
	}else{
		echo "用户名ok";
	}


//v如果不写最后的这个,说明是被别的程序包着的
?>






标签：

相关文章