以我以前写的一个练习AJAX的会员注册页面为例。
下面这些主要是在输入用户名,光标离开输入框就进行判断该用户名是否合法的ajax方法。
(1)Xmlhttprequest AJAX之核心
function S_Xmlhttprequest(){ if(window.ActiveXObject) //IE xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); else if(window.XmlHTTPRequest) //非IE xmlhttp = XmlHTTPRequest(); }
(2)AJAX函数,也就是在HTML中onblur=ajax()的函数
function ajax(){ /* if(form1.textfield.value == ''){ document.getElementById('div1').innerHTML = "请输入用户名"; return false; } */ S_Xmlhttprequest(); //调用Xmlhttprequest var f = document.form1.textfield.value; xmlhttp.onreadystatechange = show; //onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果 xmlhttp.open('GET','for.php?id='+f,true); xmlhttp.send(null); }
(3)ajax()调用的show()方法,就是对readyState各种不同状态采用不同行为的方法
function show(){ if(xmlhttp.readyState == 1) document.getElementById('div1').innerHTML = "<img src="loading.gif" mce_src="loading.gif">"; else if(xmlhttp.readyState == 4){ var result = xmlhttp.responseText; document.getElementById('div1').innerHTML = result; } }
readyState的4种状态:
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
responseText()方法在我看来,应该是返回PHP文件输出的内容。
最后附上那个for.php的内容:
<? @header("content-Type: text/html; charset=gb2312"); include("MyDb.php"); $db = new MyDb($DB_LOCATION,$DB_USER,$DB_PWD); $db->select_db('student'); if($user = $_GET['id']){ if( strlen($user)<6 || strlen($user)>12){ echo "<img src="error.gif" mce_src="error.gif"/><font color=red size=2>长度不符合</font>"; exit(); } $zz = "^[_a-zA-Z0-9]+([_]?[a-zA-Z0-9]+)$"; if(!ereg($zz,$user)){ echo "<img src="error.gif" mce_src="error.gif"/><font color=red size=2>格式有误</font>"; exit(); } $db->exec_array("select * from testmem where user='".$user."'"); if(is_array($db->rs)){ echo "<img src="error.gif" mce_src="error.gif"/><font color=red size=2>已存在</font>"; } else echo "<img src="yes.gif" mce_src="yes.gif"/><font color=green size=2>可以使用<font>"; } else if($email = $_GET['email']){ $db->exec_array("select * from testmem where email='".$email."'"); if(is_array($db->rs)){ echo "<img src="error.gif" mce_src="error.gif"/><font color=red size=2>已存在</font>"; } else echo "<img src="yes.gif" mce_src="yes.gif"/><font color=green size=2>可以使用<font>"; } ?>