以discuz检测用户名为例分析ajax+php（提供源代码）

superadmin · 发表于 2008-1-8 20:16:12

读了下discuz的代码还是感觉很好，今天想学习下ajax，于是就扒下来这段看了下

discuz原程序的验证包括检测用户名是否合法和用户名是否被占用,为了学习方便,就只研究下检测用户名是否被占用的程序吧,因为这个程序基本上把ajax的基础东西都包括了表单文件很简单,就是一个输入用户名的文本框和一个用来存放返回信息的

<input type="text" id="username" name="username" size="25" maxlength="15" onBlur="checkusername()" tabindex="3" />
 

这里面有个onBlur="checkusername()"就是触发验证的,看下这个函数下面是服务器端做出响应的PHP程序

function checkusername(){
 var username=trim($('username').value);
 //关键，获取是否存在此用户名
 ajaxresponse('checkusername', 'action=checkusername&username=' + username );
 }

这个函数有两个作用,一是获得username的值,二是开始ajax验证(function $()和function trim()是discuz定义的函数),下面就开始验证了,来看下ajaxresponse这个函数
复制内容到剪贴板代码:
function ajaxresponse(objname, data) {
 var x = new Ajax('XML', objname);

 x.get('register.php?'+ data, function(s){
 var obj = $(objname);
 if(s == 'succeed') {
 obj.style.display = '';
 obj.innerHTML = '<img src="./check_right.gif" width="13" height="13">';
 obj.className = "warning";
 } else {
 obj.style.display = '';
 obj.innerHTML = '<img src="./check_error.gif" width="13" height="13">';
 obj.className = "warning";
 }
 });
 }
这个函数有两个参数，其中objname就是用来显示返回信息的对象（在这个例子中就是username这个span），data 就是要发出的数据．先跳过var x = new Ajax('XML', objname)这一句（我随后介绍），我们来看function(s),这个函数的作用就是分别控制返回为成功或失败时怎么来显示．

var x = new Ajax('XML', objname)创建了x这个对象，我们来看Ajax这个函数

 1. function Ajax(recvType, waitId) {
2. //参数recvType为返回的文件类型
3. //waitId为返回信息的id（这里为checkusername）
4. for(var stackId = 0; stackId < AjaxStacks.length && AjaxStacks[stackId] != 0; stackId++);
5. AjaxStacks[stackId] = 1;
6.
7. var aj = new Object();
8.
9. aj.loading = 'Loading...';//public
 10. aj.recvType = recvType ? recvType : 'XML';//public
 11. aj.waitId = waitId ? $(waitId) : null;//public
 12.
 13. aj.resultHandle = null;//private
 14. aj.sendString = '';//private
 15. aj.targetUrl = '';//private
 16. aj.stackId = 0;
 17. aj.stackId = stackId;

1. aj.setLoading = function(loading) {
2. if(typeof loading !== 'undefined' && loading !== null) aj.loading = loading;
3. }
4.
5. aj.setRecvType = function(recvtype) {
6. aj.recvType = recvtype;
7. }
8.
9. aj.setWaitId = function(waitid) {
 10. aj.waitId = typeof waitid == 'object' ? waitid : $(waitid);
 11. }
 12. //创建XMLHttpRequest对象
 13. aj.createXMLHttpRequest = function() {
 14. var request = false;
 15. if(window.XMLHttpRequest) {
 16. request = new XMLHttpRequest();
 17. if(request.overrideMimeType) {
 18. request.overrideMimeType('text/xml');
 19. }
 20. } else if(window.ActiveXObject) {
 21. var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
 22. for(var i=0; i<versions.length; i++) {
 23. try {
 24. request = new ActiveXObject(versions);
 25. if(request) {
 26. return request;
 27. }
 28. } catch(e) {}
 29. }
 30. }
 31. return request;
 32. }
 33. aj.XMLHttpRequest = aj.createXMLHttpRequest();
 34. //创建XMLHttpRequest对象结束
 35. //aj.showLoading为显示正在查询的函数
 36. aj.showLoading = function() {
 37. if(aj.waitId && (aj.XMLHttpRequest.readyState != 4 || aj.XMLHttpRequest.status != 200)) {
 38. changedisplay(aj.waitId, '');
 39. aj.waitId.innerHTML = '<img src="loading.gif"> ' + aj.loading + '';
 40. }
 41. }
 42. //定义回调函数
 43. aj.processHandle = function() {
 44. if(aj.XMLHttpRequest.readyState == 4 && aj.XMLHttpRequest.status == 200) {
 45. for(k in Ajaxs) {
 46. if(Ajaxs[k] == aj.targetUrl) {
 47. Ajaxs[k] = null;
 48. }
 49. }
 50. if(aj.waitId) changedisplay(aj.waitId, 'none');
 51. if(aj.recvType == 'HTML') {
 52. aj.resultHandle(aj.XMLHttpRequest.responseText, aj);
 53. } else if(aj.recvType == 'XML') {
 54. aj.resultHandle(aj.XMLHttpRequest.responseXML.lastChild.firstChild.nodeValue, aj);
 55. }
 56. AjaxStacks[aj.stackId] = 0;
 57. }
 58. }
 59.
 60. aj.get = function(targetUrl, resultHandle) {
 61. setTimeout(function(){aj.showLoading()}, 500);
 62. if(in_array(targetUrl, Ajaxs)) {
 63. return false;
 64. } else {
 65. Ajaxs.push(targetUrl);
 66. }
 67. aj.targetUrl = targetUrl;
 68. aj.XMLHttpRequest.onreadystatechange = aj.processHandle;
 69. aj.resultHandle = resultHandle;
 70.
 71. var delay = attackevasive & 1 ? (aj.stackId + 1) * 1001 : 100;
 72. //提交数据
 73. if(window.XMLHttpRequest) {
 74. setTimeout(function(){
 75.
 76. aj.XMLHttpRequest.open('GET', aj.targetUrl,true);
 77.
 78. aj.XMLHttpRequest.send(null);},delay);
 79.
 80. } else {
 81. setTimeout(function(){
 82. aj.XMLHttpRequest.open("GET", targetUrl, true);
 83. aj.XMLHttpRequest.send();}, delay);
 84. }
 85. }
 86. return aj;
 87. }
这个ＰＨＰ程序输出的是一个ＸＭＬ文档

1. <?php
2. header("Content-Type: application/xml");
3. echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
4. if($_GET['action'] == 'checkusername') {
5. if(!mysql_connect("localhost","root","1111")){
6. echo "连接错误";
7. }
8. mysql_select_db("test");
9.
 10. $username = trim($username);
 11. //查询
 12. $query = mysql_query("SELECT username FROM user WHERE username='$username'");
 13. $username = stripslashes($username);
 14. if(mysql_num_rows($query)) {
 15. $result='register_check_found';
 16. }else{
 17. $result='succeed';
 18. }
 19. echo "<root>";
 20. echo "<![CDATA[".$result."]]>";
 21. echo "</root>";
 22. }
 23. ?>
OK,这样验证就结束了！
其实仔细研究一下原理的话会发现ajax并不难，只是一个异步提交而已比我想象的简单多了，就是好多人向我一样对ajax产生了恐惧

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

以discuz检测用户名为例分析ajax+php（提供源代码）

本帖子中包含更多资源