刚学完AJAX,实践了一个小案例,记录下来,并与大家分享之:
AJAX运行原理分析图如下:
html代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//创建Ajax引擎
function getXmlHttpObject(){
//不同的浏览器获取对象的方法不一样
var xmlHttpRequest;
if(window.ActiveXObject){
//window.alert("IE");
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else{
//window.alert("ff");
xmlHttpRequest = new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest="";
//验证用户名是否存在
function checkName(){
//创建对象 一 号线
myXmlHttpRequest = getXmlHttpObject();
//怎么证明创建成功(对象不为空,则表明创建成功)
if(myXmlHttpRequest){
//window.alert("ok");
//通过myXmlHttpRequest发送请求到服务器某个页面
//第一个参数表示提交的方式,“get”,“post”;
//第二个参数表示对那个页面发出Ajax的请求(本质任然是Http请求)
//第三个参数 true表示异步机制,如果false表示不使用异步
var url="/Ajax/registerprocess.php?username="+$("username").value;
//window.alert(url);
//打开请求
myXmlHttpRequest.open("get",url,true);
//指定回调函数,chuli为函数名,函数带括号表示调用函数,不带括号表示赋函数地址
myXmlHttpRequest.onreadystatechange=chuli;
//真的发生数据,如果是get请求则填入null,如果是post请求则填入相应的数据
//二号线,将数据发送给对应的PHP文件
myXmlHttpRequest.send(null);
}
}
//处理函数
function chuli(){
//window.alert("处理函数被调用"+myXmlHttpRequest.readyState == 4);
if(myXmlHttpRequest.readyState == 4){
//取出值,根据返回值得格式来定 (文本格式/xml)
//四号线,取值
//window.alert("服务器返回的值是"+myXmlHttpRequest.responseText);
$('myreg').value = myXmlHttpRequest.responseText;
}
}
//封装一个函数取html对象
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="???" method="post">
用户名<input type="text" οnkeyup="checkName()" name="username" id="username"><input type="button" οnclick="checkName();" value="验证用户名">
<input type="text" style="border-width: 0px; color: red" id="myreg"><br/>
用户密码<input type="password" id="password" name="password"><br/>
电子邮件<input type="text" name="email"><br/>
<input type="submit" value="提交">
<br/>
</form>
<br/>
<form action="???" method="post">
用户名<input type="text" name="username2" id="username2"><input type="button" value="验证用户名">
<input type="text" style="border-width: 0px; color: red" id="myreg2"><br/>
用户密码<input type="password" id="password2" name="password2"><br/>
电子邮件<input type="text" name="email2"><br/>
<input type="submit" value="提交">
<br/>
</form>
</body>
</html>
PHP代码如下
<?php
//接受数据
//三号线 接收数据,返回结果
$username = $_GET['username'];
//echo "用户名:".$username;
if($username == zz){
echo "用户名不可用";
}else {
echo "用户名可用";
}
?>