AJAX Suggestions

来源:互联网 发布:pdfobject.js库下载 编辑:程序博客网 时间:2024/04/30 08:49

处理流程 页面(index.html)→处理页面(dologin.php,可以是任何web2.0的相关页面,但是结果只能以字符串值返回)→页面AJAX效果

1.index.html页面代码

<input name="loginid" onBlur="docheck();"><span id="divlogin"></span>

接下来,就是完成AJAX调用,也就是JS脚本

<script language="javascript" type="text/javascript">
var xmlhr=null;//声明XMLHttpRequest全局变量

//创建XMLHttpRequest对象
function getXMLHR(){
 if(window.XMLHttpRequest)//非IE浏览器
 return new XMLHttpRequest();
 else if(window.ActiveXObject){//IE浏览器,注意这里不能用else
 try{
 return new ActiveXObject("Msxml2.XMLHTTP");//IE5.5以上的版本
  }
 catch(e){
 try{
 return new ActiveXObject("Microsoft.XMLHTTP");//IE5.5以下版本
 }catch(e){}
  }
 }
}

//实现用户名的合法性验证
function docheck(){
if(document.getElementById("loginid").value.length==0)//非空验证
{
alert("请输入用户名!");
return;
}
xmlhr=getXMLHR();
if(xmlhr==null){
alert("浏览器不支持xmlhttprequest对象");
return;
 }
xmlhr.onreadystatechange=huidiao;//设置回调函数处理业务逻辑,回调函数不能加()
var url="index1.php?loginid="+document.getElementById("loginid").value;
xmlhr.open("get",url,true);//以get方式发送请求到指定的url处理页面,true为异步调用,即
//无需等待服务器相应就执行后续的JS代码
xmlhr.send(null);//发送请求
}

//回调函数
function huidiao(){
if(xmlhr.readyState=="complete" || xmlhr.readyState==4)//处理业务逻辑完毕
{
var content=xmlhr.responseText;//获得处理页面的返回文本
if(content=="true")
divlogin.innerHTML="<img src=image/right.jpg>用户可以使用";
else
divlogin.innerHTML="<img src=image/error.jpg>用户名被占用,请重新输入";
 }
}
</script>

2. dologin.php页面

<?php
$loginid=$_GET["loginid"];//获取URL重写传参
if($loginid=="admin"){
echo "false";
exit;//注意直接输出内容,exit不能省略
}
else
{
echo "true";
exit;
}
?>

xmlHttpRequest.readyState 有5种状态,0未初始化,1已初始化,2发送请求,3开始接收结果,4接受结果完毕