AJAX 学习实践之表单无刷新提交

刚学完AJAX，实践了一个小案例，记录下来，并与大家分享之：

AJAX运行原理分析图如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//创建Ajax引擎
	function getXmlHttpObject(){
		//不同的浏览器获取对象的方法不一样
		var xmlHttpRequest;
		
		if(window.ActiveXObject){
			//window.alert("IE");
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			//window.alert("ff");
			xmlHttpRequest = new XMLHttpRequest();
		}
		return xmlHttpRequest;
	}
	
	var myXmlHttpRequest="";
	//验证用户名是否存在
	function checkName(){
		//创建对象     一     号线
		myXmlHttpRequest = getXmlHttpObject();
		//怎么证明创建成功(对象不为空，则表明创建成功)
		if(myXmlHttpRequest){
			//window.alert("ok");
			//通过myXmlHttpRequest发送请求到服务器某个页面
			//第一个参数表示提交的方式，“get”,“post”;
			//第二个参数表示对那个页面发出Ajax的请求（本质任然是Http请求）
			//第三个参数 true表示异步机制，如果false表示不使用异步 
			var url="/Ajax/registerprocess.PHP?username="+$("username").value;
			//window.alert(url);
			//打开请求
			myXmlHttpRequest.open("get",url,true);
			//指定回调函数,chuli为函数名,函数带括号表示调用函数，不带括号表示赋函数地址
			myXmlHttpRequest.onreadystatechange=chuli;
			
			//真的发生数据,如果是get请求则填入null，如果是post请求则填入相应的数据
			//二号线,将数据发送给对应的PHP文件
			myXmlHttpRequest.send(null);
		}
	}
	
	//处理函数
	function chuli(){
		//window.alert("处理函数被调用"+myXmlHttpRequest.readyState == 4);
		if(myXmlHttpRequest.readyState == 4){
			//取出值，根据返回值得格式来定 （文本格式/xml）
			//四号线，取值
			//window.alert("服务器返回的值是"+myXmlHttpRequest.responseText);
			$('myreg').value = myXmlHttpRequest.responseText;
		}
		
	}
	
	//封装一个函数取html对象
	function $(id){
		return document.getElementById(id);
	}
</script>
</head>
<body>
<form action="???" method="post">
	用户名<input type="text" onkeyup="checkName()" name="username" id="username"><input type="button" onclick="checkName();" value="验证用户名">
	<input type="text" style="border-width: 0px; color: red" id="myreg"><br/>
	用户密码<input type="password" id="password" name="password"><br/>
	电子邮件<input type="text" name="email"><br/>
	<input type="submit" value="提交">
	<br/>
</form>

<br/>

<form action="???" method="post">
	用户名<input type="text" name="username2" id="username2"><input type="button" value="验证用户名">
	<input type="text" style="border-width: 0px; color: red" id="myreg2"><br/>
	用户密码<input type="password" id="password2" name="password2"><br/>
	电子邮件<input type="text" name="email2"><br/>
	<input type="submit" value="提交">
	<br/>
</form>
</body>
</html>

PHP 代码如下

<?PHP
	//接受数据
	//三号线 接收数据，返回结果
	$username = $_GET['username']; 
	//echo "用户名:".$username;
	if($username == zz){
		echo "用户名不可用";
	}else {
		echo "用户名可用";
	}
?>

AJAX 学习实践之 表单无刷新提交

猜你在找的Ajax相关文章

AJAX 学习实践之表单无刷新提交