AJAX入门经典小案例_验证用户名
AJAX指的是异步的JavaScript和XML，是一种集成多种语言的脚本，得到了广泛的应用，原理在于随页面在浏览器端创建了ajax引擎，使得表单都经过了这个引擎的中转处理，同时服务器端也积极配合，用echo就可以将结果直接返回给引擎。下面就用一个最常见的用户名的验证小案例展示ajax的应用。
l login.php源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>登录界面</title>
<scripttype="text/javascript">
//创建ajax引擎
functiongetXmlHttpObject(){
varxmlHttpRequest;
if(window.ActiveXObject){//IE浏览器
xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
}else{//others
xmlHttpRequest=newXMLHttpRequest();
}
returnxmlHttpRequest;
}
//验证用户名是否存在
varmyXmlHttpRequest="";
functioncheckName(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
varurl="check.php?username="+$("username").value;
//第三个参数true表示使用异步机制,如果false表示不使用异步
myXmlHttpRequest.open("get",url,true);
//回调函数dealBack
myXmlHttpRequest.onreadystatechange=dealBack;
//get请求填null,post请求，则填实际数据
myXmlHttpRequest.send(null);
}
}
//回调函数
functiondealBack(){
if(myXmlHttpRequest.readyState==4){
$('checker').value=myXmlHttpRequest.responseText;
}
}
//简化获取值
function$(id){
returndocument.getElementById(id);
}
</script>
</head>
<body>
<formaction="" method="">
用户名字:<inputtype="text" οnkeyup="checkName();" name="username1" id="username">
<input style="border-width: 0;color: red"type="text" id="checker">
<br/>
<inputtype="submit" value="登录">
</form>
</body>
</html>
l check.php源代码
<?php
header("Content-Type:text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control:no-cache");
$username=$_GET['username'];
if($username=="LepinHeiker"){
echo"该用户已被列入黑名单";//数据直接返回给请求的页面
}else{
echo"合法用户";
}
?>
解析：上面是以get方式进行的，如果提交的用户名不变化，浏览器将不会真的发请求，而是从缓存取数据，解决方法如下：
l url 后带一个总是变化的参数,比如当前时间varurl="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;
l 在服务器回送结果时，禁用缓存.【已经应用】
@ //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
@ header("Content-Type:text/xml;charset=utf-8");
@ //告诉浏览器不要缓存数据
@ header("Cache-Control:no-cache");
若用post方式，那么关键代码要做如下修改：
l login.php部分源代码
function checkName(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
varurl="check.php";
vardata="username="+$('username').value;
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//回调函数dealBack
myXmlHttpRequest.onreadystatechange=dealBack;
//get请求填null,post请求，则填实际数据
myXmlHttpRequest.send(data);
}
}
l check.php部分源代码
$username=$_POST['username'];
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
