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

前端之家收集整理的这篇文章主要介绍了AJAX 学习实践之 表单无刷新提交前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

AJAX运行原理分析图如下:


HTML代码如下:

<!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 "用户名可用";
	}
?>
原文链接:https://www.f2er.com/ajax/166057.html

猜你在找的Ajax相关文章