【www.gdgbn.com--php入门】
ajax 入门检测用户名实例与实现方法
我们还需要一个判断输入昵称是否存在的后端页面(本文以php教程为例,这部分不用细究):
...
if(isset($_get["entryname"])){
$entryname=$_get["entryname"];
}else{
$entryname="data null";
}
$sql=sprintf("select * from i_test_ajax where nickname="%s"",$entryname);
$res=$iajax->query($sql);
//sleep只是为了展示readstate==1时的效果
sleep(1);
if(($res->num_rows)>0){
echo "抱歉!此昵称已存在 :(";
}else{
echo "恭喜!此昵称可注册 :)";
}
...
剩下的就交给ajax来处理了。 xmlhttprequest,不得不提的一个对象,ajax最核心也是最底层的对象。可悲哀的是,它是w3c的一个标准,但微软ie一直很自我(微软ie)。怎么办?当然是用一个方法和谐掉它们。微软ie支持activexobject("microsoft.xmlhttp")对象,这样就简单了:
//兼容的xmlhttprequest对象
ixhr: function(){
if(window.activexobject){
xhr=new activexobject("microsoft.xmlhttp");
}else if(window.xmlhttprequest){
xhr=new xmlhttprequest();
}else{
return null;
}
}
兼容的xmlhttprequest对象实现了,接下来写一个简单的onblur事件,即当输入值后,表单失去焦点后开始判断并迅速回馈一个信息到前台。代码如下:
//触发焦点时执行
document.forms["iform"].nickname.onblur = function(){
//输入的值
var val=document.forms["iform"].nickname.value;
//对用户名的判断
if(!/^[a-za-z0-9_]{3,16}$/.test(val)){
alert("请输入3~16位由英文、数字、下划线组成的昵称!");
return false;
}
//初始化一下xhr
ibase.ixhr();
//原来需要新打开的判断页面用get使用异步
xhr.open("get","/demo/ajax/iajax20110306_query.php?entryname="+val,true);
//与readystate属性有关,当readystate改变时它才会触发
xhr.onreadystatechange=returnfun;
//异步处理完成后发送数据出去(比如某些需要在焦点事件后再执行的)
xhr.send(null);
}
ibase.ixhr(),初始化xhr,以保证xmlhttprequest对象的兼容。接下来,通过以get的方式,异步发送到/demo/ajax/iajax20110306_query.php页面进行验证。有人会问什么是get,get是从服务器上请求数据,get方法就是把数据参数队列加到一个url上,值和表单是一一对应的,比如本文的entryname=val。这个概念可能属于后台程序的范畴,不在此细说。然后,我们需要用到一个onreadystatechange事件属性,这个属性是用来存储函数(或函数名),每当readystate属性改变时,就会调用该函数,即本文中的returnfun;最后,我们还要发送一个数据到服务器,send属性一般用于数据交换,而本文只是一个简单的验证判断,所以,send一个空值。基本的判断与数据发送完成了,接下来还剩一个关键的信息获取,即returnfun。
function returnfun(){
//当send()已调用,正在发送请求时,显示loading...
if(xhr.readystate==1){
ibase.id("tips").innerhtml="loding...";
}else if(xhr.readystate==4){
//当响应内容解析完成,可以调用时
//更缜密,再判断一下status是否成功
if(xhr.status==200){
//responsetext为返回的文本
ibase.id("tips").innerhtml=xhr.responsetext;
}
//使用完请销毁,避免内存泄露
xhr=null;
}
}
readystate表示xmlhttprequest对象的处理状态:
0:xmlhttprequest对象还没有完成初始化。
1:xmlhttprequest对象开始发送请求。
2:xmlhttprequest对象的请求发送完成。
3:xmlhttprequest对象开始读取服务器的响应。
4:xmlhttprequest对象读取服务器响应结束。
关于状态的实例
if(xmlhttp.readystate==4){
alert(xmlhttp.status) ;
if(xmlhttp.status==200){
// document.getelementbyid("tdata").innerhtml = xmlhttp.responsetext ;
var logmessage = xmlhttp.responsetext.trim() ;
if(logmessage!="error"){
window.location = "index.jsp教程" ;
}else{
alert("用户名或密码有误,重新输入....") ;
window.location = "login.jsp" ;
}
}
}
另:在ie(即internet explorer)浏览器中可以不区分大小写,但在其他浏览器中将严格区分大小写。所以为了保证更好的跨浏览器效果,建议采用严格区分大小写的形式。
缩合上面的我们把实现整出来如下
<script>
/**
* @author mr.think
* @author blog http://mrthink.net/
* @2011.03.06
* 可自由转载及使用,但请注明版权归属
*/
window.onload = function(){
//底层共用
//定义一个xhr全局变量来存放兼容的xmlhttprequest对象
var xhr=null;
var ibase = {
id: function(name){
return document.getelementbyid(name);
},
//兼容的xmlhttprequest对象
ixhr: function(){
if(window.activexobject){
xhr=new activexobject("microsoft.xmlhttp");
}else if(window.xmlhttprequest){
xhr=new xmlhttprequest();
}else{
return null;
}
}
}
//返回值
function returnfun(){
//当send()已调用,正在发送请求时,显示loading...
if(xhr.readystate==1){
ibase.id("tips").innerhtml="loding...";
}else if(xhr.readystate==4){
//当响应内容解析完成,可以调用时
//更缜密,再判断一下status是否成功
if(xhr.status==200){
//responsetext为返回的文本
ibase.id("tips").innerhtml=xhr.responsetext;
}
//使用完请销毁,避免内存泄露
xhr=null;
}
}
//触发焦点时执行
document.forms["iform"].nickname.onblur = function(){
//输入的值
var val=document.forms["iform"].nickname.value;
//对用户名的判断
if(!/^[a-za-z0-9_]{3,16}$/.test(val)){
alert("请输入3~16位由英文、数字、下划线组成的昵称!");
return false;
}
//初始化一下xhr
ibase.ixhr();
//原来需要新打开的判断页面用get使用异步
xhr.open("get","/demo/ajax/iajax20110306_query.php?entryname="+val,true);
//与readystate属性有关,当readystate改变时它才会触发
xhr.onreadystatechange=returnfun;
//异步处理完成后发送数据出去(比如某些需要在焦点事件后再执行的)
xhr.send(null);
}
}
</script>
ko了。