ajax的基本应用--检查用户名是否被注册案例，这里重点介绍ajax的如何使用，我相信大家看了之后可以融会贯通。
参考代码：
register.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>用户注册</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript"> //创建ajax引擎 function getXMLHttpRequest(){ var xmlHttp; if(window.ActiveXObject){ // Internet Explorer xmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); }else{ // Firefox, Opera 8.0+, Safari xmlHttp= new XMLHttpRequest(); } return xmlHttp; } //验证用户 var xmlHttpRequest; function checkUser(){ xmlHttpRequest=getXMLHttpRequest(); //清除缓存 get 方式提交 /* var url="/ajax/registerProcess.php?time="+new Date()+"&username="+$("username").value; //var url="/ajax/registerProcess.php?username="+$("username").value; xmlHttpRequest.open("get",url,true); //触发器 xmlHttpRequest.onreadystatechange=check; xmlHttpRequest.send(null); */ //post 方式提交 var url="/ajax/registerProcess.php"; var data="username="+$("username").value; xmlHttpRequest.open("post",url,true); //post请求需要加入这句 xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //触发器 xmlHttpRequest.onreadystatechange=check; xmlHttpRequest.send(data); } //回调函数 function check(){ if(xmlHttpRequest.readyState==4){ if(xmlHttpRequest.status=='200'){ //window.alert("OK"); //window.alert("返回用户名"+xmlHttpRequest.responseText); //$("myres").value=xmlHttpRequest.responseText; //返回是个对象 /* //处理xml数据 //window.alert(xmlHttpRequest.responseXML); var mes=xmlHttpRequest.responseXML.getElementsByTagName("mes"); var mes_val=mes[0].childNodes[0].nodeValue; $("myres").value=mes_val; */ //处理json数据 使用eval()函数把返回的字符串转成对应的对象 var mes=xmlHttpRequest.responseText; var mes_obj=eval("("+mes+")"); //window.alert(mes_obj); $("myres").value=mes_obj.res; } } } //获取dom对象 function $(id){ return document.getElementById(id); } </script> </head> <body> <form action="???" method="post"> 用户名字:<input type="text" name="username1" id="username"><input type="button" onclick="checkUser();" value="验证用户名"> <input style="border- 0;color: red" type="text" id="myres"> <br/> 用户密码:<input type="password" name="password"><br> 电子邮件:<input type="text" name="email"><br/> <input type="submit" value="用户注册"> </form> </body> </html>
registerProcess.php
<?php //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式 //header("Content-Type: text/xml;charset=utf-8"); //告诉浏览器返回的数据是文本格式 header("Content-Type: text/html;charset=utf-8"); //告诉浏览器不要缓存数据 header("Cache-Control: no-cache"); //接收 //$username=$_GET['username']; $username=$_POST['username']; $info=""; if($username=="test1"){ //echo "用户已注册"; //$info.="<res><mes>用户名已注册</mes></res>"; $info='{"res":"用户名已注册"}'; }else{ //echo "可以注册"; //$info.="<res><mes>可以注册</mes></res>"; $info='{"res":"可以注册"}'; } echo $info; ?>
截图
