ajax异步实现表单的无刷新验证

在 实现ajax异步实现表单的无刷新验证之前我们先要了解什么是异步什么是同步

"同步模式"就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;"异步模式"则完全不同,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

"异步模式"非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。

这里的表单验证使用的是上文所实现的验证码,通过无刷新ajax技术实现验证

首先我们要准备写三个文件一个是checkcap.php(用来验证ajax发送过来的数据并传出返回值),还有要写一个testcap.php(实现布局),最后要完成checkcap.js的编写


1.testcap.php






验证码




实现首页布局

2.checkcap.js

// JavaScript Document
var xmlhttp;
function checkcap(cap){
	if(cap.length==0){
		document.getElementById("warning").innerHTML="";
		}
	xmlhttp=CreateXmlHttp();
	if(xmlhttp==null){
		alert("创建xmlhttprequest对象失败");
		}
	var url="checkcap.php"
	var url=url+"?q="+cap;
	var url=url+"&id="+Math.random();
	 xmlhttp.onreadystatechange=statechanged;
	 xmlhttp.open("GET",url,true);
     xmlhttp.send(null);	
	}
//创建URL,以及用open方法获取checkcap.php来实现异步传输。
function statechanged(){
	if(xmlhttp.readyState==4&&xmlhttp.status==200){
		document.getElementById("warning").innerHTML=xmlhttp.responseText;
		}
	}
//获取xmlhttprequest的状态,并将返回的内容输出	
function CreateXmlHttp(){
	var xmlhttp=null;
	try{
		xmlhttp=new XMLHttpRequest();
		}
		catch(e){
			try{
		xmlhttp=new ActiveXObject(Msxml2.XMLHTTP);		
				}
		catch(e){
		xmlhttp=new ActiveXObject(Microsoft.XMLHTTP);
			
			}
		}
		return xmlhttp;
	
	}
//初始化xmlhttprequest()


3.checkcap.php












通过以上代码基本实现了ajax无刷新验证,通过此方法在判断是否正确后会输出字符来区分。


ajax异步实现表单的无刷新验证_第1张图片

你可能感兴趣的:(php,JavaScript,ajax)